<main> was formally added to the W3C HTML specification. Now that the dust has settled, it’s about time we dive in to find out where and when it’s appropriate to use
<main>. Let’s get started.
The inclusion of a main element (or similar) has long been debated in the working groups with authors and others often questioning why we had new elements such as
<footer> but no element to accurately describe the primary content of a page.
Steve Faulkner, an accessibility consultant and new doctor in residence, undertook the hard graft of carrying out research, gathering data and use cases, and speaking to implementers to get them interested. As Steve explains, he talked to:
as many implementers (both general browser implementers and accessibility implementers), developers, authors and users as I could and got advice and input from them. I went where the various people hung out; on IRC, mailing lists, twitter, blogs, conferences — anywhere.
The proposal was accepted in November 2012, and
<main> was then rolled into the HTML5.1 specification. Recently, it was added to the HTML5 specification following no objections. Lets have a look at how the spec describes
The primary purpose of
<main> is to map ARIA’s landmark role
main to an element in HTML. This will help screen readers and other assistive technologies understand where the main content begins. The W3C spec describes
<main> as representing:
The main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.
<main> element is now included in the HTML specification, the
<body> element has reverted to its HTML4 definition:
The body element represents the content of the document.
One important facet of
<main> is that it can only be used once per page. Jeremy Keith wrote to the working group to understand why this is the case (rather than allowing multiple
<main>s). Although I won’t go into detail, the discussion is an interesting read.
As per the spec, the W3C validator throws an error if you attempt to use multiple
<main> elements per document.
Another stipulation of
<main> is that it can’t be used as a descendant of an
<main> isn’t sectioning content, it doesn’t affect the document outline in the same way
Just as with the introduction of many other new HTML5 elements, not all browsers recognise
<main> or have preset styles for it. You’ll need to ensure it displays as a block level element in your CSS:
Of course, if you use the html5shiv,
<main> is now baked in directly.
<main> on HTML5 Doctor
The easiest way to implement
<main> is to replace that
<div> that you've likely got with an
class of something like
So what does that look like in practice? Well, here's our pre-
<main> markup on HTML5 Doctor:
<body> <header role="banner"> [...] </header> <div id="content" class="group" role="main"> [...] </div> <footer role="contentinfo"> [...] </footer> </body>
And here's what it's like now:
<body> <header role="banner"> [...] </header> <main id="content" class="group" role="main"> [...] </main> <footer role="contentinfo"> [...] </footer> </body>
Yes, it's really that simple. With any luck, it'll take you less than five minutes to implement.
The WHATWG Version
The WHATWG definition of
<main> differs from the W3C version in that the element has no meaning. It's merely a styling hook (like a
<div> with a new name) and represents its children.
The main element can be used as a container for the dominant contents of another element. It represents its children.
We recommend using the W3C version of
<main> as described above.
They have all mapped the ARIA
role="main" to the
<main> element so assistive technologies can now recognise the
<main> element without issue.
As you've seen, it's super easy to get up and running with
<main>. It only takes a few minutes, so now really is the time to start adding it to the sites you're developing.
If you aren't sure when or where to use
<main>, be sure to ask us in the comments and one of us will try to help you out.