W3C Markup Validation Service adds experimental HTML5 support

A few days ago, the W3C added experimental support for HTML5 to their online markup validation service. There’s been an HTML5 validator available at Validator.nu for a while now, but the addition of HTML5 validation to the W3C’s own site is an important catalyst that is arguably overdue.

There are two basic ways to trigger the validator’s HTML5 parser. Naturally, one way to do it is to explicitly switch the validator into its “HTML5 (experimental)” mode by selecting that option from the “DOCTYPE” menu. (Or, if you’re using some other tools that link to it, use the doctype=HTML5 key/value pair in a URI’s query string.)

The simpler method is to just specify an HTML5 DOCTYPE at the top of your document and let the validator detect that automatically. Here’s one of the simplest HTML5 documents that will successfully validate. Note the very short DOCTYPE at the top.

<!DOCTYPE html>
<head><title>HTML 5 Markup Validation Test</title></head>
    <p>I'm an HTML 5 document.</p>

Proponents of HTML5 say the specification simplifies unnecessary complexity and modernizes the HTML language so it supports the needs of today’s web sites.

To that end, the HTML5 specification adds elements such as video that are used to—you guessed it—embed video into a web page in a straightforward manner. The video element behaves much like an img element. Like img elements, video elements take a required src attribute that points to a video resource (such as a .mov or .ogg file). Unlike img elements, video elements are not self-closing (“void”) elements so you can (and probably should) provide some alternative content to the embedded video. (Think <noscript>). There’s also a complimentary audio element.

In addition to new embedded content and interactivity, HTML5 also adds a host of additional semantic elements. Among the more unfamiliar tags are <header>, <section>, <nav>, and <aside>, all of which are pretty self-explanatory.

Today, these sorts of structures are often implemented in HTML4.01 as a mishmash of nested <div>s or lists and rely mostly on conventional use of the class or id attributes to provide semantic richness. For instance, whereas we might create a header with a headline in it like this in HTML4.01:

<div id="Header">
    <h1>I'm a headline in a header!</h1>

In HTML5 we can replace the semantically meaningless <div> with a semantically meaningful <header>.

    <h1>I'm a headline in a header!</h1>

I’m excited about this announcement because having the W3C Markup Validation Service support HTML5 puts a new tool into the hands of front-end developers. That’s the kind of thing that needs to happen for adoption of the new technology to grow. Now many more front-end developers (myself included) can more easily experiment to learn about what’s changed in HTML5.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.para-diddledesign.com somecallmejosh

    I’m pretty excited about HTML5. Are we showing signs of support from the browsers yet? IE6?

  • http://MeitarMoscovitz.com/ Meitar

    @somecallmejosh: Oh yeah, HTML5 has actually sort of been an implementations-first standards process. The merits of that methodology over others is up for debate, but what it means for you and me is that many of the HTML5 elements are already supported by the browser vendors who have been pushing for the standard. Case in point, Apple’s canvas element has been supported in WebKit browsers for a long time, and Firefox does a ton of the HTML5 forms stuff.

    Unfortunately, as is the case for new standards, not all the browsers support all of the changes from HTML4.01 uniformly, so today we can’t reliably use everything in HTML5 across every browser. But maybe one day we will.

  • http://www.para-diddledesign.com somecallmejosh

    Bummer… post your bets. Who’ll cross the finish line first? CSS3 or HTML5.

  • http://www.evanbot.com ETbyrne

    HTML5 is going to really tie up some loose ends. Looks really promising.