Learning to Love HTML5 Part 4
Posted Today, 01:18 AM
Headers and Footers (Plural!)
Two other elements introduced in HTML5 are the header and footer elements. On the surface, these seem pretty straightforward. For years we’ve marking up our website headers and footers with div id=”header”, div id=”footer” or similar. This is great for DOM manipulation and styling, because we can target these elements directly. But they mean nothing semantically.
Quote
“The div element has no defined semantics, and the id attribute has no defined semantics. (User agents are not allowed to infer any meaning from the value of the id attribute.)”
— Mark Pilgrim, Dive Into HTML5
HTML5′s introduction of header and footer elements is the perfect way to remedy this problem of semantics, especially for such often-used elements. But these elements are not as straightforward as they seem. Technically speaking, if every website in the world added one header and one footer to each of their pages, this would be perfectly valid HTML5. But these new elements are not just limited to use as a “website header” and “website footer”.
A header is designed to mark up introductory or navigational aids, and a footer is designed to contain information about the containing element. For example, if you used the footer element as the footer for a full web page, then in that case copyright, policy links, and related content might be appropriate for it to hold. A header on the same page might contain a logo and navigation bar.
But the same page might also include multiple section elements. Each of those sections is permitted to contain its own header and/or footer element. Keith sums up the purpose of these elements well:
Quote
“A header will usually appear at the top of a document or section, but it doesn’t have to. It is defined by its content… rather than its position.”
“Like the header element, footer sounds like it’s a description of position, but as with header, this isn’t the case.”
— Jeremy Keith, HTML5 for Web Designers
And the spec adds to Keith’s clarification by noting:
Quote
“The header element is not sectioning content; it doesn’t introduce a new section.”
— The header element in the HTML5 specification
These explanations help dispel any false assumptions we might have about these new elements, so we can understand how these elements can be used. Really, this method of dividing pages into portable and syndicatible content is just adding semantics to what content creators and developers have been doing for years.
Article source: http://html5community.com/topic/4442-learning-to-love-html5-part-4/
