The 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:

</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