The Footer Tag introduced in HTML5

The footer tag has been introduced in HTML5 for producing better page structure:
The Code: <footer></footer>

Is like a closing statement for a web page or a section which can contain information about the author, copyright information, etc.

Common Uses

Copyright information
Author details and or contact info
Navigation links (ex. “Back to top”)
Site map of related documents
Secondary navigation

Where to Use the Footer

At the bottom of an entire webpage
Inside articles, sections, or other containers to close out that part of the web page.

Rules:
You can nest divisions and paragraphs inside footers
Do not nest footers inside footers!

Examples:

Different ways to use the footer element:

<body>
<h1>Page title</h1>
<article>
 <h1>article title</h1>
 <video>
  <p><a href="*.ogv">Download video</A>.</p>
 </video>
  <footer> <!-- footer for article -->
  <p>Published : date and time</p>
 </footer>
</article>

<section>
 <h1>section title</h1>
 <p>section information</p>
 <p>section information</p>
 <footer> <!-- footer for section -->
  <p>Last Modified: date</p>
 </footer>
</section>

<footer> <!-- site wide footer -->
 <nav>
  <p><a href="/credits.html">Credits</A>
     <a href="/tos.html">Terms of Service</A>
     <a href="/index.html">Blog Index</A></p>
 </nav>
 <p>© 2009 Gordon Freeman Contact at: br@549.if</p>
</footer>
</body>

New Elements and Beginners

Some of the new tags used as shown below might make the body code of a basic HTML5 document easier to read.

This structure can be used instead of using class customized divisions .

<body>
<header></header> NEW
<nav></nav> NEW
<main></main> Not NEW, but rarley used.
<footer></footer> NEW
</body>

*Use of the new tags article, section, header, footer, hgroup, nav and aside is a matter of the taste or the need of the author.

Free Tools and Resources

Need more advanced information? Visit our Web Developer Resources page for a collection of other great tutorials and reference guides on the subjects of HTML5, CSS3, Responsive Design and SEO.

Free Bullet Images, WingDings and WebDings
🔵 🔶 😀 🎈 🐝 🏀 👉 👲 💡 🍅

Have you tried our NEWEST template kit with scrolling columns? Download Template Kit #601 - 4 Page Kit or Test Drive It!