"The
<footer>element represents a footer for the completed documented or its nearest ancestor sectioning content." - WHATWG's HTML5 Draft Standard - http://whatwg.org/html5
We've all used footers on our web pages — typically for things like secondary navigation and more. This contains all the information you typically see at the bottom of a page, like a copyright notice, privacy policy, terms of use, and many more. Like the new <header> tag, the new <footer> tag can occur in more than one place.
In this case, we're going to use the new <footer> tag to place Roxane's copyright information at the bottom of the page.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Roxane</title> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>[endif]--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <hgroup> <h1>Roxane is my name.</h1> <h2>Developing websites is my game.</h2> </hgroup> </header> <nav> <ul> <li><a href="#About">About</a></li> <li><a href="#Work">Work</a></li> <li><a href="#Contact">Contact</a></li> </ul> </nav> <section id="About"> <h3>About</h3> <p>I'm a front-end developer who's really passionate about making ideas into simply dashing websites.</p> <p>I love practical, clean design, web standards give me joyful chills, and good usability tickles the butterflies in my stomach.</p> </section> <section id="Work"> <h3>Work</h3> <p>sample 1</p> <p>sample 2</p> <p>sample 3</p> </section> <section id="Contact"> <h3>Contact</h3> <p>email</p> <p>phone</p> <p>address</p> </section> <aside> <h4>What I'm Reading</h4> <ul> <li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/2688OS_MockupCover.jpg" alt="Inkscape 0.48 Essentials for Web Designers"> Inkscape 0.48 Essentials for Web Designers</li> <li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/bookimages/0042_MockupCover_0.jpg" alt="jQuery 1.4 Reference Guide"> jQuery 1.4 Reference Guide</li> <li><img src="http://packtpub.com/sites/default/files/imagecache/ uc_thumbnail/9881OS_MockupCover.jpg" alt="Blender 2.5 Lighting and Rendering"> Blender 2.5 Lighting and Rendering</li> <footer> tagimplementing</ul> </aside> <aside> <h4>Elsewhere</h4> <p>You can also find me at:</p> <ul> <li><a href="http://linkedin.com/in/">LinkedIn</a></li> <li><a href="http://twitter.com/">Twitter</a></li> <li><a href="http://facebook.com/">Facebook</a></li> </ul> </aside> <footer> <h5>All rights reserved. Copyright Roxane.</h5> </footer> </body> </html>
Though this <footer> is located at the bottom of Roxane's single-page portfolio site, it can be used elsewhere on a page, such as at the bottom of a <section> tag to contain information like author, publication date, and so on. The result is more flexible than something like the old <div id="footer"> allowed us. In this and many other instances, HTML5's new tags allow us to place appropriate tags where they make the most sense, based on our content, not our layout.
The HTML5 specification suggests author information be included in the new <footer> tag no matter if the <footer> is part of a <section> or <article> or even at the bottom of the page.
The vast majority of the time, you'll use the <header> tag at the top of your document, the <footer> tag at the bottom, and <aside> tags for the sides.
Mark Pilgrim created a terrific free online HTML5 reference Dive Into HTML5 located at: http://diveintohtml5.org.