SEO

April 30, 2011

HTML5 with Class — Jon Tan 陳

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.

Also available in:

  1. Беларуская мова (Belarusian)

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.

Sections:

  1. Introduction
  2. header
  3. nav
  4. section
  5. article
  6. figure
  7. dialog
  8. aside
  9. footer
  10. Multiple Class Names
  11. End Notes
  12. References

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 Author 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>Menu item 1</li> <li>Menu item 2</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>

ix. The <footer> Element

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
via jontangerine.com

S ome 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 f ...»See Ya
at