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>
Posts
