April 30, 2011
see my new layout MISTAKE...unless you have epilepsy
HTML5 with Class — Jon Tan 陳
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:
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:
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>ElementThe
headerelement is for page orsectionheadings. 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
headermight 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
sectionandarticleelements 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>ElementThe
navelement 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>ElementA
sectionelement defines a section of a page or a distinct piece of content. It would ordinarily have aheaderand possibly afooter. 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
sectioncould also have a layer with a semantic class name ofheaderif the content made it necessary.v. The
<article>ElementThis is how the HTML 5 working draft explains
articleelement:“The
articleelement 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
articleelements can also be nested. We looked at the example of a series of blog posts using semantic class names in theheadersection. This is an example using semantic class names in a uniquearticlepage withheaderandfooter:<body> <div class="article"> <div class="header"> <h1>Title</h1> </div> [Article content…] <div class="footer"> [Footer content…] </div> </div> </body>vi. The
<figure>ElementThe
figureelement 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>ElementThe
dialogelement 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>ElementTo 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
insandimgelements 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>ElementThis is what the working draft has to say:
“The
footerelement represents the footer for thesectionit applies to. Afootertypically contains information about itssectionsuch 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
addresselement is now scoped by the new concept of sectioning.” This is important, because now, if you have multiplesections in a page, each can have both aheaderand afooterwith a correspondingaddressin thefooterfor 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 singleaddresselement; 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 becomesclass="section news", orclass="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
- References:
- Further Reading:
Eric Meyer | The Geek Talk
A father, a husband, a speaker, a conference organizer, an author, and a reader. A proud and happy resident of Cleveland, Ohio and a traveler of the world. A man of many words in print but fewer in person, an aficionado of all kinds of music, and a semi-competent coder. A veteran of the web going on 17 years now, a booster of markup and style, a creator of movements, and a defender of community and collaboration. A lover, not a fighter.
What about CSS3?
It’s here, it’s coming, it’s stalled, it’s dead… depending on which of the various CSS modules and browsers you choose to scrutinize. For example, some of the advanced CSS selectors are supported by just about every browser in use today, and they’re part of CSS3. Then there are things like CSS Transforms and Animations, which are well supported by a few browsers. And then you have CSS Math, which is potentially interesting but not implemented in browsers (as it has not been for most of the past decade).
So it’s not a question that’s simple to answer. There’s a different answer for every person.
Why reset styles?
Because browsers don’t all have the same defaults. A reset levels the playing field. However, as I’ve said many times, it’s most effective if you take a reset style sheet and alter to suit your own tastes, thus creating a personalized “reboot” style sheet. Raw reset style sheets are a starting point.
What does your typical day look like?
Some administrative work for An Event Apart, a fair amount of feed reading, and a lot of e-mail. It’s also pretty common to do content and other creative work for An Event Apart, writing talks and creating slides, and then there’s always blog, article, and book writing.
What do you do in your free time?
I work on some personal programming projects. I meet weekly online with a group of Halo 3: ODST gamers and irregularly in real life with a group of Rock Band gamers. I also try to make it to local web-related group meetings. Of course, I travel a fair amount for work so these things don’t happen as often as I’d like.
Current favorite apps?
BBEdit, Transmit, Camino, Twitterrific, Eudora, and Osmos. Runners-up: Thunderbird, NetNewsWire 2, and Darwinia.
What OS do you prefer?
Mac OS X. I’m still on Leopard mostly because I don’t have the time to devote to an OS upgrade, and also because as some of my favorite applications get older, I get more and more wary that an OS upgrade will break them.
Small picture of your workplace?
The office is halfway through being reconfigured, so it’s a total mess right now. I’ll just say it’s a smallish room in our converted attic with two windows offering a lovely view of the trees behind the house and a patch of sky where I can watch summer thunderstorms approach.
Favorite: Color, Font, Language, JS Framework?
Respectively: navy blue, New Century Schoolbook, HTML, don’t have one.
Name something that has inspired you recently?
The documentary film “Man On Wire”. What a fantastic work of art.
What do you prefer (and why): Freelance work or full time employment?
I prefer working for myself. It has a lot of advantages, not least of which is that I can really never be fired. It also lets me be closer with my family. The downside is that as a U.S. citizen, I have to pay for my own health care and health insurance, and that’s not exactly inexpensive. If I didn’t have access to a decent group plan through a local small-business coalition, it would be even more expensive.
What are your personal projects and goals for 2010?
To finish up my current book project for Wiley and start on the fourth edition of “CSS: The Definitive Guide”, and to keep focused on making An Event Apart the best event it can be and the premiere conference choice for web designers and developers.
More personally, I have a web service idea that a friend and I are going to try to build– it’s one of those “we wish this thing existed so we’ll have to make it happen ourselves” situations. I’m also hoping to finish a much better version of HYDEsim incorporating work I did in conjunction with Nuclear Darkness and some additions of my own. I’m most of the way there but my weakness at JavaScript programming has proven quite a hurdle. Once that’s done, I have some old WordPress plugins that could really stand to be overhauled and updated, and sometimes I think I should revisit S5 to take advantage of CSS animations and transforms.
I also hope to find time this year to become more conversant in American Sign Language and maybe do some carpentry.
