Don’t Forget About HTML5’s “Little Guys”

Louis Lazaris

If you’ve been keeping on the cutting-edge of new web technologies, then you’ve probably started to incorporate some HTML5 goodness into your web pages and web apps.

Maybe you’ve started using the simplified methods for declaring the doctype and character encoding. You might have begun leaving off "type=text/javascript" or "type=text/css" when inserting scripts and linked stylesheets. Possibly you’ve started building layouts with the new semantic elements like <section>, <article>, <header>, <footer>, and <nav>.

But are you forgetting about HTML5’s “little guys?” HTML5 now includes a number of new elements that probably aren’t getting a whole lot of attention, so I thought I’d summarize three of these lesser-used elements here. I’ll also mention a few ways these might be used in your projects, so you can see their value a little more clearly.

The <hgroup> Element

The <hgroup> element is an interesting little nugget that seems to be a by-product of the larger <section> and <article> elements. With the introduction of those new structural elements, different sections of web pages now have the ability to be more portable and syndicatable, and individual sections can each contain a top-level heading (<h1>).

This is where <hgroup> comes in. There are some cases where you don’t want a subheading to create a sub-node in the document tree — for example, if a main heading (<h1>) has a tagline (<h2>) associated with it. While you could put that tagline in a generic <span> or <div>, that’s not ideal.

The <hgroup> element allows you to wrap your entire heading and tagline to serve as a single main heading unit in the document tree without compromising semantic value. Here’s how a typical example might look in context:

<hgroup>
<h1>Main Heading</h1>
<h2>Tagline below the main heading</h2>
</hgroup>

<h2>Subheading</h2>

<p>Content here...</p>

<h2>Another Subheading</h2>

<p>More Content here...</p>

And the subsequent document outline might look like this:

  1. Main Heading
    1. Subheading
    2. Another Subheading

Because of the <hgroup> wrapper, the tagline is not included in the document outline, and that’s exactly what we want in this instance.

While the most practical use of <hgroup> is for taglines, you could also use it for grouping metadata or other auxiliary text whose content you don’t want to appear in the document tree.

The <aside> Element

The <aside> element is reserved for wrapping tangentially-related content. While it can be used to hold a typical sidebar as found on a blog, its meaning and name are not intended to refer to the physical position of the content. It could be on the “side” of a page, but it could also be somewhere in the middle, or at the bottom.

<aside> should be used to wrap a section of content that has some relation to the greater whole in which it appears, but doesn’t stand on its own as a single portable piece of content.

So you could use aside to hold a glossary of terms, an author bio, a “Did You Know?” box, an annotation, a pull-quote, or even an advertisement that’s related to the main content with which it’s associated.

The <mark> Element

Finally, we have the <mark> element. As explained in the spec, the <mark> element “indicates a part of the document that has been highlighted due to its likely relevance to the user’s current activity.” This makes this particular tag interesting because of its dependence on user behavior.

The primary use for <mark> is in the context of search results. The <mark> tag would indicate, by means of highlighting or other stylistic changes, which terms the user had searched for and where they appear in the displayed results.

Bruce Lawson, co-author of Introducing HTML5, makes use of this tag quite effectively on his blog posts when they’re found via Google. To see it in action, go to Google and type in a phrase that will bring up his site in the results (you can try this one). When you click through to the page, the phrase you searched for is highlighted via JavaScript which inserts <mark> elements on the fly, as shown in the screen capture below:

There don’t seem to be many varying uses for <mark> outside of search results. But even within that area, <mark> could be used in creative ways when a user is interacting with your web content, and depending on how they found your pages. So you could use both server-side and client-side technologies to highlight bits of content with the <mark> tag, where appropriate.

In Conclusion

So the lesson learned here is: Don’t forget about the “little guys.” While the larger structural elements are getting quite a bit of attention, there are some valuable lesser-used HTML5 elements that we can include in our pages to help improve the semantics and structure of our web pages.

note:Want more?

If you want to read more from Louis, subscribe to our weekly tech geek newsletter, Tech Times.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Leyton Jay

    Excellent tips, I am very interested in HTML5, I think it’s now finally time to start deploying sites written in it.

    I was finally able to use usage statistics to refuse to do IE6 fixes for one of our company websites the other day, it felt so good! The most commonly used browsers are HTML5 ready, so I’m ready to dive in!

  • http://www.patricksamphire.com/ PatrickSamphire

    One thing I found when building my first HTML5 site last month was that the definition of ‘aside’ was a bit too loose to be really useful. I spent a lot of time figuring out whether certain bits of information should be asides or just separate sections on a page. In some cases, it was clear. In others, it was totally ambiguous and I just had to choose one almost at random.

    Oh, and whether to use a header section within a section also seemed a little bit up in the air. In many cases, it could go either way.

    In some ways, it’s good that there’s flexibility, but in others, it makes the whole thing a little less semantic.

    Despite that, I’m going to keep building HTML5 sites when I can. I do think it’s an improvement.

  • http://www.xraysierra.com XraySierra

    I think your example of aside is a great demo of the new Semantic nature of HTML5. I’m really excited to see some more sites starting to implement and I think I might start to implement this into mine as well. I’m not really seeing the value of , I just think it’s only rare instances that it will be used.

    Another important HTML5 element which I think should have been mentioned here is the element. Adds a lot of semantic markup to our blog/news posts, as we we can now tell Google, Bing and other computers exactly when the article was created or edited.

  • Catherine Azzarello

    I did not know that about the mark element. So cool!

  • spacecadetno9

    Thanks for this post, I always like to support the little guys too….

  • http://www.iraqtimeline.com/maxdesign Black Max

    I love articles and blog posts that focus on the “little” features. Often those “side” or “secondary” features are the ones that can make a design. Great job, Louis.

  • casben79

    This is absolutely great, we are all still getting used to the idea that div is not the only useful HTML element!
    Semantics i do believe will play a huge part in search engine rankings in the near future, with the spider being able to discern structure of a webpage very quickly and focus on or manage weights for seperate elements.
    Thank you for the informative post, ill be sure to incorporate this into my next wordpress project.