HTML 5 Doctor

HTML5 Doctor covers many of the features and topics that you might have missed when moving from HTML to HTML5. It also has a helpful element index that’s worth investigating in and of itself.

Document outline semantics exposed by browsers and assistive technology:

→ top level heading

→ top level heading

→ top level heading

Brilliant as it is, this idea as specified has not been taken up by user agents. So after 7 years or more we have a concept without interoperable implementations (super sad face).

For the last few years, the HTML5 specification has included a warning about the lack of implementations and has suggested that the document outline algorithm not be relied upon to convey heading semantics to users. Recently this has been taken a step further. Now the HTML 5.1 specification  requires developers to use h1-h6 to convey document structure. The simple reason for this change is that the HTML5 document outline is not implemented and despite effortsto get it implemented, the general response from user agent developers has not been enthusiastic.

New form attributes

As well as the main structural item on the page, I’ve added some new attributes on input elements in the comments form.

HTML 5 was designed to reflect what developers actually do rather than to reflect a philosophical purity, and that’s very clearly manifested in the new attributes which mean the browser takes up much of the work currently done by developers re-inventing validation routines in JavaScript. (Extending forms functionality was how the HTML 5 spec began).

So I amended the email input field in the comments to be input type="email" which means that when the user submits the form, an HTML 5-aware browser will use built-in validation routines to check that it’s in the correct format, without any JavaScript. Check it out in the current version of Opera, as that the only full implementation at the time of writing (June 2009), and note that it also adds a “mail” icon in the input field as a cue to the user.

There are similar input validation routines triggered by some of the new input types, such as url (which I use on the field that asks for the user’s web address), number and pattern which compares the input with an arbitrary regular expression.

Another good example is input type="date",