This is a summary of Chapter 5 of Jeremy Kieth’s excellent book “HTML5 for Web Designers” by publisher A Book Apart. Bear in mind that this article is 1/4 my opinion and observations. The other 3/4 is para-phrasing directly out of the book.
Before we get to the
footer elements it important we understand one of the foundational changes in html5. Each piece of sectioning content has its own self-contained outline. That means you don’t have to keep track of your heading level anymore-you can start from
h1 each time. Because each piece generates its own outline, you can now get far more heading levels than simply
h6. More importantly, you can start to think about your content in a truly modular way.
The fact that each piece of sectioning content has its own outline makes it perfect for Ajax. Porting a piece of content from one document to another introduces problems. CSS rules applied to the parent document will also apply to inserted content. HTML5 offers a solution with the ‘
scoped’ attribute, which can be applied to a style element. Any styles declared within that style element will only be applied to the containing sectioning content.
Some of the new structural elements can be misleading. Especially the
footer elements. Correct usage of the seemingly obvious elements can be confusing. Here’s a check list of common pitfalls to avoid:
section– Used for grouping together thematically-related content. Sounds like a
divelement, but its not. The
divhas no semantic meaning. Before replacing all your
div’swith section elements, always ask yourself, “Is all of the content related?”
aside– Used for tangentially related content. Just because some content appears to the left or right of the main content isn’t enough reason to use the
asideelement. Ask yourself if the content within the
asidecan be removed without reducing the meaning of the main content. Pullquotes are an example of tangentially related content.
header– There is a crucial difference between the
headerelement and the general accepted usage of
header(or masthead). There’s usually only one
headeror ‘masthead’ in a page. In HTML5 you can have as many as you want. The spec defines it as “a group of introductory or navigational aids”. You can use a
sectionon your site. In fact, you probably should use a
headerwithin most of your
sections. The spec describes the
sectionelement as “a thematic grouping of content, typically with a heading.”
nav– Intended for major navigation information. A group of links grouped together isn’t enough reason to use the
navelement. Site-wide navigation, on the other hand belongs in a
footer– Sounds like its a description of the position, but its not.
Footerelements contain information about it’s containing element: who wrote it, copyright, links to related content, etc. Whereas we usually have one
footerfor an entire document, HTML5 allows us to also have
So you see? It’s not exactly as straight forward as it might seem. For a more indepth information about HTML5 please get “HTML5 for Web Designers” or check out the following free online resources: