hello, i'm anthony calzadilla

Anthony Calzadilla

Family man. Long-time web developer. Always sweating the details. Crazy about animation. Perpetually making (or breaking) things. Avid enthusiast of the absurd.

Sorry head-hunters, my job keeps me busy. But if you want to geek out about web stuff or just say hi. Hit me up on the social thingy's listed above.

⇤ BACK

HTML5 section, aside, header, nav, footer elements: Not as obvious as they sound

by Anthony Calzadilla

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 section, aside, header, nav and 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 h1 to 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 section, aside, header, nav and 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 div element, but its not. The div has no semantic meaning. Before replacing all your div’s with 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 aside element. Ask yourself if the content within the aside can 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 header element and the general accepted usage of header (or masthead). There’s usually only one header or ‘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 header in any section on your site. In fact, you probably should use a header within most of your sections. The spec describes the section element 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 nav element. Site-wide navigation, on the other hand belongs in a nav element.
  • footer – Sounds like its a description of the position, but its not. Footer elements contain information about it’s containing element: who wrote it, copyright, links to related content, etc. Whereas we usually have one footer for an entire document, HTML5 allows us to also have footer within sections.

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:

⋰
⇤ BACK