Learning To Use HTML5 Semantic Elements

Posted: 18 Jul 2011 05:30 AM PDT

HTML5 has several new layers, including a new set of semantic tags. While there is still some debate about whether or not we should be using and styling these tags I think at the very least we should start learning them.

Over the last year or two I’ve read quite a number of posts talking about html5 structural tags and most of them left me a bit confused about how to use them.

Recently I read Jeremy Keith’s excellent book, HTML5 for Web Designers from A Book Apart and now feel like I have a better understanding of how these tags should work.

This post is a further attempt to better understand things for myself and hopefully pass on some of that understanding to you.

Today I want to run through each of the new tags and briefly explain what each is meant to be used for. I’ll keep the code itself light in this post.

Note: Some of the elements below lead to a new content model for structuring documents. I’ll talk about more about content models on Thursday. Next week I’ll do my best to present some code for a typical blog post using these new html5 elements.

Text-Level Semantics Elements

There are two types of semantic tags introduced by html5, text-level and structural. Text-level semantics fall into what are currently inline elements.

Mark

The mark tag is used to to highlight or reference a run of text due to it’s relevance in some other context. Highlighting words in a document that a visitor searched for is a good example.

The mark tag is doesn’t attach any importance to the text like strong or em tags do, but it’s more semantically meaningful than the generic span tag.

It’s hard to think of many uses beyond searching, but I’m sure they exist. Perhaps you make a quote linkable and in the original document the text you quoted is highlighted in some way using the mark tag.

Time

Time as you would expect is used to markup temporal information. It can be used for dates, times, or combinations of the two.

 <time datetime="14:00">2pm</time> <time datetime="2011-07-14">July 14th, 2011</time> <time datetime="2011-07-14T14:00">2pm on July 14th</time>

The datetime attribute isn’t necessary, but if it’s not used it’s value needs to be shown to the visitor.

 <time>2011-07-14</time>

One obvious use for the time tag is with the hCalendar microformat.

 <time class="dtstart" datetime="2011-07-14"> July 14th, 2011</time>

Meter

The meter tag is used to markup measurements, specifically a scalar measurement within a known range.

 <meter>1 of 10</meter> <meter>2 of 7</meter>

It could also be used to represent a fractional value like disk usage or percentage of a specific population.

It doesn’t represent an absolute scalar value of arbitrary range like your height or weight, unless of course you’re reporting heights or weights within a known range of heights or weights.

There are 6 attributes you can use with the meter tag.

value
min
max
high
low
optimum

 Your batting average is <meter value=".340" min="0" max="1.000" low=".215" high=".367" optimum="1.000">.340</meter>

Extra points for baseball fans who know what .340, .215, and .367 signify.

Progress

The progress tag is used to markup values in the process of changing

 Your download is <progress>55%</progress> complete

It has 3 attributes

value
min
max

By itself it’s probably not that interesting, however when combined with the DOM and some scripting it can be used to dynamically update progress values.

Structural Semantic Elements

Structural elements are the block level elements we use to structure pages. Some of the tags below arose out of common web development usage for class names and ids.

Section

The section element represents a section of a document, typically one that includes a heading. It’s used to enclose a thematic grouping of content.

It’s similar to a div though it carries more semantic meaning since the content inside the section tags should be related. The key to choosing the semantic tag over a div is for the content to be related in some way.

Header

The header element represents the header of a section. It’s meant to be used as a container for a group of introductory content or set of navigational links.

While most websites currently have one header at the top of the page as a masthead, you can have multiple headers in a single html5 document. Usually you would use the header tag at the top of a document (as a masthead) or at the top of a section of content.

Getting used to multiple headers will probably be the most difficult adjustment.

Footer

Similar to the header, the footer element represents the footer for a section or document. Like the header tag there can be multiple footer tags in an html5 document.

A footer is more than content at the bottom. It should contain information about it’s containing element. Typical content you might include in a footer would be:

Author information or bio
Copyright information
Links to related content

The above aren’t the only things you could include. Any metadata for the section could go in the footer tag. Remember that the footer tag isn’t meant to describe position within a document, but rather describe the data within part of a document.

Aside

The aside element represents content that is tangentially related to the main text of a document. It aligns with what we think of as a sidebar.

As with the other structural tags its not about position within a document, but rather its relationship to the content. An aside doesn’t have to be to the right or left as we typically think of a sidebar. It could be at the top, the bottom, or even in the middle of a section of content.

If the information could be removed without reducing the meaning of the overall content, the information is a good candidate for an aside. Pull quotes are good examples. Advertising another.

Nav

The nav element represents a section of a document that links to other documents or to parts within the document itself. It’s a section of navigational links.

It’s intended for major navigational information like a sitewide navigation bar or a subsection menu. It’s important to realize that not every group of links belongs inside the nav element.

The nav tag should typically be placed inside the header element and again it’s meant for major navigational information.

Article

The article element represents a section of content that forms an independent part of a document or site. It represents a section of self-contained content.

Can the content be syndicated as an rss feed? If yes it’s probably an article. The article tags covers the same use case as the hAtom microformat.

Potential sources for the article tag include:

Blog post
News story
Comment
Review
Forum post

If the time element is used inside an article it can include the boolean pubdate attribute, however only one pubdate can be used inside each article.

While not intuitive the article tag can be used for things like self-contained widgets such as stock tickers, calculators, and clocks. An article doesn’t specifically have to be textual content. It’s the self-contained part that’s most important.

One point about all the tags above is they aren’t meant to replace every div in your document. The tags should be used where semantically appropriate. Some of your divs will get replaced with these new tags, though not all will. It comes down to the content being enclosed and choosing the most semantically meaningful tag.

The Difference Between Sections and Articles

One of the things I’ve found confusing about these new structural tags is the difference between a section and an article and when to use each. The answer seems to be a matter of interpretation and in some places the tags seem interchangeable.

The two tags are similar. The difference is that an article is self-contained. It can stand on it’s own. A section isn’t. You can have multiple sections inside an article and you can have multiple articles inside a section. You can nest sections within sections and articles within articles.

Ultimately you have to decide which is the most semantically appropriate for a given situation and I imagine as html5 falls into greater use we’ll see debates about the “right” way to use each along with a lot of meaningless arguing with anyone who doesn’t agree with your “right” way.

Note: I’ll have more to say about these 2 elements when we dive into some real code next week. Understanding their definitions is easy. Trying to decide when to use which in a document turns out to be a lot less easy.

Collage of browser logos

Browser Support

Of course a big question is can and should you use these tags now. What kind of support exists in browsers for these new semantic tags?

Not all browsers are supporting these tags, however you can still use them today. Most browsers not named Internet Explorer allow you to create any element you like and let you style those elements how you want. They simply won’t give those tags any default styling.

If we consider all of the new structural tags they’re meant to act as block level elements so all we need to do is add the following:

 section, article, header, footer, nav, aside { 	display: block; }

Doing the above will keep your layout from breaking. You can then add any additional styles you’d like for your design. Browsers may not understand the additional semantic meaning of these tags, but so what.

Other machines that do understand the semantics will get that additional meaning and browsers will see these tags similar to how they see a div (without default styling).

IE8 and below won’t recognize the new tags. However IE will recognize new elements created in Javascript so we can create the new tags.

 document.createElement('section');

You would do the same for each of the new elements or better use a conditional comment to link to Remy Sharp’s html5 shiv which will create them for you.

 <!--[if IE]> 	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

Modernizer also include’s the html5 shiv so if you use Modernizer you don’t need to link to the html5 shiv as well.

The above css and javascript will cover most everyone, though not people using IE6–8 with Javascript disabled. Generally speaking that’s a small % of people. Depending on the audience of your site it may not be an issue for you. There’s also a workaround for IE with scripting disabled.

Know though that even those people will still see your content. They may not see the styles you apply to the tags and they may not get the extra semantics, but your content will still be there. whether or not that’s acceptable is up to you.

Additional Resources

There are many, many resources for html5 and more and more seem to appear every day. Here are a few I used while putting together this post.

Summary

HTML5 adds a number of new layers to html, including a new set of semantically meaningful elements. We can categorize these new tags as being either text-level or structural.

The new tags are fairly easy to understand, though as we’ll see next week some become more confusing to use in practice

Browser support isn’t technically there in the sense of understanding the new semantics, but with a workaround or two we can safely use the new elements for most, though not all cases, .

I’m leaning toward using these new semantic tags on my own projects, though I’ll probably hold off using them on most client sites without some additional workarounds for the moment.

How about you? Are you using html5 semantic elements and if so have you encountered any problems?