Getting mucky with HTML5

Summary:I am immensely excited. Not only am I working on the hottest day of the year, I am also building my new website using HTML5, CSS3 and web fonts.

I am immensely excited. Not only am I working on the hottest day of the year, I am also building my new website using HTML5, CSS3 and web fonts.

My site is a WordPress affair, and I'm creating my first theme from scratch. This is an ideal opportunity to go beyond skim-reading other people's blog entries and actually getting my hands dirty with the latest web technologies. It's good, I feel like a fresh-faced student all over again, learning things until my brain starts melting.

Initial reactions are it's not as hard as it looks. The key points about HTML5 seems to be its simplification, an increase in semantic markup and acting as a vessel for some cool new features.

With regards to simplification, the doctype, character set and general tidiness seems much improved eg:

<!DOCTYPE html>

as compared to previously:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

I am struggling a bit with the new structural tags such as <section>, <header> and <article>. What's important here is that HTML5 provides a way to have document headings in discrete clusters. With HTML4, you are supposed to use an ordered hierarchy of <h1>, <h2> etc., with which I took issue with the BBC's guidelines.

Things are done differently in HTML5, so that you can have multiple <header> elements which can be a collection of heading information for discrete elements such as an <article>.

The best resources I've found so far are Mark Pilgrim's Dive into HTML5 and The HTML5 Doctor which supplies a tickety glossary.

"Aha!" I hear you cry "What about backwards compatibility?".

Luckily for you, me and everybody, some very kind souls have assembled some very cool tools. Remy Sharp has created an HTML5 enabling script, which uses JavaScript jiggery to fool Internet Explorer <9 into believing that these are the unknown elements it's looking for.

Over at HTML5 Doctor, Richard Clark has modified Eric Meyer's CSS reset to bring you a gloriously up-to-date HTML5 Reset Stylesheet.

And because HTML5 is far more forgiving (sloppy?!) in the old syntax department than XHTML, those kind and minimalist folk at MMM have given us HTML Lint, a way of improving your HTML5 without really being a validator.

Now I have my skeletal site all ready to rumble, I'll be moving on to the pain of web fonts.

Topics: Developer


A web designer since the 20th century, I am a pragmatic advocate of Free Software and I use proprietary software when appropriate. I made the full-time switch to Linux back in 2007, and my desktop tools of choice are Linux Mint, Inkscape, GIMP and Sublime Text. As a Front End Developer, my core skills are HTML5, CSS3 and jQuery, an... Full Bio

Kick off your day with ZDNet's daily email newsletter. It's the freshest tech news and opinion, served hot. Get it.

Related Stories

The best of ZDNet, delivered

You have been successfully signed up. To sign up for more newsletters or to manage your account, visit the Newsletter Subscription Center.
Subscription failed.