header and footer

what are they?

The header and footer are structural html elements. For the last couple of years the focus of html has been semantics, but html is more than semantics alone. The header and footer elements don't really tell you what kind of data is in them, they tell you how that data relates to the main content of a certain content type.

The header and footer elements are structural elements and will help you to build a more structurally meaningful document, giving cues to how parts of contents relate to other parts. These two elements come to the aid of the div and span elements, relieving some of their functions. A good thing, as they aren't really the most popular tags to begin with.

what do they do?

Both header and footer elements don't do anything. They weren't conceived so they could do anything. Some people still seem to assume that html elements should do something in a browser. This doesn't have to be anything big. Take for example the p element, which typically comes with a standard margin defined. To some people, that seems to be the only function of the p element.

Standard browser styling is not a bad thing, but it has little to do with the html element itself. Just look at all the talk about reset css files, nullifying these exact browser css rules. The core of html is still semantics and structure, which, from the point of view of a visual browser, is something that doesn't really surface in the visualization of elements.

what's their semantic value?

Close to none. Surprised? Well, like I said before, there's more to html than pure semantics. Similarly to div and span elements, the header and footer elements don't really give you an indication of what can be found within.

Still, their function is a welcome one. Those of you remembering the whole "divitis" deal will probably see where the value of these two new elements lies. Curing "divitis" is not done by removing a whole bunch of divs, or by renaming them to p and ul/li structures. It is done by increasing the diversity of structural elements. Elements that give extra information about the structuring itself.

That's what the header and footer elements are for. The header element holds information that's important to know before the bulk of the content. Typically there's a heading telling you in short what to expect, but other data like publisher, publish data, rating, ... can be included too. The footer element has a similar function, but holds data that comes as an afterthought to the bulk content. A 'read more' link, link to comments, 'send to a friend' link. All these things are only useful after you've been through the bulk of the content.

And rather than using divs to group this content, we now have header and footer elements, reducing the amount of divs used and adding extra meaning to the structure of the document. Who benefits from this? Programs interpreting our html code, ranging from screen readers to search engines or even customized code.

so it's all good?

Some time ago most outstanding issues with the footer elements were solved. As of now, almost all restrictions are lifted, allowing you to throw in whatever element you seem fit. At first the footer element couldn't hold several other html tags, making it in some cases absolutely useless. Luckily we have some people looking out for us, so that's one thing less to worry about.

There is of course still the problem of when to include these extra elements. If there's only a single heading present, should it still be wrapped in a header element? A question that already exists today and which I usually answer based on the probability of extra elements being included at a later date. But as a default answer, I would say that header and footer elements should be included wherever they seem appropriate, even if there's only one nested element inside, especially now they provide extra meaning to the document structure.

Of course there's still IE, which doesn't recognize these elements without the use of some clever javascript, making it impossible to apply any css to these elements. A real pain, but as long as you include a little javascript file (and maybe even provide some simplified styling for people lacking jsavascript) you're fine.

Only remaining issue is related to cssing nested elements. Older versions of IE still don't support the '>' (child) selector, which might make it difficult to style nested content. You could of course overrule a whole lot of css for the deepest nesting, but this is hardly beneficial to the flexibility of your css. So for these cases, extra classes for differentiation still work best. In the end this doesn't reduce the amount of classes you use, but it still provides extra meaning to the structure of your document.

conclusion

Will these elements change the web forever? Probably not, but they do underline the structural function of html, which is definitely a good thing. Also something many people seem to have forgotten after joining the divitis mob.

The header and footer tag reinforce the structural value of html. That's what they are all about.