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

标签 html jquery-mobile w3c-validation wai-aria

我在一个带有 jQ​​uery 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" 的 aria 标准(<main> 映射到的)确实允许“多个主要元素作为 DOM 后代,假设每个元素都与不同的文档节点相关联”(https://www.w3.org/TR/wai-aria/roles#main)。

执行这些 jQuery Mobile [data-role='page'] div算作“不同的文档节点”吗?我可以有多个 <main>如果一次只向最终用户公开一个元素?

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

最佳答案

2018-10-10更新

HTML 标准现在规定了以下要求:

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.

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

https://validator.w3.org/nu/否则现在会报告错误。


上一个回答

这里是 W3C HTML 检查器(验证器)的维护者。我不熟悉 jQuery Mobile 多页文档,但似乎如果每个逻辑文档只向用户公开一个 main 元素,那么您就符合要求的精神。

W3C 检查器对此更加严格,因为通常每个文档有多个 main 通常不是一个好主意。但是也就是说,当你给检查器一个 URL 来检查时,它只查看那里的静态 HTML 源并且不执行任何 JavaScript,因此在某些情况下可能不会真正看到实际用户将看到的内容的非常准确的表示。

我的意思是,例如,在此处问题中描述的情况下,用户看到的似乎不是 URL 上的单个文档,而是一系列逻辑文档。

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

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

关于html - 我可以在多页文档中使用多个主要元素吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40141361/

相关文章:

w3c-validation - CSS3 box-shadow 属性不验证?

html - html 文件中的 UTF-8 字符编码错误

javascript - 在 Javascript 中将 PDF 转换为 Base64 编码的字符串

android - @media 屏幕不为移动设备呈现

google-maps-api-3 - jQuery Mobile + jQuery UI 谷歌地图 + 融合标记

ios - phonegap 推送通知显示 Xcode 中的错误

jquery-mobile - jQuery Mobile slider /旋转木马

xml - 在本地托管 W3 XML 架构文件

html - 图标不显示

jquery - 如何在 jquery 中创建固定且独立的菜单