/ log / Mar, 2008 /

Preparing for HTML5 with Semantic Class Names

HTML 5 DOCTYPE

Some time ago I was asked in an interview whether I preferred HTML or CSS. It was a bit like being asked if I prefer pens or pencils. I made an instinctive choice. I chose HTML. It’s the typography of data; the inflection in our voices; the grid of meaning upon which presentation can flourish. I find it beautiful when done well, and that’s why watching HTML 5 unfold with new and refined elements is fascinating to me.

This is a brief introduction to the new structural elements in the HTML 5 Working Draft, and how to use semantic class names in HTML 4.01 or XHTML 1.0 markup that correspond to the names of those structural elements. By doing so, you’ll get a head start in understanding how to use the new elements and also go some way towards using plain old semantic HTML if you’re not already.

i. Introduction

HTML 5 will be the first major change to our lingua franca since XHTML 1.0 in 2000; some might say HTML 4.01 in 1999. You’ve probably already seen the HTML 5 Working Draft of the 22nd January this year. The W3C HTML Working Group and WHATWG have been grafting away on our behalf, and trying to satisfy everyone in an open process. Not an easy task. Sometimes, amongst the concerns and the questions it’s easy to forget that, so I’m taking a brief second in between sips of coffee to acknowledge the hard work. Thanks, folks.

Let’s get to know these new structural elements a little better. If you’d rather go straight to the horse’s mouth before continuing I recommend a comfy chair, and a perusal of HTML 5 differences from HTML 4, edited by Anne van Kesteren. W3C documents seem to be getting easier to read, and this is no exception. If you’re sticking with me for a while, let’s get to it:

ii. The <header> Element

The header element is for page or section headings. Not to be confused with a traditional masthead, which often holds just a logo mark, it should also contain one of <h1><h6> in hierarchical rank. It could also contain meta information for that page or section of a page like “last updated”, a version number, or blog entry information like published date, author, etc.

A simple example for a page using a semantic class name that corresponds to the HTML 5 header might be:

<div class="header">
<h1>Page Title</h1>
</div>

You could include the logo mark and other meta information within the layer. The next example for blog articles includes author and published date information (as well as an example of referencing the section and article elements with semantic class names):

<div class="section">

<div class="article">

<div class="header">
<h1>Page Title</h1>
<p>By <a href="*">Author</a> on [date]</p>
</div>

[Article content…]

</div>

<div class="article">
[Repeat as required…]
</div>

</div>

iii. The <nav> Element

The nav element should contain a set of navigation links, either to other pages, or fragment identifiers in the current page. Referencing it with semantic class names is simple:

<div class="nav">
<ul>
<li><a href="*">Menu item 1</a></li>
<li><a href="*">Menu item 2</a></li>
[Repeat as required…]
</ul>
</div>

iv. The <section> Element

A section element defines a section of a page or a distinct piece of content. It would ordinarily have a header and possibly a footer. This is how we could represent it using semantic class names:

<div class="section">

<div class="header">
<h2>Section Title</h2>
</div>

[Section content…]

</div>

I’ve also been using <div class="section"> to define a group of layers that are related (like news and events). In such an example, those sub-sections would be nested, each with their own <h1><h6> in rank order to maintain heirarchy. For example:

<div class="section">

<div class="header">
<h2>News and Events</h2>
<p>The latest announcements and upcoming conferences</p>
</div>

<div class="section">
<h3>News</h3>
[Section content…]
</div>

<div class="section">
<h3>Events</h3>
[Section content…]
</div>

</div>

Each section could also have a layer with a semantic class name of header if the content made it necessary.

v. The <article> Element

This is how the HTML 5 working draft explains article element:

“The article element represents a section of a page that consists of a composition that forms an independent part of a document, page, or site. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, or any other independent item of content.”

Multiple article elements can also be nested. We looked at the example of a series of blog posts using semantic class names in the header section. This is an example using semantic class names in a unique article page with header and footer:

<body>

<div class="article">

<div class="header">
<h1>Title</h1>
</div>

[Article content…]

<div class="footer">
[Footer content…]
</div>

</div>

</body>

vi. The <figure> Element

The figure element contains embedded media like <img> and the new elements of <audio> and <video>. It also contains an optional <legend> element performing the function of a caption. Our semantic class name version could be like so:

<div class="figure">

<img src="*" alt="*">

<p class="legend">[…]</p>

</div>

vii. The <dialog> Element

The dialog element replaces a <dl> to contain converations like transcripts. Using it as a semantic class name is straightforward:

<dl class="dialog">

<dt>Speaker 1</dt>
<dd>So I said to him, I said…</dd>

<dt>Speaker 2</dt>
<dd>You never. You did? Oh my…</dd>

</dl>

viii. The <aside> Element

To quote the working draft:

“The aside element 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. Such sections are often represented as sidebars in printed typography.”

I’ve been using “aside” as a class name for sidebars with mixed content, but my reading of the draft also indicates it may also be appropriate for pull-quotes and anything partially related to the main content, but not of it. See the sections relating to the ins and img elements for examples. It woud seem appropriate to use it with a semantic class name like this:

<body>

<div class="section">
[Section content…]
</div>

[Repeat sections as required for main content…]

<div class="aside">
[Aside content…]
</div>

<div class="footer">
[Footer content…]
</div>

</body>

This is what the working draft has to say:

“The footer element represents the footer for the section it applies to. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.”

In the changed elements section of HTML 5 differences from HTML 4, it also explains that, “The address element is now scoped by the new concept of sectioning.” This is important, because now, if you have multiple sections in a page, each can have both a header and a footer with a corresponding address in the footer for each if you deem it necessary. However, that would seem to be a rare use-case. Let’s stick with a more common one: A single footer for each page with a single address element; here’s how it might be done using a semantic class name:

<div class="footer">

<address>[…]</address>

[Other footer content …]

</div>

x. Multiple Class Names

Let’s recap a little: By using semantic class names, we give the information a semantic boost, and each chunk of related data is self-contained. However, it may have become obvious to some designers reading this that a side-effect of using this method, and eventually using HTML 5 elements themselves, will be lots of different content within containers of the same name. <div class="section">, for example. You might want to present different content very differently in the browser. Multiple class names will enable you to do that. class="section" can becomes class="section news", or class="section services". The "section" class name allows us to standardise some of the presentation; say, typography for example. The "news" class name will allow us to present it differently as a section variant.

So now we have the best of both worlds; the critical structural elements are included by default with more semantic class names providing hooks to apply our creativity to.

xi. End Notes

Bear in mind HTML 5 is a working draft so there will probably be some changes before it becomes a recommendation. It would seem unlikely that any of the new structural elements will be removed, but a sharp eye on the draft updates might be a good move.

Any errors in this article are my own. If you some across any, please let me know and I’ll make corrections.

xii. References & Further Reading

  1. References:
    1. HTML 5 Working Draft
    2. HTML 5 differences from HTML 4 and specifically, the new structural elements section
    3. Semantic class names
    4. Plain old semantic HTML (POSH)
    5. <header>
    6. <nav>
    7. <section>
    8. <article>
    9. <figure>
    10. <dialog>
    11. <aside>
    12. <footer>
  2. Further Reading:
    1. A Preview of HTML 5 on A List Apart by Lachlan Hunt
    2. HTML 5 Latest Working Draft at WHATWG
    3. WHATWG on Twitter
    4. W3C HTML Working Group

Share

Browse More Articles

22 Comments

  1. 1. By Kyle Hayes on 6th Mar ’08 at 08:34am

    Thanks, Jon for providing this brief overview. First time visitor of your site, looks great! I shall be subscribing to your RSS ;-)

  2. 2. By Hamish M on 6th Mar ’08 at 08:56am

    This is a really wonderful overview, Jon. Thanks so much for writing it up, I can tell you put a lot of work into it.

    Someone should put together a Wordpress theme that uses these principles. (I would, but not sure if I'll ever have the time… hehe)

    One small correction; the WHATWG Twitter link erroneously points to twiter.com, might want to fix that.

    Keep up the great work.

  3. Jon 陳’s profile 3. By Jon 陳 on 6th Mar ’08 at 09:12am

    Thanks Kyle, happy to have you around!

    Now corrected Hamish, thanks for spotting it. :) The theme is a good idea too, Wordpress users need a volunteer! Also, Jon Gibbins had an idea: Eventually, the HTML could be quickly converted to correct HTML5 elements using XSLT.

  4. 4. By Adam Polselli on 6th Mar ’08 at 13:38pm

    Great article! I hadn’t taken the time yet to catch up on the HTML5 news, but your post inspired me to take a look. It’s exciting to see that the W3C is finally making progress with all of this. Thanks!

  5. 5. By Peter Gasston on 8th Mar ’08 at 16:16pm

    Funnily enough, I had the same thought myself recently.

    You've written about it much more eloquently than I, however!

  6. 6. By inspirationbit on 14th Mar ’08 at 09:46am

    it seems to me that HTML5 is taking HTML towards the direction of becoming more of a web application language rather than simply a markup language. It will definitely pressure designers to get more organized with their code and page structure, and make it more semantically correct.

    I liked your review – very concise but thorough at the same time (and of course, the links out help too).

  7. 7. By Noel Hurtley on 15th Mar ’08 at 05:29am

    Thanks for the information and advice. This really helped me get up-to speed with HTML5 and how I can go about implementing these concepts with the technology of today.

  8. 8. By Andre on 18th May ’08 at 23:59pm

    Nice overview, thanks. I wonder how html5 and the semantic web (rss, microformats, etc) will bite each other – I think we´re facing a duplication of methods to deliver content in a machine readable way.

  9. 9. By Martyn on 23rd May ’08 at 09:15am

    GOOD article I’m just working my way through your back catalog of entries. Keep up the good work. Thanks

  10. 10. By jbot on 8th Sep ’08 at 08:01am

    Why would you wrap your headers in a div? It’s completely superfluous. The same for the menus. H1 tags are already headers and don’t need to be included in a DIV to give them any more semantics. Indeed, the DIV tag is structural and isn’t one iota semantical.

  11. 11. By Dean H. on 8th Oct ’08 at 18:21pm

    I notice you reference everything here with a class, rather than an id and I’m curious if there is a reason for that.

    I was taught that if an element is unique on the page and only appears one time (like a header of footer), it should be an id. And if it appears multiple times (a type of link, paragraph, etc.) it should be a class.

    Other benefits of using id’s instead of classes:

    1. IE chokes when you give things double classnames. If you give something an id, you can add a classname to it and over-ride a style, without IE giving you grief.

    2. "id" is 3 characters shorter than "class", thereby making your files smaller

    3. id’s can be used as anchors, classes can’t

  12. 12. By Andy Ford on 8th Oct ’08 at 21:54pm

    @Dean H.

    While I can’t answer for Jon I’ll attempt to respond to your questions

    RE: id vs. class – Jon shows examples that would/could possibly be repeated several times on a page. Modular chunks of code that have their own header, content, and (possibly) a footer. Section "iv. The section Element" kind of hints at this modularity. You bring up an interesting question though… if we have a page full of header elements, then should the unique div#header for the overall page get a different id name just to eliminate confusion? Personally I’ll have a hard time letting go of '#header' but I think I eventually will.

    RE: 1 (multiple classnames) – The problem with IE and multiple classnames is isolated to IE6. And in fact IE6 doesn’t have a problem (that I’m aware of) with applying styles if an element has multiple classes applied. It just doesn’t understand css selectors with multiple classes on the same element. So while "div.class1.class2.class3" will work in good browsers and IE7, IE6 will behave as if all it sees is "div.class3" (the Dean Edwards ie7.js script thankfully includes a fix for this)

    RE: 2 and 3 – valid points. I like the space savings, but others will argue it’s trivial.

    I’ll tack on a 4th id benefit: id’s are generally easier to target via javascript.

    You’ve raised some good points, but I think Jon’s examples are very geared to modular components that are intended for reuse.

  13. Jon 陳’s profile 13. By Jon 陳 on 9th Oct ’08 at 00:58am

    jbot, the latest WHATWG HTML5 draft might answer your question better than I.

    Hi Dean, Andy provided much of what I would of written. The article assumes nothing about how these naming conventions might be used — IDs could be used if the context permits, or appended to elements as fragment identifiers, depending on context. Multiple class names are very powerful in large-scale sites, where default styles remain constant, but variants of that object are required. The variation rules need only augment the default, not over-ride them and they also enable children of those variants to be styled in a similar way using specificity.

  14. 14. By Anon on 15th Jan ’09 at 02:12am

    I cant wait for good html 5 support in browsers :) semantic web here we c ome

  15. 15. By Leon Paternoster on 27th Jan ’09 at 07:07am

    Apologies for resurrecting this, Jon, but I’ve been thinking about divs, classes and IDs recently.

    I agree with jbot: there’s a difference between div class="section" and an actual section tag. A div is meaningless: content derives its meaning from its, erm, content and the way it’s marked up: adding a class or id is superflous.

    I’m thinking of the person/thing reading the document. In a standard browser the reader will garner meaning from the visual presentation of the text (e.g. the top level heading may be bigger than the other headings and sit at the top of the page, while asides may appear to the side of the main text), while someone using a screen reader will rely on the actual markup (the top level heading will be marked up as an h1, the aside will have to be clear from it’s placement within the text and its context). The classes and IDs make no difference to either reader.

    I can see how this is good practice for using HTML 5 (and these new tags will help aid the meaning of documents) but I’m just curious to know what you mean by <blockquote>By using semantic class names, we give the information a semantic boost</blockquote>.

    Of course, classes and IDs are invaluable for styling pages, and for document authors to organise their markup, but I don’t see how they aid meaning for the reader.

  16. 16. By Aeron on 15th Apr ’09 at 11:28am

    Just wanted to add that the figure element is for media that can safely removed from the document without affecting the flow. Traditional images in content for example are not necessarily figures. Simply wrapping all images with figure tags is akin to replacing all divs with section tags in it’s wrongness ;).

  17. 17. By Aeron on 15th Apr ’09 at 11:44am

    @Leon, I think the point of this article is:

    - To begin to structure your markup thinking in terms of HTML 5 and the next generation of parsing engines. I used Jon’s approach (with a lot of consulting of the spec) and it did cause me to change the way I structured the content - to hopefully good effect.

    - To create your page “HTML 5 ready" so that when the new version finally has majority support a simple parser could replace all your div class="article" with the appropriate tag, etc.

  18. 18. By Lee Norwich on 6th May ’09 at 14:20pm

    They seem to have applied good intiative to HTML 5, any ideas of when this will be supported by the major browsers? Does Internet Explorer 8 support it?

  19. 19. By praveen on 31st May ’09 at 00:11am

    Thank you jon for the great article.

    Using the classNames as you suggested not only helps us in easy shift to HTML5 but also helps us create semantically correct and consistent documents.

    I wonder if there is any element like breadcrumb in HTML5.

    As of now, I use

    &lt;div class="breadcrumb” &gt;

    for breadcrumbs.

  20. 20. By Craig on 7th Jun ’09 at 05:58am

    This article is going to confuse a lot of people (and has already, from the comments). The examples given are using todays semantic equivalents - whereas HTML5 looks nothing like the examples… the new HTML5 ELEMENTS are exactly that - elements (i.e. tags)… not classes. e.g.

    <code>

    <header>

    <section>

    <h1>My heading</h1>

    </section>

    </header>

    </code>

    Perhaps you could change your examples to reflect this, as people are getting confused.

  21. 21. By Russell Uresti on 7th Jun ’09 at 08:52am

    Nice article, it certainly seems HTML 5 will have some interesting adjustments for us. I would have liked to see a “before/after" type of coding example, though. Right now you show us what it looks like now, but not what it will look like in HTML 5.

    And, does anyone else find it weird that the dialog tag still uses the “definition term” (dt) and “definition description” (dd) tags inside it? Shouldn’t those 2 tags have been replaced as well? I guess they didn’t want to change it for ease of adoption.

  22. 22. By Shiju Alex on 8th Jun ’09 at 02:09am

    Also, this link from the designer Cameron Moll is a good read on why he would not use HTML 5 now, but prefer to have semantic markups and HTML 4 for DOCTYPEs

Comments for this entry are closed.

Lately in the Log

  1. Anakin Tue, 26th Jun 2012 {4}

    I’m pleased to be able to say that Analog is joining forces with…

  2. We, Who Are Web Designers Mon, 19th Sep 2011 {69}

    In 2003, my wife Lowri and I went to a christening party. We were friends…

  3. Ampersand, the Aftermath Wed, 22nd Jun 2011 {4}

    The first Ampersand web typography conference took place in Brighton last…

  4. Design Festival, The Setup, and Upcoming Posts Mon, 20th Jun 2011 {2}

    Wow, this has been a busy period. I’m just back from the Ampersand…

  5. Web Design as Narrative Architecture Wed, 30th Mar 2011 {12}

    Stories are everywhere. When they don’t exist we make up the…

  6. Ides of March Tue, 15th Mar 2011 {5}

    My friend and colleague, Chris, has shared a spiffing idea, the Ideas of…

Remarks from the log

  1. By cigs coupon codes in We, Who Are Web Designers:

    I just like the blog post. Its very informative, interactive and useful content. I wish you all good luck for your…

  2. By coupon codes 365 in We, Who Are Web Designers:

    When spring comes and summer is on the way,a new cool bag would be your needs. Our store products are very popular in…

  3. By pixelangry in We, Who Are Web Designers:

    Unfortunately, here in Italy, the figure of the web designer is seen as a figure who plays a nerd on the computer,…

  4. By www.canadianseoagency.com in The Paragraph in Web Typography & Design:

    Yep, this would be arguably the best articles I’d ever gone through in the recent times. I do hear alot of…

  5. By George in Copywriting, Experience Design, Daleks & Julio:

    Thanks

  6. By Martins in Typeface != Font:

    Great post Jon, I stumbled across it by chance on Google..!!

People and XFN

Analog folks:

  1. Andrei Zmievski

  2. Chris Shiflett

  3. Jon Gibbins

Friends, colleagues, and authors with interesting voices:

  1. Ben Ramsey

  2. Dan Mall

  3. Denna Jones

  4. Ed Finkler

  5. Elizabeth Naramore

  6. Elliot Jay Stocks

  7. John D. Boardley

  8. Helgi Þormar Þorbjörnsson

  9. Joe Leech

  10. Jos Buivenga

  11. Kester Limb

  12. Nicola Pressi

  13. Patrick H. Lauke

  14. Piotr Fedorczyk

  15. Richard Rutter

  16. Rick Hurst

  17. Sean Coates

  18. Simon Pascal Klein

  19. Terry Chay

Live the questions and one day grow into the answers.