jco*_*ton 6 html accessibility semantic-markup html-heading
我正在构建一个动态包含在页面上的HTML片段.该片段看起来像这样:
<article>
<h2>Title</h2>
<p>Content</p>
</article>
问题是我无法知道文档大纲中的哪个部分将被包含在内.它可能直接出现在<h1>,或者它可能嵌套在几个深层次的下面<h4>.换句话说,我的大纲可能如下所示:
<h1>
<h2>
<h3>
<h2>
<h2>
很合乎逻辑.或者它可能看起来像这样:
<h1>
<h2>
<h2>
<h2>
<h2>
不那么合乎逻辑.或者甚至可能看起来像这样:
<h1>
<h2>
<h3>
<h2>
<h2>
<h2>
彻头彻尾的奇怪,我无法知道或控制它!
我不关心样式,只关注语义.
我认为最好的解决方案是在<h1>每个地方使用s并让分段元素按照新的HTML5文档大纲处理语义,但是我的研究建议我反对,因为没有客户实际上支持这种概述方法.那么什么是最好的解决方案？
在使用脚本来解决问题的评论中提出了一些想法.这些可以工作,但我想我想知道是否有一个合理的解决方案,不需要增加代码的复杂性,我认为浏览器应该自己做的事情.
假设,如果无论出于何种原因这样的脚本解决方案是不可能的,那么使用<h1>s 创建一个扁平轮廓而不是用不正确嵌套的子级创建一个完全错误的轮廓是否有意义？
就 HTML5 规范而言，您可以使用任何标题元素 ( h1- h6)，只要您始终使用分段元素（如article）。
所有这些片段都是有效的，它们创建相同的大纲，并且它们在语义上是等效的：
\n\n<!-- h1 + h2 -->\n<body>\n <h1>heading for \'body\'</h1>\n <article>\n <h2>heading for \'article\'</h2>\n </article>\n</body>\n<!-- h1 + h1 -->\n<body>\n <h1>heading for \'body\'</h1>\n <article>\n <h1>heading for \'article\'</h1>\n </article>\n</body>\n<!-- h1 + h6 -->\n<body>\n <h1>heading for \'body\'</h1>\n <article>\n <h6>heading for \'article\'</h6>\n </article>\n</body>\n<!-- h5 + h1 -->\n<body>\n <h5>heading for \'body\'</h5>\n <article>\n <h1>heading for \'article\'</h1>\n </article>\n</body>\n因为这些片段中每个分段元素不超过一个标题，所以标题元素的h1工作h6方式类似于（通常建议的）h元素：排名\xe2\x80\x99并不重要。
但是，与往常一样，由于各种原因，某些用户代理可能不遵循此处的规范。如果您也想向这些 UA 传达预期的轮廓，则必须依赖标题元素等级（如 HTML 4.01 中的\xe2\x80\x99s 情况）。这就是规范建议这样做的原因：
\n\n\n\n\n作者应使用标题等级 (
\nh1-h6) 来传达文档结构。
如果无法计算排名怎么办？尽可能做出最佳猜测，并接受不支持完整 HTML5 轮廓算法的 UA 的非理想轮廓。对于支持HTML5\xe2\x80\x99s轮廓算法的UA来说，它可以正常工作。
\n\n\xc2\xb9 猜测如下：
\n\n它永远不应该是 a h1，因为您的代码片段将是一个分段元素，因此它至少从文档中的第 2 级开始（第 1 级将始终是具有body最近的分段父级的任何标题元素）。
根据片段的性质，低标题的可能性很小。例如，如果代码片段是博客文章的评论表单，则它应该与元素位于同一级别article或低一级（如果 it\xe2\x80\x99s 嵌套在 内article），因此通常h2为 或h3。
如果代码片段代表对用户非常重要的内容，则应使用较高的标题，因为使用较低的标题，依赖大纲进行导航的用户可能永远不会访问代码片段\xe2\x80\x99s 内容，因为它可能是“隐藏的”在深层大纲中，用户可能对下面的条目不感兴趣（因此他们可能会跳过整个部分及其所有子项）。
| 归档时间： |
|
| 查看次数： |
109 次 |
| 最近记录： |