Header, footer and navigation tags




What is it?

With HTML 5 a number of new tags were introduced, giving modern browsers new options e.g. more design options and independence of some plug-ins. For an ordinary site, three elements are almost always there: A header, a footer and a navigation pane. These have been given their own tags: <HEADER>, <FOOTER> og <NAV>.

Traditionally a DIV and the attribute ID, e.g. <DIV ID="Header"> has been used for marking these three areas, so it was easy to find your way around the code, but now specific tags are available, offering some advantages, and a few challenges with old browsers in the transitions phase.





What can they do?

In essence, the three tags can't do anything, that can't be done with a SPAN. In effect and formatting with attributes the three tags works exactly like SPAN, with the one important exception, that only new browsers can use them without a workaround. Other browsers will just ignore the code. How to make older browsers handle HTML 5 tags can be seen on "New HTML 5 tags in old browsers", but in many cases, there is an easier way of handling the problem.

If you are just looking to style your tag for all browsers, it is, from a coding point of view, both easier and faster to use the combination <HEADER><SPAN> </SPAN></HEADER> and style the SPAN tag.





Why is it a good idea to use the three tags?

Search engines indexing your site reacts to repeated text. If the same thing is written on all pages, or the same links are found on all pages, it is often an indication that the site may be a spam site. Here you can get in trouble, because that is the nature of these three parts, in order to have a consistent design... and the indexing spiders, and the search engines they belong to, aren't always that good at telling the difference between spam and header/footer/navigation. The artificial intelligence is, so to say, more artificial than intelligent.

By marking the three areas with the appropriate tags you tell the spiders indexing your site, that these text areas are supposed to be the same on all pages, and that they are a functionality, not spam.