You can start using HTML 5 right now!

Warning This article was written over six months ago, and may contain outdated information.

There’s an interesting post on at the moment, decrying the speed of implementation for HTML 5 and CSS 3 and suggesting Flash/AIR as a better alternative. I completely disagree with it, but it’s interesting nonetheless. HTML 5 in particular comes in for heavy criticism as it’s perceived that its adoption will take too long.

But, as the title of this post makes clear: you can start using HTML 5 right now!

Well, you can’t really — but with Opera and Safari, you can at least pretend to while you get used to the syntax.

For some clever technical reason (which I’m guessing is to do with XML parsing), the two browsers named above let you apply styles to any element you like — even if you’ve made that element up. So you could, if such was your desire, create an element called <monkeys>, then apply CSS to it as you wish:

monkeys { color: brown; }

More relevantly, what this means for us is that we can create documents marked up with the proposed new sectioning elements, then apply CSS to them. This isn’t actually using HTML 5, of course, but for the purposes of experimentation it’s as good as it gets.

Take a look at this basic two column example I’ve created (you’ll need Safari/Webkit or Opera to view it properly). If you view the source, you’ll see that I’ve marked it up using header, section, article, aside and footer.

In order to create the layout, I simply had to assign each element a display value, then I could go about styling them to appear the way I wanted:

header, article, aside, footer { display: block; }

If you used Firefox to view the example above, you may have noticed that it doesn’t look right; it has rendered all the elements as I wished, but placed nested elements — the <h1>s — outside. I’m sure there’s a clever way to make that work, but I’ll need to experiment to find it.

If you’ve used IE (at least, IE6; I haven’t tested with IE7) you’ll just see the unstyled nested elements.

So obviously this isn’t ready to be used in production environments yet; it’s completely invalid, and only pretending to do what it’s supposed to. However, it is an interesting experiment (to me, anyway) and a good way to get used to the new elements.

5 comments on
“You can start using HTML 5 right now!”

  1. I’d love to start using HTML 5 but until it’s a standard and is supported by at least some browsers it is a bit pointless to me. To start playing with it now just seems like we’re teasing ourselves!

  2. The monkeys element is from XHTML2, not HTML5.

    Beyond being able to do this, as it is basically just styling XML, you can play with a lot more in Opera. You can also use Web Forms 2, server sent events (event-source), cross document messaging, getElementsByClassName (it’s HTML5 even though it is JavaScript/DOM), canvas, (for reporting if the browser is connected to the network), Element.tabIndex, Element.blur, Element.focus, video and audio element (in a special build), contenteditible (comes from IE I think) and possibly more that I’ve missed.

  3. This should also work in FF if you serve it as XML instead of html.

  4. Are you saying that in HTML 5 (or XHTML2 as DS states) we will be able to use any element name we want to? Without declaring them in a DTD?

    I don’t like the idea of HTML becoming XML. People will come up with all types of elements and they wont mean anything from a semantic viewpoint. I like the sound of these new elements for article etc though.

  5. @David: No, HTML5 does not allow you to use arbitrary elements. You can use XML Namespaces to declare different tag names, but that’s not quite what you’re thinking.

    Fortunately, HTML5 will allow both XML and HTML dialects, so that should help alleviate concerns both ways.

    (I know this is a delayed response, but since this site shows up near the top of Google rankings I figured it might be useful for some people.)