TOC

The community is working on translating this tutorial into Russian, but it seems that no one has started the translation process for this article yet. If you can help us, then please click "More info".

Semantic HTML5 section tags:

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
This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!