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:
</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).
What you have learned:
- The footer is always the last part of a given section, not necessarily the document
- The <footer> element is nested inside its’ parent element
- Therefore you can have several footers in the same document
- The footer usually contains information about its section as author, publish date, copyright etc.
- The <footer> element is a block-level element