• Article

Using HTML5's New Semantic Tags Today

Emily P. Lewis | November 17, 2010

 

HTML5. Everybody’s talking about it. If it isn’t my friend who threw together a pretty sweet <audio> drum kit, it’s that buzzword-loving Vice President of Marketing who read somewhere that Flash is dead and HTML5 is the future. But just because everybody’s talking about it, doesn’t mean everyone understands it.

So, let’s address that first: what is HTML5?

HTML5, A Brief History

At its most basic level, HTML5 is simply the latest flavor of the universal language of the web. We started with HTML 2.0 (nope, there was no 1.0 version) and landed at the relatively stable HTML 4.01 in 1999. Then the syntax got stricter, based on the rules of XML, and we had XHTML 1.0.

XHTML 2.0 was short-lived, as the aim for an XML-based web diverged from what developers and designers were doing in the real world. And then after much infighting and brouhaha amongst the powers that decide these specifications, we end up with HTML5. Sorta … It’s a draft today. It won’t become a “candidate recommendation” until 2012.

Dates Don’t Matter

Yes, 2012 is over a year away. But that’s not so long, is it? Certainly not an excuse to avoid understanding what HTML5 offers you (and your sites and your clients) … today and tomorrow.

And don’t forget, browser makers aren’t beholden to standards bodies. Whatever date the W3C needs to make a spec official is pretty much moot if all the browsers are adding or increasing support for HTML5 today.  Which means, at a minimum, HTML5 should be on your radar.

A Mashup Language

HTML5 is more ambitious than its predecessors. It was developed with not only designers and developers in mind, but also browser makers and other implementers.

And it isn’t just a markup language for content. It’s a language that supports rich media with new elements like <canvas>, <audio> and <video>. It offers <form> interaction enhancements without JavaScript. It offers web storage for applications.

At the same time, HTML5 embraces its past. Its syntax is backwards compatible with previous flavors of HTML. Want to code loose and free, unconstrained by casing, quoted attributes and closed tags? Go for it. If you are like me and prefer that lovely structure of XHTML 1.0’s syntax, nothing is stopping you.

Yet, although HTML5 doesn’t tell you how to write your markup, it does encourage you to think about what markup you are writing. HTML5 is more semantic than previous versions, giving us POSH lovers a bigger and, I think, better arsenal.

Some elements have been deemed obsolete, other elements have been redefined, and new semantic elements have been introduced. All of which give markup authors more power to describe content, not only for human users but those machine users like search engines, browsers, screen readers and mobile devices.

I love how Molly Holzschlag phrased it on Twitter:

HTML5 is a mashup. It brings together the best of markup with the forward-thinking ambition of tomorrow’s semantic and interactive web. And all with a flexible approach that attempts to meet the needs of what designers, developers and implementers are doing today and what they might do tomorrow.

Start with Structure

One of the best (and, in my opinion, easiest) ways to get started with HTML5 is by using its new semantic elements for describing the structure of page content:

  • <section> is used for content that can be grouped thematically. A <section> can have a <header>, as well as a <footer>. The point is that all content contained by <section> is related.
  • <header> typically contains the headline or grouping of headlines for a page and/or <section>s, although it can also contain other supplemental information like logos and navigational aids. Notice that I said “page and/or <sections>s.” That means you could have multiple <header>s on a page.
  • <footer> is used for content about a page and/or <section>s, such as who wrote it, links to related information and copyrights. And, like <header>, you could have multiple <footer>s on a page.
  • <nav> is used to contain major navigation links for a page. While it isn’t a requirement, <nav> will often be contained by <header>, which, by definition, contains navigational information.
  • <article> is used for content that is self-contained and could be consumed independent of the page as a whole, such as a blog entry. <article> is similar to <section> in that both contain related content. The best rule of thumb for deciding which element is appropriate for your content is to consider whether the content could be syndicated. If you could provide an Atom or RSS feed for the content, <article> is most likely the way to go.
  • <aside> indicates the portion of a page that is tangentially related to the content around it, but also separate from that content, such as a sidebar or pull-quotes. A good method for deciding whether <aside> is appropriate is to determine if your content is essential to understanding the main content of the page. If you can remove it without affecting understanding, then <aside> is the element to use.

Doctype Just Got Easy

But before you can start using these new elements, you first need to declare the HTML5 doctype:

<!DOCTYPE html>

No joke. That’s seriously it.

I can’t remember the last time I actually typed out the DOCTYPE. It was always cut and paste. I never remembered it. That’s not a problem with HTML5’s simplified syntax.

Even better: this doctype works in every browser you may have to support … Yes, even IE6.

A Simple Structure

Now that you know the doctype, let’s take a look at those new semantic elements. But first, let’s consider content. Remember, the point of HTML5’s semantic elements (and POSH, in general) is to describe content. To do that effectively, you need to know and, I daresay, understand your content before you dive into markup.

The Content

Let’s focus on the home page content for a fictitious lawyer’s web site. It will have:

  • Logo
  • Name of lawyer
  • Navigation
  • Welcome message
  • Featured services
  • List of legal resources
  • Copyright and legal notices

On a web browser, the home page would be organized like so:

The HTML5

Since HTML5 requires more consideration of content, I like to add an additional “planning” step before I start writing markup. Here, I decide which of the new HTML5 semantic elements will come into play by “mapping” them to my content:

Content Relevant HTML5 Element
Logo <header>
Name of lawyer <header>
Navigation <nav>
Welcome message <section><article>
Featured services <section><article>
List of legal resources <aside>
Copyright and legal notices <footer>

Most of this I do in my head, but if you want to write it out go for it. The point is to take the time to think.

Also, this mapping is by no means final, but it does give me a sense of the initial elements I may use. Applied to the web layout from Figure 1, you can see how HTML5 helps define the content structure:

And now, for the markup:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>The Law Office of Jimbob Smith</title>                   
</head> 
 
<body> 
    <header>
        <a href="https://jimboblegal.com">
            <h1>The Law Office of Jimbob Smith</h1> 
            <img src="logo.png" alt="Jimbob Legal">
        </a>
        
        <nav>
            <ul>  
                <li><a href="/News/">News</a></li> 
                <li><a href="/Services/">Services</a></li> 
                <li><a href="/Resources/">Resources</a></li> 
                <li><a href="/About/">About</a></li> 
            </ul>
        </nav>
    </header>
    
    <section>
        <article>
            <h2>Welcome</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        </article>
        
        <article> 
            <h2>Services &amp; Expertise</h2>
            <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p> 

            <p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
            
            <p><a href="/Services/">Learn more</a></p>
        </article>
    </section>
    
    <aside>
        <h2>Legal Links</h2> 
  
        <ul> 
            <li><a href="https://dc.com">District Courthouse</a></li>
            <li><a href="https://da.com">District Attorney</a></li>
            <li><a href="https://la.com">Legal Advocates</a></li>
        </ul>
        
        <p><a href="/Resources/">See all</a></p> 
    </aside>
    
    <footer>
        <p>This is an attorney advertisement, not legal advice. Please do not share information, through this site or otherwise, that you wish to keep confidential.</p> 
        <p>Copyright &copy; 2010 Jimbob Legal. All rights reserved.</p>
    </footer> 
</body> 
</html>

Lastly, be sure to validate:

Still a Place for <div>

Just because you have all these new elements at your disposal, doesn’t mean you have to use them all.

Focus on your content.

If you don’t have content that is appropriate for a <footer> don’t add it just to have a “hook” for styling. Using a <section> or <article> purely for presentation, defeats the point of using these semantic elements. You can still (and should) use <div>s for those presentational purposes. I only encourage you to beware of div-itis.

Dealing with < IE9

All current versions of today’s major browsers allow you to use (and style) these new semantic elements. Firefox, Chrome, Safari, Opera and IE 9. But it just wouldn’t be the web we designers and developers know and love if we didn’t have to make some sort of accommodation for earlier versions of IE.

Fortunately, it is pretty easy thanks to the html5shimpolyfill, which provides fallback functionality to older browsers. All you have to do is call this script in your <head>, using conditional comments to target older IE browsers:

<!--[if lt IE 9]>
<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

And for those IE haters out there, don’t add this to your ongoing list of reasons of why IE sucks. Older Gecko browsers like Firefox 2 and Camino 1 have the same problem recognizing these new semantic elements. Get past your vitriol, use the shims and workarounds, and encourage your users and clients to upgrade, even to IE 9.

Also, as I mentioned, the HTML5 doctype works in all browsers, including IE6without this shim.

As You Like It

Now, you may not be ready to dive completely into these new semantic elements. Maybe you have a large IE6 user base and can’t rely on JavaScript. Maybe you just want more time to experiment. Maybe you have a huge site where a complete markup restructuring isn’t possible. Whatever the reason, you can still start using HTML5 today, whether for a new site or an existing one.

Remember HTML5’s backwards-compatibility? You can take advantage of that by simply changing your doctype and nothing else. With a single change to <!DOCTYPE html>, your pages are HTML5.

In the case of an existing site, this simple change ensures that your existing markup will still work, while you can implement HTML5 elements as needed. Moving to HTML5 doesn’t require a complete overhaul of a site’s markup.

Another steps towards embracing HTML5 without committing to the new semantic elements is to adjust your class/IDnaming conventions to mirror the new elements.  For example, instead of how I marked up the <section> content for my fictitious lawyer, I could:

<div id=”section>
    <div class=”article>
        <h2>Welcome</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    </div>
        
    <div class=”article”> 
        <h2>Services &amp; Expertise</h2>
        <h3>Criminal Case Evaluation</h3> 
        <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p> 

        <h3>Indigent Defense</h3> 
        <p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
            
        <p><a href="/Services/">Learn more</a></p>
    </div>
</div>

To HTML5 or Not to HTML5?

Despite its draft status and issues with older browsers, every single project I’ve done over the past six months has been in HTML5.

For projects where I have full freedom, I’m fully implementing the HTML5 semantic elements (and sprinkling in ARIA roles and adding some <form> enhancements). For more limited client projects, I’ve been taking this less aggressive approach of using the HTML5 doctype and naming conventions.

Why? Because I dig the direction of HTML5. Semantics are hugely important to me, particularly semantic markup. And I also appreciate the flexibility it offers authors in regard to syntax and backwards-compatibility.

But there is one more reason …

Amplified Anchors

In HTML5, you can wrap a link (<a>) around block-level elements. In HTML 4.01 or XHMTL 1.0, you might have:

<h1><a href="https://jimboblegal.com">The Law Office of Jimbob Smith</a></h1> 

<a href=”https://jimboblegal.com”><img src="logo.png" alt="Jimbob Legal"></a>

But, as you can see in the previous example, HTML5 lets you apply the link as the parent:

<a href="https://jimboblegal.com">
<h1>The Law Office of Jimbob Smith</h1> 
    <img src="logo.png" alt="Jimbob Legal">
</a>

Granted, a small change in syntax, but a powerful one. And one that, for me, entirely justifies using the HTML5 doctype now.

No More Excuses

If I’ve done my job with this article, you don’t have any excuses left for not experimenting with HTML5 … as little or as much as you feel comfortable with. So, get to it. I’m even giving you my favorite resources to help you along the way:

 

About the Author

Emily Lewis is a freelance web designer of the standardista variety, which means she gets geeky about things like semantic markup andCSS, usability and accessibility. As part of her ongoing quest to spread the good word about standards, she writes about web design on her blog, A Blog Not Limited, and is the author of Microformats Made Simple and a contributing author for the HTML5 Cookbook. She’s also a guest writer for Web Standards Sherpa, .net magazine and MIX Online.

In addition to loving all things web, Emily is passionate about community building and knowledge sharing. She co-founded and co-manages Webuquerque, the New Mexico Adobe User Group for Web Professionals, and is a co-host of the The ExpressionEngine Podcast. Emily also speaks at conferences and events all over the country, including SXSW, MIX, In Control, Voices That Matter, New Mexico Technology Council, InterLab and the University of New Mexico.

Find Emily on: