Short tips on using HTML 5.

Posted on 27 September 2009 at 20:33 UTC.

I’ve been making a few new experimental Web projects in HTML 5 recently, one of them being the UNC Computer Science Club Web site. Since the standard is largely backwards-compatible with HTML 4.01, the transition markup-wise isn’t particularly steep, but there are a handful of things that are easy to trip over at first.

Styling of new elements. HTML 5 defines several new elements, such as <header> and <nav>, that are intended to be block-level. Most browsers, however, will treat them as inline if their internal style sheets haven’t been updated, which will lead to some odd issues with positioning (especially floats). You can use a reset style sheet, such as the one provided by html5doctor, but a good number of these problems can be fixed without one by just specifying display: block; in CSS where appropriate.

Internet Explorer parsing tree. IE 8 has an odd parsing strategy when confronted with elements it doesn’t recognize — it’ll turn both the opening and closing tags into new empty elements, so

<header>
    <h1>Heading</h1>
</header>

turns into the (rather bizarre)

<header />
    <h1>Heading</h1>
</header />

This can be solved easily through some JavaScript; calling (for example) document.createElement("header"); before using the tag for the first time causes IE to treat the new elements as expected.

Poor support for <meta charset>. The new-style character set declaration works, for instance, in Firefox, but not Safari (or even recent WebKit nightly builds). Using the old <meta http-equiv="Content-Type"> markup is inelegant, but functional.