Html 无标题的导航元素--文档大纲
这个问题与文档大纲结构有关,因为它与Html 无标题的导航元素--文档大纲,html,w3c-validation,Html,W3c Validation,这个问题与文档大纲结构有关,因为它与元素中的标题有关。这不是验证的问题 当我为我的web应用验证其中一个页面,并检查显示“文档大纲”的字段时,大纲包括以下内容: [无航向的导航要素] 我不想在我的nav元素中添加标题,因为它对于应用程序的消费者来说,在我的nav上下文中似乎是无关的(它是一个用于页面子部分分页的nav元素);但我确实希望有一个结构良好的文档大纲 所以我的问题是多方面的: 为什么大纲包括这个 向导航元素添加标题的正确方式是什么 是否需要向导航元素添加标题?因为在大多数网站上,这似
元素中的标题有关。这不是验证的问题
当我为我的web应用验证其中一个页面,并检查显示“文档大纲”的字段时,大纲包括以下内容:
[无航向的导航要素]
我不想在我的nav元素中添加标题,因为它对于应用程序的消费者来说,在我的nav上下文中似乎是无关的(它是一个用于页面子部分分页的nav元素);但我确实希望有一个结构良好的文档大纲
所以我的问题是多方面的:
- 为什么大纲包括这个
- 向导航元素添加标题的正确方式是什么
- 是否需要向导航元素添加标题?因为在大多数网站上,这似乎不是一种常见的做法
- ,很像正文、文章、章节和旁白。虽然不是必需的,但每个部分都应该有一个标题
- 正确的方法是使用h1,h2。。。元素,与任何其他剖切元素一样
- 不,没有必要这样做。如果你真的关心提纲,你可以添加一个提纲,然后用CSS隐藏它,但是完全忽略标题没有什么错
文档生成的大纲对验证没有影响。文档可以验证为HTML5,同时生成与作者预期完全不同的大纲。但是在验证的上下文中,任何分段元素都不需要标题。这是因为
nav
元素是在中定义的,并且分段应该有标题
关于文件大纲:
截面内容元素或截面根元素的大纲由一个或多个可能嵌套的截面的列表组成。节是与原始DOM树中的某些节点相对应的容器每个节可以有一个与之关联的标题,并且可以包含任意数量的嵌套节
-
注意can这个词-它们不是必需的。如果需要,验证程序将抛出警告和错误,而不是一些友好的注释来提醒您缺少标题
因此,要回答您的问题: 为什么大纲包括这个 它只是一个友好的提醒,提醒你没有标题。例如,以防您希望出现标题,但忘记添加标题 向导航元素添加标题的正确方式是什么 这完全取决于你想要实现什么。HTML5规范本身给出了以下示例:
<nav>
<h1>Navigation</h1>
<ul>...</ul>
</nav>
航行
…
是否需要向nav
元素添加标题?因为在大多数网站上,这似乎不是一种常见的做法
一点也不。这完全是可选的。有些人可能会争辩说,在所有章节中添加一个标题对SEO来说都是好的,但这完全取决于你。如果您确实想添加标题,但不想显示标题,则始终可以使用CSS隐藏标题。没有标题的nav元素不是HTML一致性错误。一致性检查器中提供的大纲视图仅提供信息 @詹姆斯·唐纳利的答案很准确。我只是想补充一点,我通常会这样做:
<nav>
<h1 class="v-h">Site Navigation</h1>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</nav>
这使得标题在呈现的HTML内容中不可见,但允许屏幕阅读器“查看”内容
参考资料:请发布您的代码,以及您要验证的文档类型?可能重复的文档类型不是重复的问题,您链接的问题是关于验证警告的。我的问题是关于文档大纲结构的。谢谢@James Donnellya根据向
nav
元素添加标题的建议示例,页面带有两个h1
标题,这对SEO有负面影响。你能在回答中解释一下吗?(即使您将其更改为h2
标题的逻辑结构存在问题)您如何处理页面中的两个h1
s?(一个站点导航
&一个页面主标题
)@Pmpr不知道你的意思。您可以根据自己的喜好多次重复使用该类,尽管我不认为您希望直观地隐藏您提到的两个标题。我假设您不想隐藏页面的主标题,因此您不会将.v-h标题应用于主页标题。隐藏和使用该类对我来说并不重要。使用您的解决方案意味着您的页面中有2个h1,这是wrong@Pmpr页面中有2个h1元素并没有错。在同一根或内容节中有2个H1元素是“错误的”(例如,无效的HTML)。有关HTML文档中多个H1元素的更多信息,请参阅(这不是唯一一篇解释这一点的文章,但这是一篇相当不错的文章)。
.v-h {
position: absolute !important;
height: 1px; width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}