How To Develop Using HTML5: Demo Part 1

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.

Screenshot of the demo

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="description" content="Demo for a typical blog post coded using new html5 semantic elements" />

<title>HTML5 Structural Semantics</title>

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

<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>

<body>

</body>
</html>

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.

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.

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

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

The demo as viewed in Internet Explorer 9 On Windows Vista

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.

1
2
3
<div id="wrapper">
  everything else here
</div>

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

1
2
3
4
5
6
7
<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>

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

1
2
3
4
5
<div id="content">
  <article class="post">
    post, meta, comments here
  </article>
</div>

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.

The header of the demo

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<header id="masthead" role="banner">
    <div class="bar"></div>
      <a href=""><img id="logo" src="" alt="" /></a>
      <hgroup>
    <h1>html5 Web Design</h1>
    <h2>Building your website for the future</h2>
      </hgroup>
    
      <nav role="navigation">
    <ul id="main-nav">
      <li><a href="" title="">Home</a></li>
      <li><a href="" title="">About</a></li>
      <li><a href="" title="">Blog</a></li>
      <li><a href="" title="">Contact</a></li>
    </ul>
      </nav>
  </header>

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.

The demo Sidebar

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<aside class="primary">
  <section class="rss">
    <a href=""><img src="images/rss-24x24.png" alt="" /> Subscribe</a>
  </section>
  <nav>
    <h3>Categories</h3>
    <ul>
      <li><a href="">CSS</a></li>
      <li><a href="">Web Design</a></li>
      <li><a href="">WordPress</a></li>
      <li><a href="">Blogging</a></li>
      <li><a href="">SEO</a></li>
    </ul>
  </nav>
</aside>

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.

1
2
3
<header>
  <h3>Categories</h3>
</header>

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.

The demo as viewed in Internet Explorer 8 On Windows XP

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.

Download a free sample from my book, Design Fundamentals.

11 comments

  1. I find it interesting that you use div tags for ‘content’ and ‘footer’. I understand using a div for ‘wrapper’, but it would seem like you could use a section tag for the other two. I also find it a bit odd that you wrap each part of the post in a section tag. I personally just let the post be a whole block instead of separating it with tags. It would make the most sense, to me, to start a section right before “Basic Structure”(where you currently have it), and then end it before “Thoughts About HTML5″. It seems like there are a lot of section tags where they aren’t necessary.

    • Thanks for your comment Andrew. Above all else know that I’m still learning and experimenting myself so please understand I’m not saying anything I’ve done is the right way or the best way.

      I explain in more details my decisions for the content and footer areas in part 2, but a couple of quick things.

      I do use the footer tag for the footer. The div id=”footer” isn’t the footer of the page. It wraps 3 asides that are unrelated to each other so a div made the most sense to me. I probably should have given the id a name other than footer. Maybe subfooter would have been more appropriate.

      With the content areas I decided there could be things I include in the div that aren’t related to the actual content. Something like breadcrumb navigation. As I have the demo set up now I probably didn’t need to include that div, but my reasoning was for what might be included as opposed to what’s currently there. Again a different name for the id like “page” might have been a better choice.

      I think the multiple sections inside the post are exactly how they’re meant to be used. It could have been set up as you suggest, but I from my understanding each new page heading probably calls for a new section.

      From looking at other examples I see lots of different practices in using these elements. It seems to me there’s no single right way to use them and I expect over time people will come up with some best practices that we’ll generally follow.

      • I think you made the right call Steven with using the divs. I don’t see any content here that would be appropriate inside a section tag. I think Andrew is making a common mistake where they think section tags can replace div tags, which is not the case.

        In regards to not wrapping that single h3 in a header tag, I know for a lot of people using HTML5 (myself included) that forgo the header tag if it would only include a single hx.

        • Thanks David. When to use section vs div vs article was something that took me the longest to wrap my head around. I mention it more in the second part of this post.

          My first instinct was to think you should replace divs with sections, but I quickly found that’s not the case. Seems like you choose based on whether or not what’s inside is related.

          Appreciate the info about the header tag. That makes sense. If you’re using only one hx tag then header is probably optional and typically not used. It’s more when you have a second hx tag or maybe some intro text to include that you’d add the header. Does that sound right?

    • Thanks for the link Paul. I’m surprised I didn’t come across it before. I spent quite a lot of time on the html5doctor site the last few weeks. I guess leaving out header is ok.

  2. I read that the ‘html5shiv’ (
    `
    `)should go before your calls to your style sheets or IE will not render the HTML5 elements. I had an issues with IE8 and I moved the shiv and everything worked fine. Has anyone else heard that about the html5shiv?

    • No worries about the shiv code not showing up.

      What you’re saying makes sense. It seems logical to include the shiv before the stylesheet. I followed the html5boilerplate which places it (actually modernizer) after the stylesheet. It didn’t seem to cause a problem for me, though again it does make sense to place it before the css.

      I’ll keep an eye out for issues in the future.

  3. Helo,

    Nice Article you have there, lot people just ignore this part of HTML5, they go to more ‘interesting’ feature. But the use of new semantic is most ignore it. Simply because you can do much same with the existing HTML4 (tell me if i’m wrong).

    I hope, i can do the same in my website :
    http://www.html5bydemo.com

    • You could do essentially the same with html4, though I think the semantics of html5 (or most of them) make more sense than using divs for everything. They take a little time to work into your routine, but I find myself reaching for them more and more as I use them in practice.

      Nice site by the way. Looks like it’ll be a useful resource. Already bookmarked for future use.

Leave a Reply

Your email address will not be published.

css.php