Webmonkey

Photo: Horia Varlan/Flickr

HTML5 has several new tags designed to make HTML more semantic — there’s <nav> for navigation elements, <header> for headers, <footer> for footers and now there just might be <main> to wrap around, well, the main content on a page.

The W3C’s HTML Working Group, which is charged with creating HTML, has accepted a proposal to add a draft specification for the <main> tag to HTML. The actual HTML spec hasn’t been updated yet, but you can read through the earlier, unofficial <main> docs.

The proposal has been around for some time, but former W3C HTML editor Ian Hickson opposed it on the grounds that its use case was too close to <article>. Since then the mailing list discussion has turned up enough supporters and use cases for a <main> element — including for a “reader” mode like that offered by Apple’s Safari, or to exclude non-main content from a search — that it looks like it will make the cut (Update: check out this W3C wiki page for more use cases).

It’s unlikely that <main> will make it into HTML5, which is about to reach the stable stage after which no new elements can be added, but it could make it to HTML 5.1, due to be finalized by 2016.

As Mozilla WHAT WG member Henri Sivonen writes on that group’s mailing list, “I think it was unfortunate that didn’t make it to the same round of added elements as <header>, <footer>, <nav> and <aside>… but it’s not too late to add it — browsers update faster than they used to.”

The purpose behind <main> is to give web authors a more semantic way to indicate a page’s main content. In many ways it mirrors what WAI-ARIA does with the “main” role.

In fact, because a <main> element would more or less bring the semantic power of ARIA’s role=main to HTML proper, you can get most of the benefits of the proposed <main> tag today, by just adding the “main” role to your primary content wrapper, something like:

<div role="main">
    <article>
        <h1>Top 10 Linkbait Headlines for Hacker News</h1>
        <time datetime="2012-12-11T03:21:22">December 11th, 2012</time>
        <p>... etc </p>
    </article>
    <div id="comments">
        <article>
            <h5>Comment Title</h5>
            <p>Comment body</p>
        </article>
    </div>
</div>

In this bit of pseudocode the main role tells the user agent — a web browser, search engine spider, etc. — that the primary content of the page is the article and the ensuing discussion in the comments.

So if you can do it already with ARIA why add <main>? The simple truth is that hardly any sites use ARIA roles. Because <main> is simple to use, web developers are more likely to use it and use it correctly (try searching for tutorials on how and when to use <article> and <section> to see the opposite effect), which in turn makes it a more reliable indicator for search engine spiders.