Structural Tags in HTML5

The HTML5 specification has added quite a few interesting and useful tags for structuring your markup. For a majority of everyday uses, these tags will replace many of our typical div entries from our code. So let’s dig in.

Defining Structure

<section>

A section is a thematic grouping of content, typically preceded by header, possibly with a footer after. sections can be nested inside of each other, if needed, and can hold any amount of typical markup.

<header>

The header of a section, typically a headline or grouping of headlines, but may also contain supplemental information about the section.

<footer>

A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

<nav>

Defines the navigation area, typically a list of links. The nav should be a sibling of the main section, header, and footer.

<article>

An independent entry in a blog, magazine, compendium, and so on.

<aside>

An aside indicates content that is tangentially related to the content around it.

Putting it Together

So let’s take a look at how we would put together a typical blog page with our new structural tags.

<!DOCTYPE html>
<html>
  <head>
    <title>Standard Blog</title>
  </head>
  <body>
    <header>
      <h1><a href="#">Standard Blog</a></h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Archives</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <section>
      <article>
        <header>
          <h1><a href="#">Title</a></h1>
        </header>
        <section>
          <p>Lorem ipsum...</p>
        </section>
      </article>
      <article>
        <header>
          <h1><a href="#">Title</a></h1>
        </header>
        <section>
          <p>Lorem ipsum...</p>
        </section>
      </article>
      <article>
        <header>
          <h1><a href="#">Title</a></h1>
        </header>
        <section>
          <p>Lorem ipsum...</p>
        </section>
      </article>
    </section>
    <footer>
      <p>Copyright © 2008 All Rights</p>
    </footer>
  </body>
</html>

Update: It’s been mentioned that this example is a little verbose in markup for the simplicity of the content. I’m aware of this, but wanted to exaggerate for emphasis. For more details on more simplistic content, be sure to check out this comment by jgraham.

As you can see, the tags themselves are much more descriptive than simply providing an id attribute to a div. This also gives the added benefit of a descriptive closing tag, as </article> is much more understandable that wondering which <div id="something"> goes with a given </div>.

So, I can use this now?

Actually, yes, with a few extra steps. And it will work in all modern browsers. It can even work in IE6. There are only a few little quirks we need to get past if we’re going to start using this today.

First, because most browsers don’t understand the new HTML5 doctype, they don’t know about these new tags in HTML5. Fortunately, due to the flexibility of browsers, they deal well with unknown tags. The only issue here is unknown tags have no default style, and are treated as inline tags. These new HTML5 tags are structural, and should obviously be block level elements. So, when we style them with CSS, we need to be sure to include display:block; in our attribute/value pairs.

Include this simple extra piece of CSS, and these new tags are immediately usable. Starting today. And of course, once HTML5 is more widely supported, the superfluous display:block; can be removed, as it will be included in the browser default styles.

Supporting IE

There is one more issue if you require IE support. Turns out that the IE rendering engine will work with the new tags, but will not recognize any CSS applied to them. Well, that’s no good. Fortunately, IE just needs a good swift kick with the help of a very simple bit of JavaScript. All we need to do to kick start IE is to create a DOM node with JavaScript for each of the new tags, and suddenly IE will apply styles to the new tags with no problem. The code will look something like this, and can be placed directly in the head of our document, or the contents of the script tag placed into an external file and included.

<script>
  document.createElement('header');
  document.createElement('footer');
  document.createElement('section');
  document.createElement('aside');
  document.createElement('nav');
  document.createElement('article');
</script>

Before we leave this code, there’s one thing to mention about the script tag in HTML5. HTML5 will assume type="text/javascript" on any script element, so it need not be included. Once again, making things simple.

Wrapping Up

So we can begin, right now, to structure our documents using the new tags provided in HTML5. With a few simple tricks, they’ll work today, and be compatible in the future. So next time you start a new site, consider going with HTML5, and give your markup a little more defined structure.

Next up, we’ll take a look at some of the other new tags that HTML5 provides, and how they’re used.

Post and Author Info.

Published January 11, 2009 by:

Steve Smith The Form Steve creates and builds beautiful, usable designs and interfaces.

Commenting is currently off for this post.
So far there are 41 comments.

41 comments

Mmmmmm, I’m liking this post. Code snacks to consume and ponder. Thanks for posting!

Luke Dorny
January 11th, 2009
love this post, good enough to get me start on html 5. and i love ur comment area, immediate preview, it kicks ass!

yiyi wang
January 11th, 2009
I wonder how many designers already incorporate these new tags into their designs.

Jimmy
January 11th, 2009
Very interesting post indeed! This is going to be something really fun to play with; definitely a desired way to mark-up a page.

Martin Rinlein
January 11th, 2009
@Luke: Thanks for the linkage!

@yiyi: Thanks, and I hope you enjoy the whole series.

@Jimmy: Not many, you could be on the cutting edge!

@Martin: I expect to see some HTML5 coming out of DC very soon.

Steve Smith
January 11th, 2009
HTML5 is looking tasty! They make so much sense. Thanks for posting up this articles on HTML5. I’m definitely going to consider writing my next site using it.

When do you think HTML5 will be fully supported by all modern browsers? This year? 2 years?

I was also checking out some new tags, and I must say, they’re going to come in handy!

Michael Castilla
January 11th, 2009
@Michael: Glad you like it! Certain browsers have already begun to implement pieces of the HTML5 spec, but will do so gradually over the next several years, I’m sure. The spec itself will take quite some time to complete officially, so I’m not expecting full support any time soon.

However, I’m trying to highlight some of the areas that already do work, with little or no compatibility issues.

Steve Smith
January 11th, 2009
Great introductory post, Steve. Looking forward to the rest of the series.

Ryan Brill
January 11th, 2009
Loving this series. HTML5 has a lot of people excited, and it’s great to see the details being explained in such a way. Thank you especially for the tip on giving IE a swift kick into action; surely it’s going to benefit lots of developers as HTML5 continues to make an increased impact.

Jonathan Christopher
January 11th, 2009
Great article. I’m going to try this out on one of my next freelance projects.

One of my other projects has to support IE6 with no JavaScript, so this is pretty much out…unless you can create DOM elements via CSS expressions. Doubt it.

Mike Taylor
January 11th, 2009
As with others, I am going to enjoy this series of posts. One question, however. Doesn’t it seem redundant to have <header>
Header TItle
</header> ? Does it need to be wrapped around all h[1-6] now?

Nate Klaiber
January 11th, 2009
@Ryan: Thanks!

@Jonathan: Glad you enjoy!

@Mike: I could be wrong, but I don’t think CSS expressions work with JS disabled anyway.

@Nate: the header tag is just a structural element to contain relevant markup. It could easily contain an h1 along with a date or timestamp, so the h1 is still necessary.

Steve Smith
January 11th, 2009
Great introduction to it… Have to say up until now I’ve never really cared much about HTML5 as I figured it’d take forever before I could actually use it anyway—though I guess you could. I suppose you could really use this same approach if one wanted to use true XML for the web too, which would be an interesting experiment.

Elliot Swan
January 11th, 2009
Nice post Steve, good to know people who are running on edge. I had recently seen a site using .xhtml for the file extension and was wondering if you or anyone else was doing this, I didn’t look at the code to dive in deeper so it may of been just a rewrite rule in the .htacess – Thoughts?

Donovan Roddy
January 12th, 2009
Steve, you were right – it definitely looks worthwhile to me and something I can start implementing to a certain degree at least. I still don’t think I’ll be using it for client projects just yet but for anything personal, I wouldn’t hesitate to give it a try.

Dave McNally
January 12th, 2009
It’s very important to know how to make cutting edge markup. HTML5 is feature rich for modern web. Excellent write-up with usable examples!

Waiting for official support for HTML5 structural tags from search engines… any news from this field?

ilya
January 12th, 2009
Nice article :)

Just a couple of comments. You seem to have gone a bit overboard on the use of <header>; if all you have is a <h1> the <header> wrapper is unnecessay. <header> is best used for things like:

<header> <h1>My awesome blog</h1> <p>Blocking the intertubes since 2009</p> </header>

i.e. situations where you have a heading and stuff that is part of the heading but isn’t really itself a header (so you wouldn’t want it to appear in a table of contents for example). From reading your earlier comments I think you know this but I guess it’s worth repeating.

The other slight issue with your example is that you have perhaps slightly overused <section> elements. The blog <article>s probably don’t need <section> children unless they really do have subsections. So the markup you have used would be appropriate in a case like:

<article> <h1>My Extended Essay</h1> <section> <h1>Introduction</h1> <p>...</p> </section> <section> <h1>Middle Bit</h1> </section>
with an outline like:
<h1>My Short Post</h1> <p>...</p>
```
My Extended Essay
&#8212;Introduction
&#8212;Middle Bit
```
However in the simple case without subsections it is better to just write

<article>
since this doesn’t generate an implied subsection with no heading. I know this isn’t quite intuitive but it’s not easy to see how to fix it in the spec.

As an aside, where did you get the source material for writing this document? From the HTML 5 spec itself? From reading some other articles on HTML 5? It would be useful to know how people are teaching themselves about this stuff.
jgraham
January 12th, 2009
Appreciate this series, Steve. Seeing the IE Javascript workaround is helpful, since otherwise I would probably have been baffled by how to make it all work together. Thanks for the insights, looks like I may be trying this out sooner than I thought.

Ryan Imel
January 12th, 2009
Great article once again Steve! Will be keeping my eye on your HTML5 series. Appreciate all the hard work you are putting in to get these articles out.

Terjin
January 12th, 2009
Very interesting indeed. However I must agree with jgraham in that I’m not sure about all that extra mark-up. Does an article really need to define a header twice? A section that contain only a paragraph? I could understand the use of a section within an article that is highlighted or that it contains an introduction with multiple paragraphs. It doesn’t seem needed here.

It goes to show that context is everything. In fact HTML5 will make mark-up more difficult not easier. We need to reduce the amount of tags and assign them appropriately or else you risk loosing semantic meaning.

Egor Kloos
January 12th, 2009
Drop it like it’s hot. Nice article. It seems XML and HTML are coming closer and closer to each other every day.

Chris W.
January 12th, 2009
@jgraham: Thanks for your comments. I realize my example is a little verbose for the information given, but I’m considering it exaggeration for emphasis. I’ll amend the article with a link to your comment so that people can see some more specifics of how these structural tags can be used. Thanks again!

@everyone: thanks for the kudos! Stay tuned for more!

Steve Smith
January 12th, 2009
How do you target these new elements in order to style them?

Rob
January 12th, 2009
Great article! Looking forward to the things to come with HTML5.

DerTim
January 12th, 2009
I’m confused as to how the CSS styling works. I understand the code, but for example:

If I wanted one of my sections to be main articles an the other to be older articles, what would the code be to differentiate each section? Do you still use class=”mainArticles” inside the section tag?

Sorry for the ignorance.

Ryan Merrill
January 12th, 2009
@Rob and Ryan Merrill: These are styled just like any other tag. You can either target them by the tag name specifically, e.g.
header { /* Styles Here */ }
Or put a class or id on the tag to give it a more specific meaning and style as normal
```
&lt;article id="article-1"&gt;
```
Steve Smith
January 12th, 2009
H Steve!

Frankly I feel a little like the child in the fairy-tale “The Emperors new clothes” here, and I’m sorry to rain on your (and possibly) HTML5:s parade – but the example you give in the text is unfortunately not a conformant HTML5 document (the Emperor is naked, hasn’t anybody noticed?)

The problems in the code are your thre uses of <h1><a href=”#”>Title</a><h1> (i.e. malformed h1-elements) within the section-element.

The prescence of the errors highlights that even if HTML5 might come with a souped up error handling, it will still be as important as ever to make sure that code we produce is not broken by running validation/conformance checking tools.

Jarvklo
January 12th, 2009
@Jarvklo: Thanks for the catch. The issue was simply poor formatting on my part. The code has been fixed in the post. No need to rain on the parade for such a simple fix.

Steve Smith
January 12th, 2009
Hi, I was having a play with this, and wondered what is to stop you using your own tags? I just tried using <section>my content</section> and it worked fine! If you use the JS above and state display to block then it all plays nicely. What do you think to this? It’s not standards compliant but then again how much would that matter as long as it all works correctly and is based on semantic thinking! x

Cameron
January 12th, 2009
Great article. I actually stumbled upon HTML 5 before I actually new about it being developed. I posted the article on my blog talking about it, and after users began saying it was HTML 5 it really started gaining some of my own interest. I think this simple example of HTML 5 really will draw a large interest. Also, I noticed that Zeldman talked about it as well for the new An Event Apart Web site. Although, I think that the Event Apart Web site may have taken a reverse phase in the design. It raises the question to me, will this updated language promote better design or make it take a step back? If so, is it from others having to learn something new, or the actual code itself?

Patrick Algrim
January 12th, 2009
The rest of the world may be ready for this (even IE6 – that was amazing), but sadly WordPress is not. It wraps all the new tags in paragraph tags. Oh well, it was fun playing with.

Jen Germann
January 12th, 2009
@Jen – There are a few plugins that can take care of the way Wordpress handles your input through the admin panel. Take a look at TextControl which strips all formatting from your entries, I’m using it at the moment with 2.7 and it works fine:

http://plugins.trac.wordpress.org/wiki/TextControl

Dave McNally
January 13th, 2009
@Jen, as Dave notes there are ways to get HTML5 to work with Wordpress. Bruce Lawson’s blog – http://www.brucelawson.co.uk/2009/html-5-elements-test/ – is an example of one already doing it.

My question has already been hinted at by others: to get support for the new elements in IE, you need to use javascript, but how do you provide fallbacks for those with javascript disabled? In other words, is HTML5 really ready for anything other than personal projects? Is there anyone out there using it for clients’ sites?

John Faulds
January 14th, 2009
Hi Dave,

Nice Html5 Primer.. Just wondering, how does this play with xml, do you think 5 is the next step – is it an xml-based language, or still simply html, as with 4? or doesn’t it really matter either way? – I know XML plays nice with other XML-based platforms, just wondering how it’ll play with a straight HTML version.

Thanks again for the post,

Cam

CmrnOlvr
January 14th, 2009
This is definitively an interesting topic, but no css support in IE without Javascript makes it a no-go, for me. It goes against three layered webdesign :(

Not sure how screenreaders deal with the new tags either. Probably doesn’t deal with them yet

Thomas Winsnes
January 15th, 2009
@Michael Castilla When do you think HTML5 will be fully supported by all modern browsers? This year? 2 years?

If only. According to Ian Hickson, the editor of the HTML 5 specification, the proposed recommendation itself won’t be ready until 2022.

See

http://blogs.techrepublic.com.com/programming-and-development/?p=718

and Jeff Croft’s response

http://jeffcroft.com/blog/2008/sep/11/two-thousand-twenty-two/

Joost
January 16th, 2009
@Joost: Sorry, but that’s a common misconception. Ian probably shouldn’t even have said it, because it was so likely to be misinterpreted, but shrug.

What he meant by the “2022” date was he expects us to wait until at least 2022 for there to be two fully-conformant browsers for html5 (the official criteria for something to become a Candidate Recommendation currently). This still sounds just as ridiculous, so let me clarify. There are NO fully-conformant browsers for HTML4. Zero, zilch, nada. They don’t exist. Similarly, there are no fully-conformant browsers for CSS 2.1. Both of these technologies, though, are ANCIENT by tech standards.

My point is that a spec is usable WAY before a fully conformant application exists. Many parts of HTML5 are usable right now. Many more will be fully usable in only a few years.

Xanthir, FCD
January 18th, 2009
These make a lot of sense, I like section and nav. I’d prefer ‘heading’ to ‘header’ but nobody asked me.

Thanks for including the IE patch too.

Judd Lyon
January 22nd, 2009
Do you think that we should start using HTML5? reading this blog post left me undecided and dithering: http://www.webscienceman.com/2009/01/24/html-xhtml-html5-future-html/

Sonia Marras
January 24th, 2009
Just launched my redesign last night and busted out HTML5 on it. I like it a lot! I didn’t go too deep into reformatting the divs titled “header” to a header tag. But I’ll take that step once I get things handled with the journal and portfolio…

Not nearly as tough as I thought it would be. If you’re capable with XHTML strict and thinking about trying it, it will be a breeze.

I also can’t wait to jump in and experiment with the “video” and “audio” stuff.

@Sonia – I doubt anything is going to change so significantly that HTML5 should be avoided. If it’s IMB.com or something huge, I’d have concerns, but if you want to experiment and see for yourself – I say do it!

Dan
January 29th, 2009
Great article. This is quite a revelation for me – I had no idea current browsers could actually support these tags and actually thought HTML5 was going to be an idealistic markup language for a few years yet.

I’m trying this out!

Rik Weber
February 3rd, 2009

Ordered List