Test new HTML 5 elements - I'm a <header>


This page tests whether it's possible to use new HTML 5 structural elements NOW (Jan 09). Background and more information.

Synopsis: I hereby declare these elements ready for use!

See all my HTML 5 articles, tests and tutorials.

This should render properly (with intentional whitespace between this area and the <aside> to the right) in

I'm testing on a Windows Vista machine. I'd be grateful for information about other operating systems. This domain is brucelawson.co.uk; me, I'm bruce. You can contact me at my domain. Thanks to all who've already done so.

Andrew Mabutt told me that the previous version on Win XP, IE 6 causes aside to drop below article. Same happens in Firefox 3, too, and Opera 9.6 rendering was borked. Turns out, I had a typo; I closed a </cdde> element rather than a </code> element, which screwed up the DOM tree.

I guess what's happened is that browsers are by nature gentle and forgiving creatures which try their best with elements they "know" about, but they don't know how to guess with other elements. Some browsers are more html5-aware than others, and will become more and more knowledgeable, so they should be less fragile as time goes on.

Serves me right for not validating properly, though! (Opera users can validate HTML 5 in the browser, using the debug menu that accompanies Opera Dragonfly.

Camino problems

Jeremy Keith writes that it doesn't render in Camino. Remy Sharp kindly sent a screenshot showing that Camino 1 believes HTML 5 elements like <article> are empty. That nice Jon Hicks sent me a screenshot of this page in Camino 2, in which it appears to render quite acceptably.

Internet Explorer problems

In IE 6 and 7, text inside heading and footer doesn't centre, unless forced to with an additional rule header * {text-align:center;}. You don't need to force descendents of header to inherit its color, though. Similarly, I don't need to force descendents of footer to inherit text-transform.

The container <div> needs a width of 100%, or IE 7 halves the width of the nav element.

I put those extra IE-only rules and the sneaky JavaScript in a conditional comment and feel a bit grubby about it.

Who and why?

I'm Bruce Lawson, and I work for Opera who pay me to do this. So here's a plug: Opera 10 alpha scores 100/100 in the Acid 3 test, and also supports Web Fonts. It's 30% faster on real web sites. Try it out, please do.

Phew! Let's sing!

That was hard work. Let's all relax and sing along to Gita Gutawa's pop-tabulous "Bukan Permainan". I provided a rough translation of the lyrics below.

Bila nanti aku pergi Jangan Lachy panggil ku kembali Bila nanti aku pergi Takkan ada cinta kita Lachy.

Hey baby, it's tricky coding web 2.0 apps in a markup language meant for documents, isn't it Lachy?

Kita bisa balik Lachy, pisah Lachy Apa kau mengerti Bahwa ini bukanlah… Bukan permainan… an…

But you and me, Lachy, can get together in an open process with a knowledgeable editor and bridge that gap.

Kau tak bisa buatku menangis Lachy Kau tak bisa buatku bersedih Lachy Tanpa aku kau akan baik saja Tanpa kamu ku akan baik saja

Cowpaths! It seems to me, Lachy, that extra semantics based upon what document authors actually want to do would be a start.

Kau tak bisa buatku menangis Lachy… ii…

Cowpaths! It's gotta be backwards compatible, Lachy, or I'll cry tears of pain. Boo hoo.

Bila nanti kau sendiri Jangan ingat-ingat aku Lachy

We need to define how we deal with errors, don't we Lachy?

Kita bisa balik Lachy, pisah Lachy Apa kau mengerti Bahwa ini bukanlah… Bukan permainan… Anne…

You and me, Lachy, let's use those new semantics (particularly web forms and the <video> element) and rock the world, baby. Don't be jealous; we need help from Anne.