File Under: HTML5

Add Semantic Value to Your Pages With HTML 5

In the part one of our HTML 5 tutorial, we looked at some of the language’s new structural markup tags that are designed to reduce the “<div>-soup” of HTML 4 and add semantic meaning to your page’s layout.

But not every new tag in HTML is strictly structural. There are other tags that also add valuable semantic meaning to your pages in non-structural ways. Today, in part two, we’ll take a look at how to use them and what they can do for your content.


Contents

  1. The <time> tag
  2. The <figure> tag
  3. The <dialog> tag
  4. Revisiting the <aside> tag
  5. The <mark> tag
  6. Conclusion

The <time> tag

There have been a couple of cases recently where old news stories or blog posts have been recycled or republished as if they were new, breaking stories. Sometimes this happens through human error, or sometimes just through news search crawler error. In some cases, the damage was worse than just making the perpetrators look bad — it actually sent a few stocks into a tailspin.

While there’s not much HTML5 can do to help human error, the <time> tag could have saved the search engine spiders.

Despite the timelessness of the web, most things published online carry some sort of date/time stamp, and that’s exactly the data the <time> tag is intended to convey. The most basic usage looks something like this:

Published <time>12/20/2009</time>

However, the <time> tag also has an attribute called datetime that makes it even more useful because it allows you to display a nice date format to your human readers inside the tag. More importantly, it also provides search engine spiders with something more useful to them. Let’s amend the above code slightly:

Published <time datetime="2009-12-20T17:22:28-05:00">

Thursday, December 20, 2009 at 10:28PM EST</time>

Now, you might be thinking the terribly unreadable attribute syntax (also know as the ISO 8601 date format) in our example is way more of a pain than it’s worth. Indeed, if you’re hand coding, it probably is. But any good content management system should be able to output this format for you. For example, to make this work in WordPress, you would simply add this bit of HTML 5 to your template:

Published <time datetime="

<?php the_time('c'); ?>">



<?php the_time('l, F j, Y'); ?>

</time>


A couple of things to note. According to the HTML 5 spec, if you omit the datetime attribute, then the tag must contain a valid date string. The valid part means it must be in the format: year, month, day.

Also worth mentioning: when you use the datetime attribute, the tag itself can be empty. While both of these variants are OK according to the spec, we suggest you use both a machine readable datetime for the attribute and human readable format inside the actual tag.

The <figure> tag

The figure tag was designed to make image embedding more descriptive and easier to recognize. The figure tag isn’t limited to images though, it can also be used for diagrams, code snippets and other visual elements.

But <figure> also isn’t intended for every image. The key defining phrase in the spec is any illustrative element “that could, without affecting the flow of the document, be moved away from that primary content, e.g. to the side of the page, to dedicated pages, or to an appendix.”

The most common use case is an image that you refer to in the body of an article. To use <figure>, you simply wrap your image tag and add a legend like this:

<figure>



 <img src="/images/tpsreport.jpg"

      alt="TPS Report, July 2009">

 <legend>July 2009 TCP Reports</legend>

</figure>

The <figure> tag can also be used for code snippets. For example, to markup the code snippet in the previous example, you’d have something like this:




<figure>

 <legend>Using the HTML 5 Figure tag</legend>

 <pre><code>

 <figure>

 <img src="/images/tpsreport.jpg"

      alt="TPS Report, July 2009">



 <legend>July 2009 TPS Reports</legend>

</figure>

 </code></pre>

</figure>


The most important thing to remember about the <figure> tag is that you don’t need to use it for every image you want to embed in a page — just those cases where you refer to the image in question to illustrate a point or use as an example in your article.

The <dialog> tag

The dialog element in HTML 5 is for marking up conversations — a chat transcript, an interview, a bit dialog from a screenplay, and so on. The <dialog> tag works pretty much like a definition list, but specifically denotes dialog.

For example, here’s the famous Abbot and Costello “Who’s on First” routine represented in HTML 5:




<dialog>

 <dt> Costello </dt>

 <dd> Look, you gotta first baseman? </dd>

 <dt> Abbott </dt>



 <dd> Certainly. </dd>

 <dt> Costello </dt>

 <dd> Who's playing first? </dd>



 <dt> Abbott </dt>

 <dd> That's right. </dd>

</dialog>


You could also use <dialog> for something like a blog’s comment section, since comments are, generally speaking, a conversation between a writer and an audience. Something like this:

<dialog>

 <dt id="comment_1">Commenter Name</dt>

 <dd>HEllo. I really likes your site. want to buy some WOW gold?</dd>

</dialog>

Revisiting the <aside> tag

In part one of this walk-through of HTML5, we looked at the <aside> tag as way to mark up a sidebar or other structural content wells. But <aside> can also be used in less structural ways. For example, it can also be used to highlight a quote within an article.

Here’s one of the official examples (also note the use of the <q> tag, a little-used HTML 4 element):

<p>He later joined a large company, continuing on the same work.



<q>I love my job. People ask me what I do for fun when I'm not

at work. But I'm paid to do my hobby, so I never know what to

answer. Some people wonder what they would do if they didn't

have to work... but I know what I would do, because I was

unemployed for a year, and I filled that time doing exactly what

I do now.</q></p>



<aside>

 <q> People ask me what I do for fun when I'm not at work. But I'm

 paid to do my hobby, so I never know what to answer. </q>

</aside>



<p>Of course his work - or should that be hobby? - isn't his

only passion. He also enjoys other pleasures.</p>



This is essentially what newspapers and magazines refer to as a “pull-quote,” an excerpt from an article that’s been “pulled out” and typeset separately (usually a larger font). Other examples include the traditional, Hamlet-style aside, but not, according to the spec, parenthetical asides that fit the normal flow of the document.

Who knew HTML 5 would require a linguistics degree? Like we said in the first tutorial, the spec isn’t perfect.

The <mark> tag

The mark tag is intended to denote text that is particularly relevant. It’s a bit like <strong> but instead of denoting the importance of its contents, it denotes relevance.

The <mark> tag isn’t one that you’ll probably use very often, but it does have one particularly handy use case: highlighting search terms that brought a visitor to your site. You’ve probably seen sites that do this, somewhat like the way Google highlights your search terms when you access a cached page rather than the live site. That’s the perfect time to use the <mark> tag.

Conclusion

That about does it for the rest of the semantic tags in HTML 5, next time around we’ll start playing with the API related tags like <audio>, <video> and <canvas>.

From the HTML 5 Tutorial series

Lesson 1: Building Web Pages With HTML 5
Lesson 2: Add Semantic Value to Your Pages With HTML 5
Lesson 3: Embed Audio and Video in HTML 5 Pages