在多页文档中,我可以使用多个主要元素吗?

19
我正在处理一个使用jQuery Mobile“多页面”文档的站点,其中可能有几个作为单个html文档的div编码的站点“页面”。以下是基本结构:


<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> 

我想使用html5中的<main>元素,但w3c验证器给出了一个错误,说“一个文档中不能包含多个主要元素。”

我知道w3c标准只允许每个文档有一个<main>。然而,对于role="main"(其中<main>被映射到)的aria标准允许"多个主要元素作为DOM后代,假设每个元素与不同的文档节点相关联" (https://www.w3.org/TR/wai-aria/roles#main)。

这些jQuery Mobile [data-role='page'] div是否算作"不同的文档节点"?如果仅有一个元素同时向最终用户公开,那么我可以拥有多个<main>元素吗?

(请注意,未激活的jQuery Mobile页面位于文档的<body>中,但使用display:"none"隐藏。)


访问此网站:https://adrianroselli.com/2015/09/use-only-one-main-on-a-page.html - moh80s
2个回答

17

2018-10-10更新

HTML标准现在规定如下要求:

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

文档不得有多个未指定hidden属性的main元素。

所以现在的答案是,您不能在同一文档中拥有多个main元素,除非它们中只有一个最多缺少一个hidden属性。

https://validator.w3.org/nu/将报告错误。


先前的答案

作为W3C HTML检查器(验证器)的维护者,我不熟悉jQuery Mobile多页面文档,但似乎如果每个逻辑文档仅向用户公开一个main元素,则符合要求的精神。

W3C检查器对此更严格,因为通常在一个文档中有多个main通常是个坏主意。但是话虽如此,当您给检查器提供要检查的URL时,它仅查看静态HTML源文件,并不执行任何JavaScript,因此在某些情况下可能无法真正看到实际用户将看到的非常准确的表示。

我的意思是,在这里描述的情况中,似乎用户看到的不是URL上的单个文档,而是一系列逻辑文档。

因此,在这种情况下,您可以尝试使用https://checker.html5.org/来检查文档。对于main,它针对上游WHATWG规范中的要求进行检查,这些要求在这方面比W3C版本的相应要求更不严格。

换句话说,使用https://checker.html5.org/,您将不会因多个main元素而出现错误。


感谢 @sideshowbarker 的回答。看起来 https://checker.html5.org/ 对于多个‘main’元素实际上会产生与 https://validator.w3.org 相同的错误。我还注意到,w3c检查器对于使用“role =“main””超过一次并不会给出错误(甚至是警告)。为什么“role =“main””没有得到与‘<main>’相同的处理?另外,为什么是错误而不是警告呢? - jghificationify
1
看起来 https://checker.html5.org 实际上会为多个 main 元素提供与 validator.w3.org 相同的错误... 噢,对不起——请现在再试一次,因为我刚刚推送了一个修复到 https://checker.html5.org。 - sideshowbarker
2
至于为什么多个role =“main”不会出现错误或警告,那是因为没有规范说明HTML文档不应该使用多个role =“main”,而W3C HTML5推荐规范明确规定*作者不得在一个文档中包含多个main 元素*。 - sideshowbarker
2
至于为什么W3C检查器发出的消息是错误而不是警告,那是因为在这种情况下,W3C规范说“必须不允许”。如果它改为说“不应该”,那么这个消息就会变成一个警告。 - sideshowbarker
1
没有规范说明HTML文档不应该或者不能使用多个role="main"。这句话的意思是什么呢?以下引用可能会解答您的问题:“在任何文档或应用程序中,作者应标记一个元素具有主要的角色,而不是超过一个。” https://www.w3.org/TR/wai-aria/roles#main - jghificationify
显示剩余2条评论

2
main标签的主要目的是帮助屏幕阅读器和其他辅助技术了解主要内容从哪里开始。根据W3C标准,每个文档应该只使用一次main标签。如果您尝试在一个文档中使用多个main标签,则W3C验证器将会抛出错误。另一个需要注意的事项是,您不能将其用作文章、侧边栏、页脚、标题或导航元素的后代。引用自W3C HTML编辑草案:“文档或应用程序正文的主要内容。主要内容区域包括直接与文档的中心主题或应用程序的中心功能相关或扩展的内容。”main不是节段内容,它不会像文章、节或导航那样影响文档的大纲。但是根据HTML5 Living Standards,在文档中可以有多个main元素,没有限制。实际上,有很多情况下需要多个主要元素。例如,具有多个文章元素的页面可能需要指示每个这样的元素的主要内容。我认为这归结于SEO。如果您不想影响您的SEO,则应避免使用多个main标签,而应该在您的HTML中使用arai-*角色标签。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接