在 li 标签中嵌套标题标签答案

【问题标题】：Nesting heading tags within li tags在 li 标签中嵌套标题标签
【发布时间】：2014-07-22 06:23:36
【问题描述】：

是否可以在 HTML5 nav 元素内的列表项标记中嵌套标题标记以使导航列表项显示在大纲中？这可以验证，但在导航列表项上有一个标题在语义上是否正确？有什么方法可以让导航项显示在 HTML5 的大纲中？还是我应该关心这个？

【问题讨论】：

w3c 验证器说这很好。文档没有说反对。
导航中有标题是怎么回事？由于 SE 优化，不，这是个坏主意。 H标签用作下面文本的结论。 H1 应位于顶部、可见且位于单个副本中。 h2 在 h1 之后，描绘它的文本，将站点分隔在更小、更具体的部分。 SE 使用它们来获取信息，它们是标题、描述和关键字中最“强大”的标签：我在搜索输出和项目的关键字中看到 h1、h2 和标题。对h3-h6一无所知，他们很少。也许，您可以在导航中使用 h3-h6，但为什么呢？

【解决方案1】：

HTML5 语法规则允许标题元素 h1、h2 等在 li 元素中。然而，它（像所有 HTML 规范一样）将标题元素定义为标题为某事。这在早期的规范中是隐含的，但在 HTML5 中更加清晰，它定义了标题如何参与将文档划分为部分。空白部分的标题虽然正式有效，但没有任何意义，除非作为暂时状态，内容尚未插入，将在以后的版本或脚本中添加。

从技术上讲，使用<nav><li><h2>foo</h2></li>...</nav> 会将“foo”放入大纲中，就好像文档有一个标题为“foo”的部分。但是，即使 HTML5 大纲有一些支持，您也几乎不会获得任何东西。他们没有；见他HTML5 Document Outline is a dangerous fiction。

【讨论】：

【解决方案2】：

我的答案是制作自己的 div 并将导航项包装在其中。因此，您可以更改字体大小以及您愿意从中做出的所有其他事情。忘记标题标签是我推荐的，我不会在列表中看到它是一个有用的元素。

在 CSS 中：

.myDiv {
   font-size: 20px;
   display: block;
   border: 2px solid black;
}

然后将其赋值给 HTML

<div class="myDiv">Home</div>
<div class="myDiv">About</div>

等等。希望这会有所帮助，并且我理解您的问题！

【讨论】：

这并没有解决问题。这是关于大纲的。