语义 HTML5 中的标头

Question

我正在设计我的 HTML 页面的语义标记。该页面由一个主要内容块和一个侧边栏组成。侧栏中有几个独立的块，如最新消息、链接、统计信息等。每个块都有一个带有块名称的标题：“Statistics”、“Links”等

问题。如果我在header 标记中添加块名称，如<section id="News"><header>News</header><ul>...</ul></section>，它是否在语义上正确使用标记header。

将部分名称放在<h*>标签中是否在语义上正确？

选项之间有什么区别以及为什么要使用其中一个选项？

Answer 1

由于您使用的是分段元素（在您的情况下为section，但您可能希望使用aside），这些部分已经有一个隐式的大纲条目。

您可以使用标题 (h1-h6) 提供明确的条目。

所以是的，您应该使用标题元素 (h1-h6) 来指定每个块的标题（→ 部分）。

此外，您可以使用header 元素。但这是not required（如果您的标题包含的不仅仅是标题，那么使用它是有意义的）。

所以我会选择：

<aside>
  <h1>News</h1>
  <!-- content -->
</aside>

<aside>
  <h1>Statistics</h1>
  <!-- content -->
</aside>

对于复杂的标题：

<aside>
  <header>
    <h1>News</h1>
    <!-- more header content -->
  </header>
  <!-- content -->
</aside>

<aside>
  <header>
    <h1>Statistics</h1>
    <!-- more header content -->
  </header>
  <!-- content -->
</aside>

Answer 2

标题的使用是有效的 - 这就是节的使用方式 - 请参阅此定义以了解节的使用https://stackoverflow.com/a/6941170/3529814

Answer 3

这是完全有效的，但如果它只是一个简单的标题，我会说H* 标签本身就足够了，并且在语义上是正确的。

如果有几个元素描述部分内容，例如标题、描述和日期标记或沿该路径的其他内容，我会将它们包装在 <header> 标记中。