Ever since I attended a conference about the developments being written into the new HTML5 spec, I’ve been dying to give it a try. So much about the language is exciting, and will really expand the possibilities for web developers to do more with much less effort. So when the time came for me to re-design my personal website, I decided to do it in HTML5.

Quick Background on HTML5

So what’s so great about HTML5? First of all, it’s much simpler and more semantic. Second of all, it has a lot of new features that will make rich internet experiences much easier to produce without a lot of technical or backend programming knowledge. Most articles about HTML5 focus on these features, like the <video> and <audio> tags, and you can read all about some of the new features more in-depth with a quick google search. But I’m not here to cover this well-trodden ground, I’m here to talk about the realities of my experience using HTML5 today.

It’s So Easy

At first, I couldn’t believe how easy it was to do. After swapping out the doctype and character encoding, I had to tackle the main body of the site. More than anything else, it’s just a matter of re-organizing the way you think about markup. The new elements that I used the most for this were:

• <header>
• <footer>
• <article>
• <section>
• <time>

Before HTML5, the first 4 would be a <div>, and the last one <abbr> (if you follow microformats). But now each of these tags have very specific meanings.

<header> & <footer>

The <header> and <footer> tags are deceptively simple, and you probably already think you know how they should be used. Most modern pages have a header and footer section, and if you think that you should use these tags instead of a <div>, you’d be right. But that’s just one use, not the actual meaning.

A <header> tag is designed to encapsulate heading information, not just of the page, but of any sub-sections that’s appropriate as well. For example, in a list of blog posts, each post has header information (the title, the date, an author). So, using the <header> tag would be appropriate there.

  <ol>
      <li>
          <header>
              <h1>Blog Post Title</h1>
          </header>

          <div id="content">
              (post summary or content)
          </div>

       </li>
       ...
  </ol>

A <footer> tag is designed to encapsulate supplementary information. The footer on most pages is exactly that, extra links, contact info, ads, etc. However, going back to the example of a list of blog posts, information like tags, category names, number of comments could be stored in a <footer> tag for each post.

  <ol>
      <li>
          <header>
              <h1>Blog Post Title</h1>
          </header>

          <div id="content">
              (post summary or content)
          </div>

          <footer>
              <ul>
                  <li>
                      (post tags)
                  </li>
                  <li>
                      (post categories)
                  </li>
                  <li>
                      (post comments)
                  </li>
              </ul>
          </footer>
      </li>
      ...
  </ol>

The funny thing is, that for a language based on being semantic the <footer> tag is a surprisingly presentational name. So don’t let it fool you. Just because it’s called a footer doesn’t mean it has to be at the bottom.

<article> & <section>

There are many posts out there describing the difference between <article> and <section> so I won’t waste a lot of time on that distinction, other than to explain how I kept it straight in my head.

For me, it’s not so much about the distinction between <article> and <section>, but rather the distinction between <section>, and <div>.

• <section> : a collection of objects that requires a thematic or semantic realtionship between them
• <div> : a collection of objects that doesn’t require any kind of semantic realtionship between them

A <section>  is used to represent a thematic grouping of things that have some kind of relationship that’s apparent to the user. For example, if there’s a part of a blog that is dedicated to raising money for a recent crisis or tragedy, this would be a <section> inside of that page.

A <div> is used to group things that need to be grouped for the developer, but this grouping is invisible to the user. For example, if I had a three column layout, I might need to put two of those columns into one container in order to float them all properly. But these two columns have no relationship to each other (one is a list of posts, the other is headlines from a sister site). Using a <section> would not make sense, since this is not a section of the site, distinct and separate from the rest of the content. Instead, I’d use a <div>.

An <article> tag is the easiest one to understand, in my opinion, as it just relates to an individual production. In a list of blog entries each entry would be an <article>. Here’s some markup that shows all three together.

  <div class="left-column">

      <section id="movie-posts">
          <ol>
              <li>
                  <header>
                      <h1>Blog Post Title</h1>
                  </header>

                  <div id="content">
                      (post summary or content)
                  </div>

                  <footer>
                      <ul>
                          <li>
                              (post tags)
                          </li>
                          <li>
                              (post categories)
                          </li>
                          <li>
                              (post comments)
                          </li>
                      </ul>
                  </footer>
              </li>
              ...
          </ol>
      </section>

      <section id="headlines">
          <ul>
              <li><a href="#">Headline</a></li>
               ...
          </ul>
      </section>

  </div>

  <div class="right-column">

      <section id="video">
      </section>

      <section id="audio">
      </section>

  </div>

Problems With Specificity

One last general problem I had using HTML5 was a problem with specificity. Once I dove into the CSS of the site, I realized that I hadn’t given as many class and id names as I’d need. Especially to these new elements. I guess, psychologically, some part of me thought since they were so new they’d be unique. But as I showed you above, you can have many different headers, footers, articles, sections, etc. And because HTML5 allows for multiple <h1> tags, you will need to give them a name now as well (something you may not be used to, since there only used to be one <h1> allowed per page). So, always make it a point to give headers with similar functions semantic class names (or even better, microformats if you know them):

  <div class="left-column">
      <section id="movie-posts" class="hfeed">
          <ol>
              <li>
                  <article class="blog-post hentry">
                      <header class="post-header">
                          <h1 class="post-title entry-title">Blog ↩
                          Post Title</h1>
                      </header>

                      <div id="content" class="entry-content">
                          (post content)
                      </div>

                      <footer class="post-info">
                          <ul>
                              <li>
                                  (post tags)
                              </li>
                              <li>
                                  (post categories)
                              </li>
                              <li>
                                  (post comments)
                              </li>
                          </ul>
                      </footer>
                  </li>
                  ...
              </ol>
          </article>
      </section>

      <section id="headlines">
          <ul>
              <li><a href="#">Headline</a></li>
               ...
          </ul>
      </section>

  </div>

  <div class="right-column">

      <section id="video">
      </section>

      <section id="audio">
      </section>

  </div>