Can I use multiple main elements in a multipage document?

Asked 19/10, 2016 at 20:55 Answered 20/10, 2016 at 21:23

Solved html jquery-mobile w3c-validation wai-aria

I am working on a site with jQuery Mobile "multipage" documents, where there may be several "pages" of the site that are coded as divs of a single html document. Here's the basic structure:

<body>
    <div data-role="page" id="page1">
        <header>Page 1</header>
        <main>Content...</main>
        <footer>...</footer>
    </div>
    <div data-role="page" id="page2">
        <header>Page 2</header>
        <main>Content...</main>
        <footer>...</footer>
    </div>
</body>

I would like to use the html5 <main> element as shown, but the w3c validator gives me an error, saying "A document must not include more than one main element."

I understand that the w3c standards permit only one <main> per document. However, the aria standards for role="main" (to which <main> is mapped) do allow "multiple main elements as DOM descendants, assuming each of those is associated with different document nodes" (https://www.w3.org/TR/wai-aria/roles#main).

Do these jQuery Mobile [data-role='page'] divs count as "different document nodes"? Can I have multiple <main> elements if only one at a time is exposed to the end user?

(Note that inactive jQuery Mobile pages are in the document <body>, but hidden with display:"none".)

Darrel answered 19/10, 2016 at 20:55 Comment(1)

visit !this website – Theft 15/4, 2020 at 7:7

2018-10-10 update

The HTML standard now states the following requirement:

https://html.spec.whatwg.org/multipage/grouping-content.html#the-main-element

A document must not have more than one main element that does not have the hidden attribute specified.

So the answer now is, you can’t have multiple main elements in a document — unless only one of them at most lacks a hidden attribute.

https://validator.w3.org/nu/ will otherwise now report an error.

Previous answer

Maintainer of the W3C HTML checker (validator) here. I’m not familiar with jQuery Mobile multipage documents but it seems like if only one main element is being exposed to users per logical document, then you’re conforming to the spirit of the requirements.

The W3C checker is stricter about this because in general it’s usually a bad idea to have more than one main per document. But that said, when you give the checker a URL to check it looks only at the static HTML source there and doesn’t execute any JavaScript and so in some case may not really see a very accurate representation of what actual users will see.

I mean, for example, in the case described in the question here, it seems like what users see is not one single document at the URL, but a sequence of logical documents.

So in cases like this instead of the W3C HTML checker you may try using https://checker.html5.org/ to check the document. For main it checks against the requirements in the upstream WHATWG spec, which are less strict in this regard than the corresponding requirements in the W3C version.

~~In other words, using https://checker.html5.org/ you won’t get an error for multiple main elements.~~

Pegboard answered 20/10, 2016 at 7:7 Comment(7)

Thanks @Pegboard for the answer. It appears that checker.html5.org actually gives the same error as validator.w3.org for multiple main elements. I've also noticed that the w3c checker does not give an error (or even a warning) for using role="main" more than once. Is there a reason role="main" does not get the same treatment as <main>? Also, why an error rather than a warning? – Darrel 20/10, 2016 at 19:26

> It appears that checker.html5.org actually gives the same error as validator.w3.org for multiple main elements…oops, sorry about that—please try again now, because I just pushed a fix to checker.html5.org – Pegboard 21/10, 2016 at 3:29

As far as why there’s no error or warning for multiple role="main", that’s because there’s no spec that says HTML documents must not or should not use multiple role="main"—whereas there is a spec (the W3C HTML5 Recommendation) that explicitly states Authors must not include more than one main element in a document. – Pegboard 21/10, 2016 at 4:4

As far as why the message the W3C checker emits for this is an error rather than a warning, that’s because the W3C spec says must not for this case. If it instead said should not then the message would be a warning. – Pegboard 21/10, 2016 at 4:7

> there’s no spec that says HTML documents must not or should not use multiple role="main".... What about this?: "Within any document or application, the author SHOULD mark no more than one element with the main role." w3.org/TR/wai-aria/roles#main – Darrel 21/10, 2016 at 16:36

Thanks again @Pegboard -- checker.html5.org is no longer giving the multiple main elements error. Much appreciated. (btw, you might consider adding a note to the page to inform people that the tool is applying the WHATWG "living standard"--I'd never have known had you not mentioned it here.) – Darrel 21/10, 2016 at 16:46

About w3.org/TR/wai-aria/roles#main thanks, I remember reading that part of the ARIA spec now but for the checker I generally implement just from w3c.github.io/html-aria & that’s also what HTML authors should look to; we should put all the conformance requirements for ARIA in HTML in one place, in w3c.github.io/html-aria even if that means restating some requirements from the ARIA spec. So please consider raising an issue at github.com/w3c/html-aria/issues to ask for that “author SHOULD mark no more than one element with the main role” text to be added. – Pegboard 22/10, 2016 at 8:25

The Primary purpose of the main tag is to help screen readers and other assistive technologies understand where the main content begins.

As per W3C standards it should only be used once per document. If you try to use more than one main tags per document, the w3c validator will throw an error. Another thing to note is that You can't use it as a descendent of an article, aside, footer, header, or nav element.

quote from the W3C HTML Editors Draft :

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 is not a sectioning content, it doesn't affect the outline of the document in the way article, section or nav does.

But according to HTML5 Living Standards :

There is no restriction as to the number of main elements in a document. Indeed, there are many cases where it would make sense to have multiple main elements. For example, a page with multiple article elements might need to indicate the dominant contents of each such element.

I think it comes down to SEO. If you dont want your SEO to be affected then i think you should avoid using multiple main tags and instead go with the arai-* role tags in your html.

Recce answered 20/10, 2016 at 21:23 Comment(0)

Recommended topics

Hot tags