Home > Articles > Web Development > HTML/CSS

This chapter is from the book

This chapter is from the book

Beginner Recipe: Using the footer Element

The footer element, as its name suggests, is typically at the bottom of the page. However, that is not always the case, although the footer will often be at the bottom of a section or a page. The footer element is intended for content about its section, including information about the author or site owner, copyright data, and site terms and conditions. If it is inside an article or section, it could contain the date the article was published, tags, categories, and other metadata.

The HTML5 specification suggests a solution to a very common web element: the copyright notice on a page:

<footer >
<small>&copy; Copyright HTML5 Cookbook 2011</small>
</footer>

The previous example would likely be just before the closing </body> tag. (Also notice how the copyright message is in a small tag. We will come to that in the next chapter.)

Like the header element, you can use footer more than once on a page. You can put a footer inside an article. Listing 1.11 details a page with a sitewide footer and also uses nested footer elements with an article, as shown in Figure 1.10.

Figure 1.10

Figure 1.10 Page layout with multiple footer elements (no styling applied)

Listing 1.11. Page with a Sitewide footer and an article > footer Combination

<article>

  <h1>10 things about HTML5</h1>

  <footer>
    <p>This news article was published on <time>1st April 2011</time> by <a href="#">Tom Leadbetter</a></p>
  </footer>
  <p><strong>Pellentesque habitant morbi tristique</strong>...</p>
  <!-- general content -->
  <footer>
    <p>This news article was published on <time>1st April 2011</time> by <a href="#">Tom Leadbetter</a></p>
<a href="#">Read Tom's next article</a>
  </footer>
</article>
<footer>
  <small>&copy; Copyright HTML5 Cookbook 2011</small>
</footer>

This example shows two footer elements within an article. It is common to see the author or date displayed at the top and bottom of a news item or blog post, and you can use footer as many times as you want.

In the previous example, we introduced the time element, which we will be covering in the next chapter.

You can include other pieces of content in the footer, such as navigation (yes, using a nav element), partner logos, and license agreements, and you might often see text such as "This site is powered by <cms name>."

The HTML5 specification says the footer element can include links to related documents, and although previously you used a combination of aside and nav for that, you can also use the footer element for that content, if it is inside an article. It can contain other links, such as links to previous and next articles, which would look something like this:

<article>
... all the content for this article...
<footer >
<a href="#">Previous article</a> | <a href="#">Next article article</a>
</footer>
</article>
  • + Share This
  • 🔖 Save To Your Account