footer Tag - HTML5

The footer tag has been introduced in HTML5 for producing better page structure: The Code: <footer></footer> Represents a footer for a section and can contain information about the author, copyright information, etc.

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 can present appendices, indexes, verbose license agreements, and other such content.

Contact information for the author or editor of a section belongs in an address element, possibly itself inside a footer.

When the nearest ancestor sectioning content or sectioning root element is the body element, then it applies to the whole page.

The footer element is not sectioning content; it isn't used to introduce a new section.

Rule: Do not nest 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>

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

<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>Copyright ? 2009 Gordon Freeman<br/>
Contact at: br@549.if</p>
</footer>
</body>

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. </p>
 <footer><a href="../">Back to index...</a></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.

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 Tools and Resources

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