To really understand the new html5 semantic elements you need to use them in practice. To do that I’ve created a demo of a typical blog post page. I want to share that demo and do my best to explain why I chose to structure the page as I have.

Before getting to the explanation please know that I’m still sorting some of this out for myself. I’m not saying the way I set up the demo page is the right way or even the best way. It’s simply the way that seemed most appropriate to me as I developed the page.

Even as I coded the demo I could think of other possible ways to structure it and at times felt a sense of confusion over which element made the most sense to use.

Here’s the demo page, which you may want to refer to as you’re reading through this post. All the images in the post are also links to the demo.

Note: Because there’s a lot to cover I’ve split this post in two and will publish the second part on Thursday.

The Layout

To keep things simple I opted to create a 2 column fixed-width and centered layout that will likely look familiar. If you look at the demo or the image above you’ll note it includes the usual basics for a blog post.

• header
• content area
• sidebar
• footer

Note: The image above is a cropped version of the demo page. I cut out most of the middle in order to make the image small enough to fit here.

HTML5 Boilerplate

There’s not a lot to see here with the basic shell. Naturally I’m using the new html5 doctype. I’ve also defined the language as English and also defined the character set.

I’ve also included the html5shiv script for IE8 and below with a conditional comment.

{code type=html}

< link rel="stylesheet" href="style.css" >

{/code}

I purposely kept the shell simple since I was mainly concerned with the new structural elements. There’s more you might want to and probably should include and I’ll refer you to the html5 boilerplate site for more and better information.

Additional Resources

Below are a few sources for html5 boilerplate code.

• HTML5 Mini Template
• html5 boilerplate
• The Official Guide to HTML5 Boilerplate
• A Basic HTML5 Template

The Presentation

Most of the css was added in a quick and dirty manner. It’s there to make the demo presentable and also to test how the page looks in older versions of Internet Explorer. It’s hardly the best code or all that interesting where this demo is concerned.

The one bit that’s most relevant for our current purpose is at the top of the page.

{code type=css}
section, article, header, footer, nav, aside, hgroup {
display: block;
}
{/code}

If you remember we needed this code since our new elements have no default styles in some browsers.

Above: The demo as viewed in Internet Explorer 9 on Windows Vista

The High Level HTML5 Structure

Let’s get to the good stuff. I wrapped everything inside the body with a wrapper div, which I used to set the width of the page and center it.

I chose to stick with a div here instead of using a section because the container is only meant for presentation. A section tag would indicate the content inside is related. Since different kinds of content will be inside, a div seems most appropriate.

{code type=html}

{/code}

Inside the wrapper the high level page structure is as follows:

{code type=html}

{/code}

The structure contains 3 of the new elements, probably where you’d expect them to be. The header element contains the logo, tagline, and navigation. The aside contains the rss and category information, and the footer contains the designed by credit and copyright.

The information just above the copyright may seem to make sense as a footer or at least a section, but if you look at the content, it isn’t really related. There are 3 distinct sections of content, hence the use of a div to enclose it all.

The post itself, the meta information, and the comments are all inside a content div. I’ll show the details next time, but directly inside this div is an article tag which also wraps everything

{code type=html}

{/code}

I could have left out the content div and moved it’s styles to the article, but I included both to allow for the possibility of other content like a trail of breadcrumb links. Those links might fall inside the div, but wouldn’t be part of the article.

You may have noticed that both the header and footer contain the role attribute. Roles exist for assisted technologies. While I’ve included roles in the demo I’ll hold off talking about them in this post and save the talk for another post where I can give it the attention it deserves.

Let’s continue by looking inside the 5 structural containers inside our wrapper div.

Header

The header element is fairly easy to understand and use. What you’ve been marking up till now as div id=”header” (or similar) you’ll now markup with the header element instead.

One adjustment with headers is that you can and likely will use more than one header in a document. (We’ll see this when we explore the other containers). Because we can have multiple headers it makes sense to give this one an id or class.

{code type=html}

html5 Web Design

Building your website for the future

{/code}

Immediately inside is a div, which I used to create the thin black bar across the top. Since its only function is presentational a div seemed most appropriate. Next I’ve added a logo, which should look exactly as you’d expect.

I included both the site title and tagline as headings inside an hgroup. Currently I wouldn’t use headings for either, but I wanted to give hgroup a spin. In the future I think this will be the common practice.

Our main navigation is inside the header and as you would expect it’s marked up using the new nav element. Again I’ve added a role. Otherwise it should look as you would expect main navigation to be coded.

Aside

Let’s move to the right and the aside before getting to the content as the aside is a bit simpler.

Remember an aside is meant for tangential content. While the content here is certainly useful it could easily be removed without affecting the main content on the page.

The class name is arbitrary. There are other asides in the document and I decided this was the primary aside, hence the choice.

{code type=html}

{/code}

Finally a section tag. Here we simply have some text and an image wrapped in a link that points to the feed. Clearly related stuff.

On a real page you might also include a subscriber count and an option to subscribe via email. Both would be related to the link we have here so again a section is the most appropriate.

Below the rss section is another nav element. Nav isn’t meant for every occurrence of a group of links, but because this is sub-navigation for the blog that would likely be included on multiple pages, it made sense to code it with the nav element.

You’ll notice the h3 inside the nav. Admittedly I wasn’t consistent in my use of hx tags in this demo. In some places I use h1s relying on an outline algorithm I know doesn’t work in most browsers and in other places I kept track of the hierarchy myself.

I also didn’t include a header inside. I could have wrapped the h3 like so.

{code type=html}

Categories

{/code}

This was a gut call. As html5 becomes the de facto way to develop pages and sites I suspect most every hx tag will fall inside a header element. However it was hard to see any advantage to adding it here.

This is one of those places where I can’t say whether or not what I’ve done is the best practice. I think the html5 spec wants me to use header tags here, but again I didn’t see an advantage.

Let’s stop here and continue next time with the main content div.

Above: The demo as viewed in Internet Explorer 8 on Windows XP

Summary

Like I said at the top you really need to use the new elements in practice to understand them. Their definitions are relatively easy to grasp, but once coding you’ll be faced with some less than clear choices.

Over time I suspect we’ll have plenty of best practices to guide us. At the moment we’re mostly on our own to figure out when to use div, section, and article or whether or not we should include a header inside a section.

I’ll pick up where we left off next time, though of course the demo will still be there if you want to poke through my code and see how I set the page up. Again I’ll remind you my code isn’t necessarily right or the best. It’s simply what made the most sense to me as I developed the demo page.

Like many I’m still working much of this out for myself. Hopefully sharing my thoughts will help make it easier for you to work it out.

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.