Programming

W3C Markup Validation Service adds experimental HTML5 support

    Meitar Moscovitz
    Share

    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>
<html>
<head><title>HTML 5 Markup Validation Test</title></head>
<body>
    <p>I'm an HTML 5 document.</p>
</body>
</html>

    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>
</div>

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

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

    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.