how to use Header and footer element in html at codelent

Headers and footers
Because web authors have been labeling header and footer sections in their documents for years, it was kind of a no-brainer that full-fledged header and footer elements would come in handy. Let’s start with headers

Headers
<header>…</header>

The header element is used for introductory material that typically appears at the beginning of a web page or at the top of a section or article. There is no specified list of what a header must or should contain; anything that makes sense as the introduction to a page or section is acceptable. In the following example, the document header includes a logo image, the site title, and navigation.

<header>
<img src="/images/logo.png">
<hgroup>
<h1>Nuts about Web Fonts</h1>
<h2>News from the Web Typography Front</h2>
</hgroup>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Shop</a></li>
</ul>
</nav>
</header>
… page content …
When used in an individual article, the header might include the article title,
author, and the publication date, as shown here:
<article>
<header>
<h1>More about WOFF</h1>
<p>by Jennifer Robbins, <time datetime="11-11-2011"
pubdate>November 11, 2011</time></p>
</header>
<p>...article content starts here…</p>
</article>


Footers
<footer>…</footer>

The footer element is used to indicate the type of information that typically comes at the end of a page or an article, such as its author, copyright information, related documents, or navigation. The footer element may apply to the entire document, or it could be associated with a particular section
or article. If the footer is contained directly within the body element, either before or after all the other body content, then it applies to the entire page or application. If it is contained in a sectioning element (section, article, nav, or aside), it is parsed as the footer for just that section. Note that although it is called “footer,” there is no requirement that it come last in the docu-ment or sectioning element. It could also appear at or near the beginning if it makes semantic sense.
In this simple example we see the typical information listed at the bottom of an article or blog post marked up as a footer.

<article>
<header>
<h1>More about WOFF</h1>
<p>by Jennifer Robbins, <time datetime="11-11-2011"
pubdate>November 11, 2011</time></p>
</header>
<p>...article content starts here…</p>
<footer>
<p><small>Copyright &copy;2012 Jennifer Robbins.</small></p>
<nav>
<ul>
<li><a href="">Previous</a></li>
<li><a href="">Next</a></li>
</ul>
</nav>
</footer>
</article>

Warning:
Neither header nor footer elements are
permitted to contain nested header or
footer elements.

NOTE
You can also add headers and footers
to sectioning root elements: body, blockquote,
details, figure, td, and fieldset.