Getting mucky with HTML5

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.

SHARE:

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.

Topic: Software Development

Jake Rayson

About Jake Rayson

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, and my working life reflects my commitment to open standards and accessible websites (ie accessible by everyone, regardless of browser, platform, ability or technology).

For web publishing platforms, I use WordPress for ease of use and Drupal for more complex solutions.

I am also learning about Ruby, Rails, Sinatra and CoffeeScript. I like the minimalist Ruby Way. To this end, my personal portfolio website is built with NestaCMS.

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

Talkback

0 comments
Log in or register to start the discussion