Using some new structural elements
My blog – like millions of others – has a header denoted by <div id=”header”>, a footer <div id=”footer”>, some articles (wrapped by an area called “content”, <div id=”content”>) and some navigation (wrapped up in an area called “sidebar” <div id=”sidebar”>). Most sites on the Web have similar constructs, although depending on your choice they might be called “branding” or “info” or “menu”, or you might use the equivalent words in your own language.
Although these all have very different functions within the page, they use the same generic div in the markup. as HTML 4 has no other way to code them. HTML 5 has new elements for distinguishing these logical areas: header, nav, footer and friends. (There’s more on this in an artice by Lachlan Hunt on A List Apart: A Preview of HTML 5.)
The overall aim is to replace this structure:
with this:
It’s a simple matter to change the HTML divs into the new elements. The only difficulty I had was deciding which element to use to mark up my sidebar, as it also includes a search field and “colophon” information as well as site-wide navigation. I decided against the aside element, as the spec says it “represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content”, but it’s nevertheless content rather than navigation. So I decided to go for the nav element as the closest fit.
I’ve wrapped the main content in a section element (previously I’d kept it as a div). section is defined in the spec
The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading, possibly with a footer.
Please note: I no longer recommend wrapping the whole content area in a section element, and suggest that you use a div element. Read more about using section appropriately.
In this case, the “generic document section” is that of main content. I’ve retained an id so that a skip links feature will work, although I hope that in the future, assistive technology will offer an automatic way for people to go to the first section or article.
My fellow HTML 5 doctor, Remy Sharp, also notes that if you retain the div, Internet Explorer without JavaScript would style the div, but none of the other content, making the site very hard to read.
