Getting mucky with HTML5
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
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.