HTML 5.1 and the main element

HTML 5 officially reached “candidate recommendation” status at the W3C last month, with the goal of hitting final publication in mid 2014. This means that HTML5 will be “feature frozen” by June 2014: most additions to the spec between now and then will appear as better documentation, improved test suites, and the ironing out of any inconsistencies.

While programmers concentrate on supporting the technological panoply of HTML5, various working groups have moved on to HTML 5.1. That new specification, currently scheduled for publication in 2016, incorporates many efforts that did not make the deadline for 5.0, including Web Workers, Storage, Sockets, improved accessibility, and adaptive development.

Why do we need another element?

The new main element currently hovers between inclusion in the final HTML5 spec and 5.1, depending on how quickly it is implemented in browsers.

main was felt by many developers to be the element missing from HTML5: after all, we had header, footer, aside and nav (based, at least in part, on established web development practices). The concept of main has long been in web pages as an attribute of ARIA landmark roles:

<div role="main">

<!-- the _traditional_ role of main, now superseded by the <main> element -->

</div>

ARIA landmarks allow users with accessibility needs to skip quickly between the important sections of a page: role=navigation demarks the central navigation of a site, for example. role=navigation has its equivalent in the HTML5 nav element, and main fulfills the same need: it contains the main content of the page. Eventually, I’d expect the tag to be used by search engines to narrow their focus on content to be indexed.

Drawn-out discussion and WHATWG politics meant that the tag didn’t immediately make it into initial HTML 5 spec, but it is a part of the 5.1 proposal, and may yet be included in 5.0. It already has browser support (albeit right now in the very limited context of Webkit nightly builds) and a strong community behind it.

Using main

Not surprisingly, main is intended to contain the central content of a web page: as such, there can be only be main tag per page. Most importantly, main cannot be a child element of header, footer, article, aside or nav. The tag should employ an ARIA role of main for long-term compatibility with accessibility devices.

Given those strictures, a typical use of main is shown in the following example:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Big Honkin’ Trucking Company</title>

</head>

<body>

<header role="banner">

<h1>Big Honkin’ Trucking Company</h1>

<nav role="navigation">

<a href="#">Rigs</a>

<a href="#">Routes</a>

<a href="#">Reefers</a>

</nav>

</header>

<div>

<section>

<p>Our trucks are at your service 24/7. 366 days of the year, specializing in long-haul freight and dangerous cargo.

</section>

<main role="main">

<p>Yeah, breaker one-nine, this here's the Rubber Duck, you got a copy on me Pigpen? C'mon.

<p>Ah yeah, ten-four Pigpen, for sure, for sure. By golly it's clean clear to Flagtown. C'mon.

<p>Yeah, that's a big ten-four there Pigpen. Yeah, we definitely got the front door good buddy. Mercy sakes alive, looks like we got us a convoy.

</main>

<aside role="complementary">

<h1>Tweets From The Road</h1>

</aside>

</div>

<footer>

<small>Copyright &copy; 2013 Big Honkin’ Trucking Company</small>

</footer>

</body>

</html>

Note that there’s still a place for the humble div element as a wrapper around the section, main and aside elements. main does not contribute to the sectioning of an HTML5 document.

Developer Resources

Right now the easiest way to enforce browser awareness of main is to employ the most recent version of HTML5shiv in your site code, which just incorporated the element. Otherwise, you could use a little basic JavaScript:

<script>

document.createElement('main');

</script>

Or, even simpler, in JQuery:

<script>

$('<main>');

</script>

If writing support by hand, you will also need to create a basic display value in CSS: main would normally be displayed as a block tag on a page, but browsers don’t know that yet, and will default to presenting the tag inline unless you explicitly state otherwise:

main { display: block; }

Should you use main today?

While main looks to be the standard practice in future, there are a few drawbacks to including the element in your page right now.

For a significant period of time many editors won’t recognize the element. Coda 2 accepts arbitrary nodes, so it will act just fine, but it will be some time before IDEs such as DreamWeaver and SublimeText have plugins or upgrades built for them. (This doesn’t mean that you can’t add arbitrary code in those tools, just that elements like main may not be auto-closed, color-coded or otherwise treated correctly in the context of some IDEs).
Including the element in your page means modification of your CSS and/or JavaScript, as detailed above.

Adding main to your code should be considered an investment in the future. Adapting it into your worklow commits you to making some allowances today while keeping an eye on the element’s development, but it’s usually better to be ahead of the curve and compensating than playing catch-up in two years time.

Conclusion

main is a simple but powerful element. I expect that the approach detailed here will be similar for other elements added to HTML 5.1 over time: embraced by the community and developer tools, supported with an array of shims and hacks, before slowly working their way down to browsers, applications, and final approval by the W3C.

my books

my other blogs

my projects