- Beginner Recipe: Building an HTML5 Starter Document
- Where Do All the New Elements Come From?
- Beginner Recipe: Using the header Element to Create a Site Header
- Beginner Recipe: Using the hgroup Element to Group Headings
- Beginner Recipe: Creating Navigation with the nav Element
- Intermediate Recipe: Using the New article Element
- Intermediate Recipe: Grouping Content with the section Element
- Beginner Recipe: Creating a Sidebar with the aside Element
- Beginner Recipe: Using the footer Element
- Intermediate Recipe: Using the HTML5 Outliner to Ensure the Correct Structure
- Advanced Recipe: Using All the New Elements to Build a News Page
- Advanced Recipe: Using All the New Elements to Build a Search Results Page
- Summary
This chapter is from the book
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>© 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.
){kind=link}
)
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>© 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>