Use Only One <main> on a Page

That’s it. That’s the meat of the post. The title covers it all. You don’t need to read any further. You are, of course, welcome to continue since I spent all this time writing it.

Definition

For those who aren’t familiar with <main>, the element is intended to be a container for the primary content of your page. It’s already implemented in browsers, so you can use it today. The W3C HTML 5.1 draft specification describes it thusly:

The main content area of a document includes content that is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, copyright information, site logos and banners and search forms (unless the document or applications main function is that of a search form).

Richard Clark explains the element in more human-readable detail over at HTML5 Doctor.

Multiple Content Areas

If you are in a scenario where you have a blog index, or an article index, you don’t need multiple <main> elements. You can wrap the overall index in the <main> and each abstract can be wrapped in <article>:

<body>
	<header></header>
	<main>
		<h1>Blogtastic!</h1>
		<article>
			<h2>Locally-Sourced Cupcake Flavor Profiles</h2>
		</article>
		<article>
			<h2>Artisanal Cocktail Mixers</h2>
		</article>
		<article>
			<h2>Beard Waxing Tips</h2>
		</article>
	</main>
	<footer></footer>
</body>

Why It Matters

You may wonder is why it’s important to keep the <main> to one instance per document.

For Users

As an element, <main> exists to provide a direct mapping for the ARIA landmark role of the same name. The other landmark roles already have corresponding elements with matching native semantics, but the main role did not.

If you’ve read my blog long enough, you may know that ARIA is a spec designed to add important accessibility information to a page for users, both with and without assistive technology (AT). In this case it allows a user to jump to the meat of the page with a single keystroke, much like a “skip navigation” link does on many sites.

Having more than one <main> can be confusing to users of AT. While the element is relatively new, anecdotal examples show a potential trend of confusing users. Screen readers don’t announce the number of <main> elements, so if there is more than one a user may not know if he/she is in the first, the second, or even that there are more.

This means landmark navigation can prove problematic if a user presses a key to go to the <main>, assumes he/she is on the only one, and then pops back into the navigation area to move to another page. In this scenario, entire swaths of also-primary content would be missed by the user.

The Spec

While the ARIA spec says you should not use more than one role="main" on your page, the HTML specification takes this a step further and says you must not use more than one <main>:

Authors must not include more than one main element in a document.

Authors must not include the main element as a descendant of an article, aside, footer, header or nav element.

The HTML validator will also throw an error if there is more than one <main> on a page.

Potential for Confusion

The WHATWG spec differs from the W3C spec in that not only does it allow multiple <main> elements on a page, it encourages it.

For the reasons outlined above you should disregard this. There is an open bug report to have the WHATWG definition align with the W3C definition.

Disclosure

In the interests of full disclosure, I am an invited expert to the W3C HTML Working Group and I voted in favor of <main> as originally proposed (with only one instance per page). I also wrote about my frustrations with the different approaches by WHATWG, W3C and browsers on implementing it back in 2012.

Update: April 20, 2016

It looks like Microsoft Edge is also expecting a single <main> per page, based on the wording, though I doubt the browser will break if multiples are erroneously used.

For example, using the <main> element, developers can provide a hint to assistive technology indicating where the primary content is. This makes it easier for their users to get to this content quickly from anywhere on the page. This experience will light up in Microsoft Edge and Narrator, and in other browsers, with assistive technologies supporting those roles.

3 Comments

Reply

[…] Используйте только один <main> на странице […]

Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №177 (14 — 20 сентября 2015) - itfm.pro; . Permalink

Leave a Comment or Response

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>