Basic Elements HTML 5 : header, nav & footer

HTML5 development is not finish yet. But, there a few new elements in HTML5 that can be used today, elements that are already supported in current and old browsers (with shim) such as header, nav, and footer. You probably have seen these elements used across our HTML5 tutorials but haven’t actually looked under the hood.

I think it’s time we explore these new elements and see what these elements are actually used for. This post is part of our series which covers new and exciting features in HTML5. If you have missed the previous ones, check out these titles:

Element Header

The new HTML5 elements, fortunately, are described with a very logical name and according to the specification the header element represents "A group of introductory or navigational aids.” (It is in my opinion that it is much better citing from the official and legitimate source for an accurate description, as often times the meaning could be distorted).

From the explanation above, we can conclude that the header element is not intended to solely define the header of a web page. The header element may also be used to define a part (typically at the top) that introduce the section that follows.
For example, in the following code snippet, I’ve put header element at the top of my post content to wrap the title and post meta;

<header>
 <h1>This is the Title of the Content</h1>
 <div class="post-meta">
  <p>By Author</a> <span class="category">Filed in Web 2.0</span></p>  
 </div>
</header>
<article>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id 
 felis et augue sagittis euismod quis at sem. Nunc sit amet magna ac velit congue 
 ultricies. Sed eros justo, lacinia in fringilla sollicitudin, congue id massa. 
 Nunc dignissim bibendum nibh, sed dictum massa pharetra sit amet.</p>
</article>

Since the title and the post meta, in this example, are placed at the top and acts as the introduction of the post content , we can wrap them inside the header element.

Nav Element

The nav element stands for Navigation. According to the spec. this element represents; “A section of a page that links to other pages or to parts within the page: a section with navigation links.”
While this element is clearly used for defining navigation specifically, the implementation is not limited to only the primary navigation, typically at the top of the web page. From the official description above, we can conclude that the nav element can also be used on any part of the page that also acts as a navigator, see the following example;

<h4>Table of Content</h4>
<nav>
 <ul>
  <li><a href="#overview">Overview</a></li>
  <li><a href="#history">History</a></li>
  <li><a href="#development">Development</a></li>
 <ul>
</nav>

In this example, we have used nav element to wrap Table of Content, where the links are still pointed to the same page.

Footer Element

Another element that is now widely adopted is the footer element. Generally we refer the footer to a section located at the very bottom of the web page, but let’s take a look how the specification describe this element; “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.”
That is a bit puzzling, let’s make this thing simpler.
The footer is (still) logically placed at the bottom. But since the specification did not mention this element to be used exclusively for web footers, we can conclude that the implementation for the footer element may also be used at the end of a section. Let’s see the example below;

<div>
<header>
<h1>This is the Title of the Content</h1>
 <div class="post-meta">
  <p>By Author</a> <span class="category">Filed in Web 2.0</span></p>  
 </div>
</header>
<article>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id 
 felis et augue sagittis euismod quis at sem. Nunc sit amet magna ac velit congue 
 ultricies. Sed eros justo, lacinia in fringilla sollicitudin, congue id massa. 
 Nunc dignissim bibendum nibh, sed dictum massa pharetra sit amet.</p>

</article>
<footer>
 <div class="tags">
  <span class="tags-title">Tags:</span> <a href="#" rel="tag">Command Prompt</a>, <a href="#" rel="tag">Compass</a>, <a href="#" rel="tag">CSS</a>, <a href="#" rel="tag">Sass</a>, <a href="#" rel="tag">Terminal</a>
 </div>
 <div class="facebook-like">
  <div>10 likes</div> <!-- let's pretend it to be the facebook like -->
 </div>
</footer>
</div>

In this example, we have extended our post content to have a footer containing post tags and the post ‘Likes’.

Sumber http://www.hongkiat.com/blog/html5-basic-elements/

Blog Mr. Em