Can I use multiple main elements in a multipage document?
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 thehidden
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.
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.