Practical HTML 5

Using HTML 5 today

The great thing about HTML 5 is that you can already start using it today and get used to the new syntax and functionality, because it's DOCTYPE is already supported cross-browser and - besides a few small differences - it is backwards compatible with HTML 4. It even standardizes existing proprietary features.

Unfortunately some browsers have issues interpreting the new HTML 5 elements. In Internet Explorer you cannot style HTML 5 elements, while Firefox 2 (and other browsers based on the same engine) contains a bug that automatically closes any unknown element. To solve these issues there are already a few workarounds available, however these either rely on JavaScript or a specific server-side configuration.

Personally, I have decided to start using the HTML 5 DOCTYPE for my personal projects, however I'm not particularly fond of using these workarounds. Relying on HTML 5's backwards compatibility instead, I basically mark up my new projects as if I was using HTML 4, with the difference that I:

• use the HTML 5 DOCTYPE and MIME type definition
• keep HTML 5's element names in mind when I name my id and class attribute values
• insert HTML 5's new semantic elements inside this markup afterwards

The disadvantage is obvious: redundant markup that may force me to refactor my HTML templates and CSS files in a few years time. Still, this approach feels more natural to me, because it allows me to use HTML 5 in a fully functional and clean way today, while I postpone a part of the transition to the future (the part where things are not properly supported cross-brower yet).

Furthermore, - as a personal coding preference - I still use lowercase element names and quotes around all my attribute values, for better readability. I also explicitly use the optional head and body elements, for readability and because JavaScript libraries often expect that these elements are available inside your markup.

An example

Phase 1 (today)

Author a Web page with HTML4, like this HTML 4 example, e.g. with the following mark-up for the header:

<div id="header">
	<h1>HTML 4 example</h1>
</div>	

And apply CSS as you use it today:

#header { background-color:#eee; }

As a next step replace the HTML 4 DOCTYPE and MIME type definition with HTML 5 syntax and add semantic HTML 5 elements to your document, like in this updated practical HTML 5 example:

<div id="header">
    <header>
	    <h1>Practical HTML 5 example</h1>
    </header>
</div>

Note that you don't have to update your style sheets, because you've only added semantic elements. You basically postpone it's styling to phase 2 of your HTML 5 transition, when no ugly workarounds are needed anymore.

Phase 2 (somewhere in the future)

Refactor your HTML templates by removing the redundant markup like in this updated HTML 5 example:

<header>
	<h1>HTML 5 example</h1>
</header>	

And refactor your CSS files:

header { display:block; background-color:#eee; }

In any case, this is just my current train of thoughts. Please let me know what you think of this approach and why you think it is either good or bad.

Comments