HTML5 footer tag

You are probably used to seeing footers on websites all the time – they usually contain copyright-stuff, a few selected navigational links, and maybe contact information. Just like the <header> element, the <footer> element does not introduce a new section in your document, but is the last part of that specific section – whether it be an <article>, <section> or some other section.

This means, that you can have multiple footers on the same page – if you have several blog entries in one page, every blog entry can have its own footer and the page itself can have its own footer too.

Using the flour-article as an example, you could use the <footer> element like this:

Try this example

</header>

<div id="content">

        <h2>The Two Types of Wheat</h2>

        …

</div>

<footer>

        <p class="disclaimer">This article is copyright of AllRecipes.com</p>

        <p><a href="http://allrecipes.com/howto/all-about-flour/">See the original article here</a></p>

        <p>Part of <a href="http://www.html5-tutorials.org">HTML5-tutorials.org</a></p>

</footer>

</article>

If you footer contains nothing but links, the <footer> tag should be used this way:

<footer>

        <ul>

                <li>About us</li>

                <li>Contact</li>

                …

        </ul>

</footer>

And what should the footer contain? Content that is related to the section’s content but not part of the actual content.

Regarding blog entries, the <footer> might be where you have your related entries, comments, facebook like-buttons and publication date (if you do not have this in the <header> section).