With HTML5 on its way I thought I’d take inspiration from http://www.w3.org/QA/2008/09/top-500-html5-validity.html who in turn took inspiration from Opera’s QA team and test the front page of a few of Opera’s websites for HTML5 conformity.
Firstly, an important caveat. The HTML5 validator is beta so may have erroneously missed or mis-detected issues. In addition, at the time of writing HTML5 is still a working draft only and public websites should not be expected to support it yet. Not being valid HTML5 means nothing unless the document’s doctype indicates that it’s HTML5, which none of them do at this stage. This is just intended to be a (hopefully educational) “what if” exercise. Having said that, several sites didn’t even validate against current standards – I’m looking at you list.opera.com, widgets.opera.com, bugs.opera.com, portal.opera.com, labs.opera.com and irc.opera.com!
So onto the HTML5 validation results, in no particular order:
- http://www.opera.com (12 errors)
- http://my.opera.com (4 errors)
- http://list.opera.com (20 errors)
- http://widgets.opera.com (4 errors)
- http://dev.opera.com (11 errors)
- http://bugs.opera.com (29 errors)
- http://operamini.com (8 errors)
- http://portal.opera.com (7 errors)
- http://labs.opera.com (6 errors)
- http://help.opera.com (3 errors)
- http://irc.opera.com (3 errors)
- http://snapshot.opera.com (passed)
This is all academic until we see what errors were found and how to correct them, in other words, what are some of the common changes from HTML 4 to 5 that we may encounter in our own websites?
Not surprisingly, the majority are a result of presentation and markup being strictly separated at last. The following were encountered in this exercise:
- Attribute size not allowed on element input.
- Attributes bgcolor, link, alink, vlink not allowed on element body.
- Attribute width not allowed on element table or td.
- Attribute border not allowed on element table or img.
- Attribute bgcolor not allowed on element table, tr or td.
- Attributes cellspacing and cellpadding not allowed on element table.
- Attribute align not allowed on element td or div.
- The center, font and big elements are obsolete.
CSS is the place for presentational items such as these.
Other HTML5-specific errors were mostly as follows:
- Attribute accesskey not allowed on element a.
- Attribute name not allowed on element a. (Use id)
- No whitespace allowed in paths/URIs. (Use %20)
- The acronym element is obsolete. (Use abbr)
- Bad values content-type and cache-control for attribute http-equiv on element meta.
Admittedly this only uses Opera’s websites as an example and they are more compliant than most, but I was still surprised at how little work would be needed to make any of these valid HTML5. I wonder if the folks at snapshot.opera.com know they’re already ahead of the game?
Daniemon's Blog 