Demo to explore html5 Structural Elements

by

This is a demo to show how a web page representing a single blog post might be structured using html5. This isn't necessarily the right way or the best way to code this page, but it's the way that made the most sense to me as I coded the page.

I'll trust that you know how to view the source code should you be interested in seeing the code. For a full explanation of why I chose to structure the html as I have please see this post.

Basic Structure

The high level structure of the page is seen below. Note that not all the elements are new ones and divs are still used throughout this page.

<div id="wrapper">
  <header id="masthead" role="banner"></header>
  <div id="content"></div>
  <aside class="primary"></aside>
  <div id="footer"></div>
  <footer class="contentinfo" role="contentinfo"></footer>
</div>

Again, for more details on the code please view the source or see my explanation for the development choices by reading this post.

CSS Presentation

In general the css used in this demo was created in a quick and dirty fashion. It's there simply to make the demo more presentable and to be able to compare how the page looks in different browsers.

The only bit of css truly relevant for the html5 elements is the following

section, article, header, footer, nav, aside, hgroup {
  display: block;
}

The above sets the new elements to display as block level since they won't have default styles in most browsers.

Boilerplate

To get started developing with html5 I'd recommend visiting one or all of the links below for some starter code and a greater understanding of that code.

Mostly I'd recommend developing a typical page from your workflow using html5. The only way to truly understand how to use the new tags is to use them and make some decisions about best practices.

Thoughts About HTML5

For the most part I found working with html5 fairly easy. With some elements it's obvious when to use them. Two things, however caused some confusions

First was how often to use the header tag. Should each new sectioning element get a header or was it ok to use hx tags without wrapping them in a header. I generally opted for the latter, but suspect the preferred approach is to wrap hx headings with header tags.

Second was when to use div, section, and article. In some places the choice seems obvious. In others you could make a good case for using any of the three. My first line for that decision was the following 3 questions which I picked up from Oli Studholme

  • Would the enclosed content make sense on it's own in a feed reader? If so use <article>
  • Is the enclosed content related? If so use <section>
  • Finally if there's no semantic relationship use <div>

This simple demo has convinced me we can start using html5 today for most sites. If the audience for a site uses either IE6 or IE7 with Javascript disabled you may not want to use html5, but for all other sites you can safely use it. The best way to get started is to dive in and start coding.

3 Comments

Bugs Bunny

What's up Doc?

Comments are currently closed.