Kermode

/ˈkɜːrmoʊd/
The Spirit Bear

Written by Gray Gilmore

Kermode

I make websites for a living. I love CSS and building simple and modular stylesheets. Somewhere along the way I also turned into a Ruby developer. Life comes at you fast I guess. You can read my resume to learn about my journey so far.

Other Projects

Say Hello

You can find me as @graygilmore on several platforms:

Good ol' fashion email works, too: hello@kermode.co

You can subscribe to this blog via RSS: XML, JSON

Transitioning to HTML5

Written on September 23, 2011 Updated on December 1, 2013: Improved example

I’ll be the first to admit that I’ve been a little slow to adopt some of the new HTML5 elements. While always trying to be on the bleeding edge of what’s new in the world of technology, this is one thing that I’ve struggled staying on top of. This is finally starting to change as I take the soft approach to full adoption.

For starters, let’s clarify exactly what I’m talking about here. The ‘HTML5′ tree seems to have a lot of branches. When people talk about HTML5, they may be talking about a wide range of things:

I’ll be talking specifically about the new semantic elements and how they will effect my workflow. Here’s a basic structure as an example of a site that I would have built in 2010:

<div id="wrapper">
  <div id="branding">
  </div>

  <div id="main">
    <div id="content">
    </div>
    <div id="sidebar">
    </div>
  </div>

  <ul id="main-navigation">
  </ul>

  <div id="footer">
  </div>
</div>

To me, that’s a solid, clean structure. To be honest, I didn’t really see a reason why I needed to change. Unfortunately, that giant called Google slowly started disagreeing with me. As HTML5 becomes more established, Google will surely start to use the new tags in their search algorithms. When that starts to happen, you don’t want to be left behind.

Some of the new tags that I am going to implement:

Now, I had resisted implement some of these new tags into my sites because it felt so restrictive. The light finally clicked on inside my noggin and I realized it was really quite simple: IDs. Why would my structure even have to change? I could nearly just swap out my divs for new semantic tags, yahoo!

<div id="wrapper">
  <header id="branding">
  </header>

  <section id="main">
    <article id="content">
    </article>
    <aside id="sidebar">
    </aside>
  </section>

  <nav>
    <ul id="main-navigation">
    </ul>
  </nav>

  <footer id="footer">
  </footer>
</div>

[Update December 2013] – I thought it’d be good to revisit this post and provide an updated version of the standard code I’d use:

<div class="site-wrapper">
  <header class="site-header" role="banner">
  </header>

  <div class="site-main">
    <main class="site-content" role="main">
    </main>

    <div class="site-sidebar">
    </div>
  </div>

  <footer class="site-footer" role="contentinfo">
  </footer>
</div>

We’ve replaced IDs with classes and added role attributes to all appropriate elements as well as removed the <section> element that didn’t quite match up with the spec.

And just like that I have a perfectly acceptable HTML5 document. The beauty about this? Nearly none of my CSS needs to change because everything is being targeted via IDs anyways.

We still need a couple things for Internet Explorer 8 and below to play nicely though:

With those two items IE will rock your new elements almost as if it were a real browser!