This site provides the following access keys:

Brandan Lennox's

Moving to HTML5

There’s lately been a remarkable amount of progress and activity centered around HTML5 (and CSS3, to an extent). Handy resources like the HTML5 Doctor and Modernizr are popping up, and browser support is widespread or hackable enough to start using most of the basic HTML 5 elements on web sites right now! Wheeeee! I acknowledge that it’s lame to get excited about HTML, but I take my victories where I can get them.

So to get myself some experience with HTML 5 before I start using it in some upcoming client work, I spent some time this week migrating bclennox.com from XHTML 1.0 to HTML5. For what it’s worth, I’m going to write up my experiences here like a good little blogger, but it was really quite uneventful. In a good way, of course.

Adding Meaning

My first step was replacing a bunch of semantically empty <div>s with more meaningful elements like <section> and <nav>. It was surprisingly straightforward — so much so that it’s really not worth detailing here. Starting out with the reset stylesheet and Bruce Lawson’s article on designing a blog in HTML5, almost everything worked out of the box. Site navigation went in a <nav>, blog posts went in <article>s with their <time> and their footnotes in a <footer> — nothing earth-shattering.

The new heading structure is still a little ambiguous to me. I decided I’d get fancy and restart my heading numbering within each section, so a lot of code ends up looking like this:

<section>
  <h1>Some heading</h1>
  ...
  <section>
    <h1>Another heading, presumably less important</h1>
    ...
  </section>
</section>

Sort of makes the styling a pain, since I’ve got to define styles for <h1> elements at various different levels of nesting instead of separating <h1>, <h2>, etc. Not that big a deal though, and infinite nestability makes my inner programmer happy.

Other marginally noteworthy structural changes:

  1. I moved the main navigation to the top of the source but left my contact info and “elsewhere” links in the <footer>, which required only the minorest bit of CSS to keep them together visually.
  2. Images appearing over in the right-hand column of articles are marked up as <figure> elements. I don’t consider them totally necessary, nor totally tangential, but they are absolutely positioned, and that pushed me towards using <figure> rather than <aside>.
  3. It was nice to remove the type attribute from my <script> elements. That has long felt superfluous (seriously, is anybody still using VBScript?).

At that point, my site looked exactly the same as it did several hours earlier. C’est magnifique!

Going Native on Their Asses

Certainly one of the most long-awaited bits of HTML 5 is browser-native audio and video support.1 While it’s too bad that the browser manufacturers are (understandably) at an impasse in dealing with video and audio codecs, what we have today is still an enormous leap ahead of embedding plugins for something as essential as playing an MP3.

Most of my posts about music have a sample of a band somewhere in the article, embedded using the WordPress Audio Player plugin.2 A quick change to a single function in the plugin3 yielded a proper <audio> tag with both Ogg Vorbis and MP3 sources, plus the Flash player fallback for older browsers. The only pain was having to re-encode all my audio files as Ogg, but it looks like that’s a necessary evil for now. Again, not the end of the world.

As of right now, I don’t have any video to embed here, but I’m sure I can find an excuse soon.

More to Come (?)

I intended this spiritual pilgrimage to HTML5 to be a multi-parter, but honestly, it just wasn’t that involved. Most of the work was tedious, not difficult, and I spent a good bit of time updating some old design issues that have been bothering me forever.

HTML5 is totally viable for client work today. All the huff about 2022 — and yes, I was huffing too — is completely unwarranted. So check out all the resources linked here, and have fun hacking!

Footnotes

  1. Meaning you don’t need to install Flash or QuickTime or Windows Media Player or anything in order to play audio and video in your browser. It just works.
  2. Mind you, that’s a WordPress plugin, not a browser plugin.
  3. I do plan to contact the Audio Player developer to see if he’s given any thought to updating the plugin. It was pretty trivial to get it working with my site and the few browsers I support, but there are probably thousands of installations out there, so I’d respect any hesitancy on his part.