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 squeaked just over the line to make it into HTML5, largely at the insistance of developers, who felt it to be the last important element missing from the specification: 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>That's now replaced by:
<main role="main">
<!-- the same content -->
</main>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.
<main> has excellent support across all browsers, with the support of IE, which does not recognize the element, even in IE 11. However, there are ways around this, as I'll show below.
Using main
Not surprisingly, <main> is intended to contain the central content of a web page: as such, there can be only one <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>
<main role="main">
<p>Our trucks are at your service 24/7. 366 days of the year,
specializing in long-haul freight and dangerous cargo.
<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>
<small>Copyright © 2013 Big Honkin’ Trucking Company</small>
</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:
document.createElement('main');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; }I'd like to thank @stevefaulkner for his editorial assistance; you may want to follow up this article with his very helpful piece on the HTML 5.1 Nightly specification. Photo by 2nd photoclub, licensed under Creative Commons
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
