I promised one last post on HTML elements. This is it. This one will be a quick tour through some of the new semantic HTML5 elements. I’ve been using them regularly for a while now and I’m still trying to wrap my head around the best way to use some of them (in this, I’m not alone.) Hopefully sharing what I’ve learned will help jump start your own work with the new stuff and will help my clarify my own thoughts on the new elements.
This should really be fun.
header
This is one of the most straightforward of the new elements. <div id="header"> becomes <header>. Done. When I’ve presented on HTML5 people just nod when I point this element out. Hopefully this one just makes sense.
One experimental note
One thing we’ve been experimenting with at work is using multiple headers on a page. The pattern looks like this:
<!DOCTYPE html>
<html lang="en">
<body>
<header>
<h1>site logo</h1>
</header>
<section id="posts">
<header>
<h1>This is our section header</h1>
</header>
<article>
<header>
<h1>This is our article header</h1>
</header>
<p>this is our article</p>
<footer>
<p>this is the post footer</p>
</footer>
</article>
<section>
<footer>
<p>site footer</p>
</footer>
</body>
</html>
The idea being- this is truly a copy and paste waiting to happen. The article is truly standalone. I’m not quite sure if I like it or not yet, but it’s a perfect example of why I’ve started using HTML5 wherever possible. There’s a lot to take in, so I figure the best way to wrap your head around it all is to roll up your sleeves and write some code.
footer
If header makes sense, footer should as well. There are a lot of <div id="footer">s out there.
nav
nav is for navigation elements. Looking at my markup for the blog@drunkenfist.com, you’ll see where I like to use nav and where I’ll stick to an unadorned UL.
I use it for the main site navigation (the clearest use), for the post-navigation (back and next, another clear use) and for the social media/contact links (the weakest use.) The first two are perfect, I think. The third use is a weaker case to me and looking at it today, I’m tempted to remove it from that section. The idea there was that it’s meta navigation, dealing with the breadth of my internet presence, not just the site. Chewing on that one…
I don’t use it for the WordPress archive and links lists. I don’t really feel like those are navigation. They’re more informational. So, no nav.
section
Section is defined like this:
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, contact information.
Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.
The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.
So the general rule of thumb I use is to try to define the section, in terms of the content contained therein, before actually using one. That separates out a lot of structural uses. To look at DrunkenFist.com again, I use sections on my home page for events, site updates and my little collection of blog updates:
- Rob Larsen
- Home
- Art Portfolio
- Graffiti Art
- Comic Book Art
- Color Art
- Black and White Art
- Pencil Drawings
- Movies
- Hong Kong Cinema Articles, Reviews and Interviews
- Hollywood Film Reviews and Interviews
- Japanese Cinema Reviews
- Independent and Foreign Film Reviews
- An Index of Every Film Reviewed on The Site
- No Mod Required, Rob’s blog
- More about Rob Larsen and DrunkenFist.com
- Art Portfolio
- Upcoming Speaking Engagements
- Current Art Shows
- New at the Site
- Blog Headlines
- No Mod Required
- HTML + CSS + JavaScript
- It’s All Just Comics
- Untitled Section
- Links:
- Untitled Section
- Home
More on the untitled sections later.
article
If it’s content and I can imagine someone copying and pasting the entire <article>…</article> then it’s an article.
One thing I haven’t tried is this, suggested in the spec:
When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.
One of the ongoing debates is how to mark up blog comments. This is an interesting approach to that particular issue. Maybe on my current project?
Yes.
If you want an in-depth view of the differences between article and section, then check out Bruce Lawson’s article on the subject.
time
time represents, well, time. One thing to note is when using it within an article you should set the pubdate flag to indicate that it’s a publication date.
Here’s what that looks like:
<h1>How To Make a Web Site the Modern Way. Part 11: The New HTML5 Elements</h1>
<p class="date">
<time datetime="2010-05-08T09:18:49-04:00" pubdate>May 8th, 2010</time>
by Rob Larsen
</p>
aside
aside is a tricky one. Is it a sidebar? The more I think about it, the less I think it is. One reason is visible above. The first of the “Untitled sections” in the outline is an aside. So that mixed with a closer reading of the spec have lead me away from using asides for most generic sidebars. Depending on the content, some of them still might be asides, some might be sections, some might be navs and plenty will be generic divs.
One place I am comfortable with asides is visible in the context of a movie review on Drunkenfist.com.
To me, that seems like a good use case as defined in the spec:
[an aside is] 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.”
figure
A figure, combined with a figcaption is meant to mark up a note, be it text or visual, illustrating a portion of an article. The figure is the added content and the figcaption is a semantically linked text accompanying caption. The figure can contain text, image(s) or video(s).
And that’s that.
The above is clearly not a comprehensive introduction to HTML5. There are a lot of pieces of the specification that it ignores. Still it should give you a good sense of the new semantic elements and how they’re used. I can’t stress how easy and how useful it is to start using these elements right now. There’s a lot to learn about and starting as soon as possible is the way to go.
And with that, we end our tour of HTML elements. It’s taken a while, but I think it’s been worth it.
Now, time for CSS
2 thoughts on “How To Make a Web Site the Modern Way. Part 11: The New HTML5 Elements”