02 - New Semantic Elements in HTML5

Introduction

HTML5 introduces a number of elements mainly for better document structure. These elements are known as semantic elements. A webpage has a proper structure with a number of sections including headers, menus, main content or even footer. HTML tags are instructions that we give to a web browser. Now (without HTML5) we use <div> tag to divide a page into different sections. You might have used <div id=”header”> to include your header, website logo and even the main navigational menus. The problem with the <div> element is that it is a very generic element that does not carry proper meaning. If the instructions are more meaningful, it will help not only the web developers to better use the tags, but also the browsers to better understand the tags.

The meaning of the word semantic itself is implied meaning and of course, the semantic elements are elements with a meaning. For example, the element <header> itself implies that it defines header of a webpage and it is more meaningful than a <div> element. The most commonly used new semantic elements include <header>, <footer>, <aside>, <main, <section>, <article>, <nav>, <details> and <summary>. Let us see these different elements one by one.

New Semantic Elements

Given below is a basic HTML5 page structure that uses some of the semantic elements.

           

Just by using semantic elements, you will not get a webpage like the one shown above. You need to use CSS properly if you want to get a layout like this.

<header>

The <header> element is used to group the header elements of a document. You can include main headings, major navigation links or even the website logo inside the <header> element. Usually, header is displayed at the top of a page. However, you can have a <header> even inside any <section> element on your webpage. That is, even individual sections can have headers. The main rule with <header> element is that you cannot nest a header inside another header.

Sample HTML5 Code:

<!DOCTYPE html>
<html>
 <head>
   <title>Header Element</title>
 </head>
 <body>
  <header>
   <h2>Here is the Main Title!!!</h2>
  </header>
  <p>This the main content.</p>
 </body>
</html>

Output:

                    

<footer>

The <footer> element is used to define a footer section of a document. A footer normally contains information about the data such as who wrote it, additional references, links to related documents or even copyright data. Footers need not necessarily appear at the end of the page. You can have more than one footer in a webpage if you want. You can have different footers for different sections also. The major rule is that you cannot nest a footer inside another footer.

Sample Code:

<!DOCTYPE html>
 <html>
   <head>
      <title>Footer Element</title>
   </head>
   <body>
     <footer>
       <b>Copyright &copy;</b> abctest.com
      </footer>
    </body>
  </html>

Output:

               

<main>

You can use the <main> element to define the main content of a document. This element includes content that is directly related to the main topic of a document. The <main> element may not be a child of any other structural elements like <header>, <footer>, <article>, or <aside>. In other words, you cannot nest <main> inside other semantic elements and there must not be more than one <main> element in a document.

Sample Code:

<!DOCTYPE html>
 <html>
  <head>
    <title>Main Example</title>
  </head>
  <body>
    <main>
     <h1>Main Content</h1>
       <article>
     <h3>First Article</h3>
       <p>This is the first article. This is the first article. This is the first article.</p>
     </article>
     <article>
       <h3>Second Article</h3>
       <p>This is the second article. This is the second article. This is the second article.</p>
     </article>
     <article>
      <h3>Third Article</h3>
      <p>This is the third article. This is the third article. This is the third article.</p>
     </article>
   </main>
  </body>
</html>

Output:

                     

<section>

The <section> element is a generic element used to define a section of your document. This element is normally used to display a section which includes logically connected or grouped content. The numbered sections of a thesis or different chapters of a textbook are all examples of sections. Each section can have its own <header>, <footer> or <article> elements. You are allowed to nest a section inside another section.

Sample Code:

<!DOCTYPE html>
<html>
 <head>
   <title>Section Example</title>
 </head>
 <body>
  <section>
    <h1>First Section</h1>
    <p>This is the first section. This is the first section. This is the first section. This is the first section. This is the first section.</p>
  </section>
  <section>
    <h1>Second Section</h1>
    <p>This is the second section. This is the second section. This is the second section. This is the second section. This is the second section.</p>
  </section>
 </body>
</html>

Output:

      

<article>

The <article> element defines independent and self-contained content. Any content that can be read independently from the rest of the content can be enclosed within an <article> element. You can use this element to define a newspaper or magazine article or a blog post.

Sample Code:

<!DOCTYPE html>
 <html>
  <head>
   <title>Article Example</title>
  </head>
  <body>
   <section>
    <h1>Main Section</h1>
    <article>
      <h3>First Article</h3>
      <p>This is the first article. This is the first article. This is the first article.</p>
    </article>
    <article>
      <h3>Second Article</h3>
      <p>This is the second article. This is the second article. This is the second article.</p>
    </article>
    <article>
      <h3>Third Article</h3>
      <p>This is the third article. This is the third article. This is the third article.</p>
     </article>
    </section>
  </body>
</html>

Output:

           

<aside>

You can use the <aside> element if you want to include some content aside from the page content. The content within the <aside> element needs to be tangentially related to the nearby info. The <aside> element is normally used as a sidebar though it is not limited to use so. You can use it whenever you want to display some content that is considered separate from the main content of the page such as pull quotes, advertisements and so on.

Sample Code:

<!DOCTYPE html>
 <html>
  <head>
   <title>Aside Example</title>
   <style>
    section{
      border:1px solid black;
      width:200px;
      height:200px;
      }
      aside{
      border:1px solid black;
      width:120px;
      height:200px;
      position:relative;
      left:220px;
       top:-202px;
     }
    </style>
   </head>
   <body>
    <section>
      <h2>Main Section</h2>
      <p>This is the main section.</p>
    </section>
    <aside>
     <h4>Advertisement Area</h4>
     <p>This is the advertisement section.</p>
    </aside>
  </body>
</html>

Output:

                  

<nav>

Navigation menus are very common in websites and <nav> element is used to hold a set of hyperlinks that link to another part within the same webpage, another webpage within the same website or even another website. You can define a horizontal or a vertical navigation menu using the <nav> element. It is not necessary to add all links inside a <nav> element. You can add all major links in a <nav> element and then include the <nav> element inside a <header> or <footer> if you want.

Sample Code:

<!DOCTYPE html>
 <html>
  <head>
    <title>Nav Example</title>
  </head>
   <body>
    <nav>
     <a href="/jquery/">jQuery</a> |
     <a href="/ui/">jQuery UI</a> |
     <a href="/mobile/">jQuery Mobile</a> 
    </nav>
   </body>
</html>

Output:

<details> and <summary>

The <details> element specifies additional information that the user can show or hide as he wants. The content inside the <details> element acts like an interactive widget which the user can open and close. The content inside this element will be visible when the page loads only if the open attribute is set. The <summary> tag defines the visible heading for the <details> element which can be clicked to show or hide the details.

Sample Code:

<!DOCTYPE html>
 <html>
  <head>
   <title>Details Example</title>
  </head>
  <body>
    <details open>
     <summary>Click the arrow</summary>
     <p>This is the content that can be hidden or shown.</p>
     </details>
  </body>
</html>

Output:

               

Summary

In this tutorial, we have seen different HTML5 semantic elements that are useful for better document structure. Instead of using the generic <div> element to divide the entire document into different sections, we can use appropriate semantic elements and structure the document better.

Like us on Facebook