Menu
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".)
609
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.
Definition and Usage Note: There must not be more than one <main> element in a document. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.
The HTML <main> Tag is used to given the main information of a document. The content inside the <main> element should be unique for the document. Which includes the sidebars, navigation links, copyright information, site logos, and search forms. Note: The document must not contained more than one <main> element .
There are four required tags in HTML. These are html, title, head and body. The table below shows you the opening and closing tag, a description and an example.
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
mainelement that does not have thehiddenattribute 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.
196
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.
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
