HTML 5 elements test

In my inaugural monthly column for ZDNet UK, I speculated that 2008 would be remembered as the year the Web grew up, due to the publication of the HTML 5 public draft, and suddenly everyone’s talking about HTML 5. And I mean everyone.

Thai Elvis impersonator with Bruce, speech bubble from Elvis saying 'HTML 5'

(Skip the bullshit explanation and go straight to the test if you’re impatient. Then come back.)

There remains a lot of confusion about when you can use HTML 5. Some aspects are supported by browsers, and are therefore available for use now, such as the video element in Firefox, Safari and an Opera labs build and canvas which is available everywhere except IE (see canvas tutorial). (Here’s a more complete list: HTML 5 Implementations in Web browsers.)

Opera “knows about” canvas, datalist, embed, output, and the new input types except input type="color" and input type="search". All browsers will style elements they don’t “know about” (although IE needs to be helped).

Opera doesn’t yet have browser defaults for header, footer etc, because that rendering hasn’t been decided upon—eg how section or header influences the default rendering of h1. (More on Opera’s support.)

Anyway, Eric Meyer recently recoded An Event Apart to use the HTML 5 DOCTYPE, and one of the comments he received was “I thought I might see more of the new elements introduced – header, nav, article etc. – but then I guess the site still needs to be presentable in older browsers too.”

I’m not dissing this commenter; there has been much disinformation about HTML 5, so I thought I’d try to rectify it and made an test page to show that you can use those new HTML 5 semantic structures now, even in Internet Explorer 6 (provided that your visitor has JavaScript turned on).

The page has undergone many incarnations from the first one, mostly due to the help of colleagues (David Storey, Jon Hicks, Lachlan Hunt), friends like Veerle Pieters and strangers who watched on Twitter as I developed and refined it. Thanks web community!

See my full HTML 5 redesign.

27 Responses to “ HTML 5 elements test ”

Comment by Pete

Bruce, there have been 2 posts now without mention of bovine innards.

As I don’t do the computer thing, and have no idea what you are on about, could you spice my sad little life up by dumbing down a little!!!!

As an obsessed nurse once said ” I’m your number one fan!!!”

Comment by Zeppelin

You can get it work in Camino/FF2 (at least the very basics, like the custom tags, such as article, header, etc), if you serve it as an XHTML or HTML document.
This can be done easily with PHP.

Comment by Zeppelin

Bruce: something like this, maybe with a bit more sophisticated user agent detection:

<?php
if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Firefox/2.0') > -1)
{
header("Content-Type: application/xhtml+xml; charset=UTF-8");
echo'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">';
}
else {
echo '<!DOCTYPE html><html>';
}?>

Comment by Zeppelin

Well, I’m aware of the perfect XHTML serving issue, however it’s no problem for me: I write valid XML anyway, since sometimes it’s useful that the HTML source is ready to be parsed in engines other than web browsers (eg. PHP, Flash, etc.)

I’m a bit sad though, that we need to do things like this to maintain backward-compatibility, but I can swallow it, if we gain any benefit from transitioning standards more relevant to today’s needs…

For IE, it’s possible to automate the createElement script, by either parsing the file before serving it, and render the appropiate JS array containing the elements, or just adding it by hand with all the HTML5 elements in it.

If any non-portal-sized work comes in my sight, I’ll do it in HTML5, and I’d cheerfully submit the result here, and maybe email the problems and the solution I ran into during the development.
(I do not own a blog, and I’m not intend to…) :)

Comment by John Faulds

I’m not dissing this commenter

Glad to hear it ;) I was aware that there were sites out there already using those elements; was just wondering why Eric hadn’t when he’s usually at the cutting edge. Seems like time constraints played a factor in this case.

Comment by Rich Clark

Hi Bruce

Just a quick question re HTML 5, is it possible to do the below with the nav element?

I guess I’m asking if nav = navigation list in the same was as ul= unordered list, or do the li’s still need to be wrapped in a ul element?

Cheers

Rich

Comment by Rich Clark

Thats great cheers Bruce,

A few more questions….

1. In your example you use div id=wrapper were you not tempted to use ‘section’?

2. I notice in the W3C example you pointed to they have 2 h1’s in their markup, is this valid in HTML5?

3. Do you know of a good link that I can see the differences between html5 and xhtml2 and which do you think will win out?

Cheers for your help

Rich

Comment by Bruce

Hi Rich

1) yes. I will use section in a further revamp next week. I’m doing the write-up now, and it’s already so long that I’m splitting it over a few days.

2) Yes, multiple h1s are valid. Opinions are divided about whether it’s good practice. I think you should have one h1 per page; some think only one per site.

3) I don’t know of a difference doc between xhtml 2 and html 5 doc. I think html 5 will “win” on the web, as all the browser manufacturers are behind it because it gives customers what they want — more robust ways to develop web apps (rather than just documents) anbd becaused it’s backwards compatible, whereas xhtml 2 isn’t.

Comment by John Faulds

I’ve been thinking about this some more and have come across more articles advocating that HTML5 can be used now, with support for the new elements being available to IE via javascript.

But how do you provide fallbacks for those with javascript disabled? In other words, is HTML5 really ready for anything other than personal projects? Is there anyone out there using it for clients’ sites?

Comment by Bruce

John,
great points. The biggest impediment to HTML 5 uptake is IE‘s requirement to have JavaScript on, in my opinion. I’ve written to an IE evangelist to ask whether the release of IE 8 will require JavaScript.

However, it occurs to me that the sites that will benefit the most from HTML 5’s new “Ajax”-style features, such as drag-and-drop, are the sites that currently have no hope of working without JavaScript.

(I don’t say that’s a good thing, just that it seems to me to be a fact).

Comment by Hafodax

Если не сложно… хочу сайт про яхты сделать. У тебя вроде сайт на вордпрессе – не мог бы подсказать где морских шаблонов взять? Плиз – скажи тут (я на рсс подписался) или кинь линку на мыло Hafodax(гав-гав)gbail.com
Заранее спасибо – пост грохни если чо :) Сорри что не в тему.