The HTML5 HEADER and FOOTER elements are new elements added to help web designers better define the semantic structure of their web pages. According to the HTML5 specification, the HEADER element represents a group of introductory or navigational aids. And the FOOTER element represents a footer for the nearest ancestor sectioning content or sectioning root. It typically contains information about the section, including the author, related documents, copyright data, and so on.
The HEADER and FOOTER elements are not sectioning elements. They do not change the outline of the document and they don’t create new sections. But any headings inside of them create implied sections.
How Many Headers and Footers Can One Page Have?
The correct answer to this question is “As many as it needs.”
One common mistake that web designers make when using the HEADER and FOOTER elements is assuming that these are design elements defining the head and foot of a page. But that isn’t precisely true. In fact, a web page can have a header and footer in every section on the page.
For example, a web page may have 1 ARTICLE, 2 ASIDE sections, and an undefined SECTION. Each of these sectioning elements can have a HEADER and a FOOTER. And the page itself can have both as well. So the entire page could have as many as 5 HEADER and 5 FOOTER elements.
You can include a HEADER and a FOOTER element in any of the sectioning elements, including
- the
BODYof your page ARTICLEASIDESECTIONNAV
What Goes Inside a HEADER or FOOTER Element
There are no required elements in the HEADER and FOOTER but there are some things that are typically found in them.
The HEADER typically contains:
- at least one heading element (
H1–H6andHGROUP) - logo or icon
- by-line or authorship information
But none of this information is required. You can define a HEADER with whatever content you feel is necessary and semantically part of the header of that section or the page.
The FOOTER typically contains:
- copyright information
- sitemap
- contact information
- back to top links
- by-line or authorship information
- related documents
And, like the HEADER, none of this information is required. You can define a FOOTER with whatever content you feel is necessary and semantically part of the footer of that section or the page.
Styles and the HEADER and FOOTER Elements
The HEADER and FOOTER elements make no changes to the style of the web page. A HEADER will not automatically display at the top of the page and a FOOTER will not automatically display at the bottom of the page. These elements are semantic to represent certain areas of the page or section.
This means that you need to provide styles for your HEADER and FOOTER elements if you want them to have a different look to them. The style you should always apply is:
header, footer { display: block; }
This helps browsers that don’t support these HTML elements to display them the same as other, more compliant browsers do. It’s also a good idea to use the HTML5Shiv to help Internet Explorer 8 and lower recognize these elements. You do that by adding:
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
to the HEAD of your HTML5 documents. This script runs only if the browser is lower than IE9 (the conditional comments see to that) and adds the various new HTML5 elements to the DOM so that you can apply CSS to them.
