This article is currently in the process of being translated into Slovenian (~1% done).

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:

<div id="content">
	<h2>The Two Types of Wheat</h2>
	<p class="disclaimer">This article is copyright of</p>
	<p><a href="">See the original article here</a></p>
	<p>Part of <a href=""></a></p>

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

		<li>About us</li>

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).

Kaj ste se naučili

  • 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!