How To Use HTML5 Header and Footer Elements in a Website Design? Innovation Need

[Monirul Islam]

A professional web designer understands the significant role HTML5 plays in web designing. New elements are continuously added to HTML5 suite to help the designers making web pages with better semantic structure. As per specifications of HTML5, header element is helpful in adjusting introductory and navigational menu, whereas, a footer element is meant to facilitate the sectioning content, which may include information about author, copyrights, etc. However, both header and footer can't support new section creation, but implied sections can be created by the headings that come under both. The lines below will reveal more about this interesting feature of HTML5 to help website designers.

What Should The Total Count Of Header And Footer Per Page?
The realistic answer to this question is as much as needed from a page. A newbie designer may think these elements be used just for the single head and foot of a web page, but in actual these can be used to create header and footer in all the sections present on a single web page. The sections of a web page may include

Article (1)

Aside sections (2)

Undefined section (1)

A designer can use header and footer with all the above-mentioned sections of a web page. Other than these sections, the page may also have a header and footer, making 5 as the total possible count of both elements in a page. Header and footer can also be used in the sectioning elements like page body, article, aside, section, or Nav.

HTML5 Header And Footer

What's Included In Header And Footer?
The elements included in the header and footer are not specific, but still some common things that both contain are given below.

Header elements usually include one heading, logo (or icon), and by-line. However, the header can be defined with any type of content that is necessary for the particular header of a web page or of a section.

Footer elements usually include information regarding copyrights, contact details, site map, by-line, back to top links, and other related documents of a web page. Again, it doesn't mean these elements require the relevant information; the content can be of any type that is necessary for the section footer or page footer.

Header And Footer Styles
Both header and footer can't be used to change the web page style. Both are not specified to be at top or bottom of the page, but embody certain page areas or section areas. A web designer has to add styles that they want to be there in header and footer. The most common and useful style is

header, footer { display: block; }

The preference given to this style is due to the reason that it works well with non-HTML supporting browsers. However, for IE8 and other lower browsers, HTML5Shiv can be used to make header and footer elements recognizable and it can be done by adding the following to the head of HTML5 documents:

<!–[if lt IE 9]>

<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]–>

Only browsers lower than IE9 are capable of running this script. It also adds latest HTML5 features to DOM that facilitates using CSS in the website design.

It's clear now that HTML5 header and footer elements are not just meant to be at top or bottom of a web page, they have more functions to perform, provided a web designer knows how, when, and for what to use them.

Source: IT Article