Question

我正在使用jQuery Mobile＆＃34; multipage＆＃34;文件，可能有几个页面＆＃34;编译为单个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验证器给出了一个错误，说＆＃34;文档不能包含多个主要元素。＆＃34;

据我所知，w3c标准每个文档只允许一个<main>。但是，role="main"（映射到<main>）的aria标准确实允许多个主要元素作为DOM后代，假设每个元素都与不同的文档节点相关联。（https://www.w3.org/TR/wai-aria/roles#main）。

将这些jQuery Mobile [data-role='page'] div计为＆＃34;不同的文档节点＆＃34;？如果一次只有一个元素暴露给最终用户，我可以拥有多个<main>元素吗？

（请注意，非活动jQuery Mobile页面位于文档<body>中，但隐藏在display:"none"中。）

Answer 1

2018-10-10更新

HTML标准现在声明了以下要求：

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

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

现在答案是，您不能在文档中包含多个main元素 - 除非其中只有一个元素缺少hidden属性。

现在，https://validator.w3.org/nu/和https://checker.html5.org/都会报告错误。

W3C HTML检查程序（验证程序）的维护者。我不熟悉jQuery Mobile多页文档，但似乎每个逻辑文档只向用户公开一个main元素，那么你就符合要求的精神。

W3C检查器对此更为严格，因为通常每个文档有多个main通常是个坏主意。但是，当你给检查器一个URL来检查它时，它只查看那里的静态HTML源代码而不执行任何JavaScript，因此在某些情况下可能无法真正看到实际用户会看到的非常准确的表示。 / p>

我的意思是，例如，在这里的问题中描述的情况下，用户看到的不是URL中的单个文档，而是一系列逻辑文档。

因此，在这种情况下，您可以尝试使用https://checker.html5.org/检查文档，而不是使用W3C HTML检查程序。对于main，它会检查requirements in the upstream WHATWG spec ~~，这在这方面不如W3C版本~~中的相应要求严格。

~~换句话说，使用https://checker.html5.org/您不会收到多个main元素的错误。~~

Answer 2

main标记的主要目的是帮助屏幕阅读器和其他辅助技术了解主要内容的开始位置。

根据W3C标准，每个文档只能使用一次。如果您尝试为每个文档使用多个main标记，则w3c验证程序将抛出错误。另一件需要注意的事情是，你不能将它用作文章的后代，旁边，页脚，标题或导航元素。

来自W3C HTML Editors Draft：

文档或应用程序正文的主要内容。主要内容区域包含与文档中心主题或应用程序中心功能直接相关或扩展的内容。

main不是分段内容，它不会像文章，部分或导航那样影响文档的大纲。

但根据HTML5 Living Standards：

对a中主要元素的数量没有限制文献。实际上，在许多情况下它会有意义有多个主要元素。例如，一个包含多篇文章的页面元素可能需要指出每个元素的主要内容元件。

我认为归结为搜索引擎优化。如果您不希望自己的搜索引擎优化受到影响，那么我认为您应该避免使用多个main代码，而应使用html中的arai-*角色代码。

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

2 个答案: