Some new structural tags in HTML5

Before HTML5, <div> elements were the only opportunity for defining block-level page structure. HTML5 introduced us with few important structural elements: header, footer, nav, article, section, aside and hgroup.  The new elements simply give us an element that carries more meaning, with which to replace the generic <div>.

Header: Header element is designed for the header area of a page or page section. The header element can contain h1-h6 heading tag and other elements as well. it can be nested within each <article> element of a single web page.

<header>
    <h1>Anupam Dutta</h1>
    <h2>(Web and Desktop Application Developer)</h2>
</header>

Footer: The footer tag of HTML5 usually contains information of a section or document. Basically author information, copyright data, links to related documents, social networking and sharing links are placed within the footer tag.

<footer>
  <h3> Copyright 2013 Anupam Dutta</h3>
</footer>

Nav: Nav element contains the navigation functionality of a page such as table of contents and menu. Nav can appear more than once in a web page.

<nav>
    <ul>
      <li><a href="#HOME">HOME</a></li>
      <li><a href="#MVC">MVC</a></li>  
      <li><a href="#MSSQL">MSSQL</a></li>  
      <li><a href="#HTML5">HTML5</a></li>  
      <li><a href="#ABOUT">ABOUT</a></li>  
    </ul>
</nav>

Section: The section element is similar to <div> as a general container which represents a standard section of a document, web page or application, such as a chapter, for example.  It has some semantic meaning. Section is a sectional element but <div> is not a sectional element. Section indicates a new section in a document.

<section id="MSSQL">
  <h2> MSSQL DATABASE BACKUP</h2>
  <!-- multiple article elements could go in here -->
</section>

<section id="MVC">
  <h2> ASP.NET MVC SCAFFOLDING IN CODE FIRST SCENARIOS </h2>
  <!-- multiple article elements could go in here -->
</section>

Article: The article element represents an independent section of a document, page or site. It is appropriate for content like a magazine or newspaper article, blog articles, individual comments or forum posts, an interactive gadget or widget.

<article>
  <section id="MVC">
    <h2>ASP.NET MVC SCAFFOLDING IN CODE FIRST SCENARIOS</h2>
  </section>
  <section id="MSSQL">
    <h2>MSSQL DATABASE BACKUP</h2>
  </section>
</article>

Aside: The aside element is for content that is tangentially related to another content item (such as a section or article), and is typically useful for marking up sidebars.

<aside>
  <table>
<h2>Related post</h2>
    <!-- lots of quick facts inside here -->
  </table>
</aside>

Hgroup: The hgroup element is used to group any set of h1 - h6 elements when the heading has multiple levels.

<header>
  <hgroup>
    <h1>Anupam Dutta</h1>
    <h2>(Web and Desktop Application Developer)</h2>
  </hgroup>
</header>

Categories: HTML5