The inclusion of a main element in HTML has been the subject of debate for quite a while now. After Steve outlined the use cases, the element has now landed in the draft of the W3C spec. It isn’t in the WHATWG spec yet, but seeing as it is being shipped in browsers, it’s only a matter of time.
But I have some qualms about the implementation details so I fired off an email to the HTML working group with my concerns about the main element as it is current specced.
I’m curious as to why its use is specifically scoped to the body element rather than any kind of sectioning content:
Authors must not include more than one
mainelement in a document.
I get the rationale behind the main element: it plugs a gap in the overlap between native semantics and ARIA landmark roles (namely role="main"). But if you look at the other elements that map to ARIA roles (header, footer, nav), those elements can be used multiple times in a single document by being scoped to their sectioning content ancestor.
Let’s say, for example, that I have a document like this, containing two header elements:
<body>
<header>Page header</header>
Page main content starts here
<section>
<header>Section header</header>
Section main content
</section>
Page main content finishes here
</body>
…only the first header element (the one that’s scoped to the body element) will correspond to role="banner", right?
Similarly, in this example, only the final footer element will correspond to role=”contentinfo”:
<body>
<header>Page header</header>
Page main content starts here
<section>
<header>Section header</header>
Section main content
<footer>Section footer</footer>
</section>
Page main content finishes here
<footer>Page footer</footer>
</body>
So what I don’t understand is why we can’t have the main element work the same way i.e. scope it to its sectioning content ancestor so that only the main element that is scoped to the body element will correspond to role="main":
<body>
<header>Page header</header>
<main>
Page main content starts here
<section>
<header>Section header</header>
<main>Section main content</main>
<footer>Section footer</footer>
</section>
Page main content finishes here
</main>
<footer>Page footer</footer>
</body>
Here are the corresponding ARIA roles:
<body>
<header>Page header</header> <!-- role="banner" -->
<main>Page main content</main> <!-- role="main" -->
<footer>Page footer</footer> <!-- role="contentinfo" -->
</body>
Why not allow the main element to exist within sectioning content (section, article, nav, aside) the same as header and footer?
<section>
<header>Section header</header> <!-- no corresponding role -->
<main>Section main content</main> <!-- no corresponding role -->
<footer>Section footer</footer> <!-- no corresponding role -->
</section>
Deciding how to treat the main element would then be the same as header and footer. Here’s what the spec says about the scope of footers:
When the nearest ancestor sectioning content or sectioning root element is the
bodyelement, then it applies to the whole page.
I could easily imagine the same principle being applied to the main element. From an implementation viewpoint, this is already what browsers have to do with header and footer. Wouldn’t it be just as simple to apply the same parsing to the main element?
It seems a shame to introduce a new element that can only be used zero or one time in a document …I think the head and body elements are the only other elements with this restriction (and I believe the title element is the only element that is used precisely once per document).
It would be handy to be able to explicitly mark up the main content of an article or an aside—for exactly the same reasons that it would be useful to mark up the main content of a document.
So why not?