Lately we were hearing lot of buzz about HTML5 and CSS3. HTML5 is introduced with new elements like Video, audio, animations with canvas, geolocation and many more. Actually you add richness to your markup with the proper use of these new elements.
Why we need all these new elements?
In our everyday codes we are using the <div id=”nav”>, <div class=”header”> and <div class=”footer”> with some CSS and JavaScript. These div elements have been replaced with nav, header and footer as new elements in HTML5. Below is the list of new elements introduced in HTML5.
| Tag |
Description |
| <article> |
Defines an article |
| <aside> |
Defines content aside from the page content |
| <audio> |
Defines sound content |
| <canvas> |
Defines graphics |
| <command> |
Defines a command button |
| <datalist> |
Defines a dropdown list |
| <details> |
Defines details of an element |
| <embed> |
Defines external interactive content or plugin |
| <figcaption> |
Defines the caption of a figure element |
| <figure> |
Defines a group of media content, and their caption |
| <footer> |
Defines a footer for a section or page |
| <header> |
Defines a header for a section or page |
| <hgroup> |
Defines information about a section in a document |
| <keygen> |
Defines a generated key in a form |
| <mark> |
Defines marked text |
| <meter> |
Defines measurement within a predefined range |
| <nav> |
Defines navigation links |
| <output> |
Defines some types of output |
| <progress> |
Defines progress of a task of any kind |
| <rp> |
Used in ruby annotations to define what to show if a browser does not support the ruby element |
| <rt> |
Defines explanation to ruby annotations |
| <ruby> |
Defines ruby annotations |
| <section> |
Defines a section |
| <source> |
Defines media resources |
| <summery> |
Defines the header of a “detail” element |
| <time> |
Defines a date/time |
| <video> |
Defines a video |
| <wbr> |
Defines a possible line-brea |
In this article I am not going to discuss about all the above elements but some more important elements.
In this four of the new elements called as sectioning elements. They are article, aside, nav and section.
Sectioning elements
<section>
The first, and most generic of the four new sectioning elements is section. According to HTML5 Documentation:
“The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.”
“Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.”
In the following example, we see an article (part of a larger Web page) about apples, containing two short sections.
<article>
<hgroup>
<h1>Apples</h1>
<h2>Tasty, delicious fruit!</h2>
</hgroup>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most common found in many supermarkets.</p>
</section>
<section>
<h1>Granny Smith</h1>
<p>These juicy, green apples make a great filling for apple pies.</p>
</section>
</article>
<article>
There’s been much debate on the web about the use of the article element. Originally the spec seemed a bit nebulous and confusing to some. With further clarification over time, the element has been defined as:
“The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.”
“When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.”
This example shows a blog post using the article element:
<article>
<header>
<h1>The Very First Rule of Life</h1>
<p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
</header>
<p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p>
<p>...</p>
<footer>
<a href="?comments=1">Show comments...</a>
</footer>
</article>
In this the new element <time> is added. According to the spec:
“This element is intended as a way to encode modern dates and times in a machine-readable way so that, for example, user agents can offer to add birthday reminders or scheduled events to the user’s calendar.”
<nav>
This sectioning element relates to navigation of your site and its pages. According to the spec:
“The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.”
In the following example, the page has several places where links are present, but only one of those places is considered a navigation section.
<body>
<header>
<h1>Wake up sheeple!</h1>
<p><a href="news.html">News</a> -
<a href="blog.html">Blog</a> -
<a href="forums.html">Forums</a></p>
<p>Last Modified: <time>2009-04-01</time></p>
<nav>
<h1>Navigation</h1>
<ul>
<li><a href="articles.html">Index of all articles</a></li>
<li><a href="today.html">Things sheeple need to wake up for today</a></li>
<li><a href="successes.html">Sheeple we have managed to wake</a></li>
</ul>
</nav>
</header>
<div>
<article>
<header>
<h1>My Day at the Beach</h1>
</header>
<div>
<p>Today I went to the beach and had a lot of fun.</p>
...more content...
</div>
<footer>
<p>Posted <time pubdate="" datetime="2009-10-10T14:36-08:00">Thursday</time>.</p>
</footer>
</article>
...more blog posts...
</div>
<footer>
<p>Copyright © 2006 The Example Company</p>
<p><a href="about.html">About</a> -
<a href="policy.html">Privacy Policy</a> -
<a href="contact.html">Contact Us</a></p>
</footer>
</body>
<aside>
The last sectioning element the aside. It is for the sidebar or the sidepanel of the page. According to the spec:
“The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.”
“The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.”
The following example shows how an aside is used to mark up background material on Switzerland in a much longer news story on Europe.
<aside>
<h1>Switzerland</h1>
<p>Switzerland, a land-locked country in the middle of geographic
Europe, has not joined the geopolitical European Union, though it is
a signatory to a number of European treaties.</p>
</aside>
There are two more most important elements header and footer.
<header>
The header element itself finds its place at the top of the page, is really more about identifying the importance of the content within it. The spec says:
“The header element represents a group of introductory or navigational aids.”
“A header element is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.”
You can have more than one header element in a page. You’ll likely have one global header, but sectioning elements can also have headers.
<footer>
As with header, you can have more than one footer element in a page. You’ll likely have one global footer, but sectioning elements can also have footers. The spec says this:
“The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.”
“When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.”
Here is a page with two footers, one at the top and one at the bottom, with the same content:
<body>
<footer><a href="../">Back to index...</a></footer>
<hgroup>
<h1>Lorem ipsum</h1>
<h2>The ipsum of all lorems</h2>
</hgroup>
<p>A dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
<footer><a href="../">Back to index...</a></footer>
</body>
————————————————————————————————————————————–
The HTML code used for the above image is