HTML5 header footer

The HTML5 specification has defined a set of sectional and structural elements that improves semantic markup within HTML coding for web developers. These new sectional and structural elements are a panacea for moving away from the common use of divisions or the element that has taken over a large part of web page structures in recent years.

The sectional and structural elements include the header , footer , and navigation elements which will be addressed in this segment. The article , aside , section , and headings group elements were explained in the previous post on HTML5: Using sectional elements.

The only rule for limiting the use of the and elements is that they cannot be nested within another or element. Other than that limitation, the use of these two elements is fairly open; examples of their utilization will be displayed for both.

Header

This element represents a group of introductory or navigational aids for web pages. A element is intended to contain the section's heading such as an element or an element, but this is not required. The header element can also be used to wrap a section's table of contents, a search form, sub headings, bylines, version history information, or any relevant logos.

The header element is not to be used for sectioning content as it is more of a structural element, and it does not introduce a new section. The element can be used many times on a single web page; for example, it can be nested within each element. Here are several examples of using the element in HTML code.

Example 1: The following snippet shows how the element is used to markup a page header.

Getting started with flowers

Example 2: In this example, the clip shows the element nested within an element.

The guide to a perfect rose garden

At this time, most browsers do not execute any display information via CSS for HTML5 elements, as is the case for the element, and to be displayed as a block it will need to be specified in the style sheet as shown in the example below along with others:

address, article, aside, canvas,

figcaption, figure, footer, header,

hgroup, nav, section, summary {

display: block;

Footer

This element should be self explanatory at this point; however, the HTML5 element specification does state that it represents a footer for its nearest ancestor sectioning content or sectioning root element. The footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and social networking and sharing links, such as in a blog post. For this reason it is possible to have more than one element on a single web page document. The element does not introduce a new section, similar to the element, but serves to add semantic meaning to the bottom of a or .

Several examples for use of the element are provided below:

This example shows the element containing a published timestamp nested within an element:

Example of a footer nested in an article

This is the article content...

Navigation

This element, as the HTML5 specification requires, corresponds to a section of a web page that links to other web pages or to other parts within the web page; for example, a section with navigation links — which seems self explanatory. What this means is that the element replaces the idea of having a