Learning To Use HTML5 Semantic Elements

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.

html5: I've seen the future and it's in my browser

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.

1
2
3
<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.

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

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

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

html5 semantics

Meter

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

1
2
<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
1
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

1
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.

Sunset through the structural framwork of a house being constructed

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.

html5 powered

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:

1
2
3
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.

1
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.

1
2
3
<!--[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.

html5 logo

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?

Download a free sample from my book, Design Fundamentals.

8 comments

  1. Been using HTML5 and its new semantic elements for about a year now for every site I do. My clients have basically no IE6 traffic and very little traffic that has js-disabled, so using the tags have worked fine with the shiv, and more recently modernizr.

    I might be generalizing but it seems that most people browsing in a js-disabled environment are aware their web experience will be truncated away, this may or may not be an excuse write them off, again is a case-by-case basis.

    Unsure what kind of “additional workarounds” you’re holding out for, though your client base may differ from mine.

  2. I’m not really sure what additional workarounds I’m holding out for either. :)

    Mostly I just meant I might hold off for those of my clients who do have significant visitors using IE6 or 7. Some of my clients have businesses that appeal to the less web savvy among us if you know what I mean.

    While I do agree with you about the js-disabled people I figured I’d err on the side of caution with client sites.

    I’m glad you’re using it as much as you are. It’s good to know I probably don’t need to be as cautious as I originally thought. I’ve been working on a demo using all these new elements, which I’ll be posting next week.

    If you read it feel free to let me know what you think. Here and there I could make valid arguments for doing things in different ways and it’ll be interesting to see what best practices you’re adopting.

    After working with html5 more in practice I don’t think I’ll hold back with clients outside of a specific few. So far in my testing the html5 is working better than I expected. I guess it was more my own inexperience than anything else that was leading to my caution.

  3. what about styling these elements, especially when you can add multiple header, footer, article in the same page.
    Using the old ids/classes or more towards child selectors?

    • You can style these elements the same way you style any other element. Up to you whether or not to use id/classes of child selectors. The reason for choosing one over the other shouldn’t have anything to do with whether you’re using html 4 or 5 elements.

  4. I am about to switch my Website from HTML4 to HTML5 and CSS3, I’ve been looking around and reading the W3C tutorials for HTML5 and it has been of help to me. Thank you! :)

    • I’m glad the article is helpful Manuel. Just to make clear you don’t really switch from html4 to html5. What came before still works. It’s more about incorporating some things from html5 that browsers support. I think that’s what you meant, but I thought I’d mention it.

      Don’t feel like you have to use every semantic element. Understand what each is meant to do and start using those that make sense to you.

      By the way I noticed you tried posting this comment a few times and the first few got held up in moderation. Sorry about that. I’m not sure why it happened.

  5. The difference between Section and Article is, indeed, the most confusing issue with all this new tags.

    To me, it makes more sense to think of an article as part of a seccion, that means that articles are within sections.

    For example, a “comments” section, where each comment is an article in its own right.
    Although this comments section would be a part of an article (a news on an online newspaper)…

    Still confusing… perhaps a simple DIV is still the best choice.

    • I hear you Luis. I think section and article are confusing too. The way you describe it seems how it’s meant to be used. I’ve read where a section is used to wrap a group of related items and an article is an item that could stand alone.

      Sometimes a div is easiest :)

Leave a Reply

Your email address will not be published.

css.php