什么时候将 <h1>-<h6> 放在 <header> 元素中？答案

【问题标题】：When do I put <h1>-<h6> inside an <header> element?什么时候将 <h1>-<h6> 放在 <header> 元素中？
【发布时间】：2014-08-02 21:25:48
【问题描述】：

什么时候将标题放在header 元素中？我无法理解，有时在我看来，每个标题都必须在header 标签之间。

我们以这个侧边栏为例：

如何编码？

<aside>
  <header>
    <h1>How to format</h1>
  </header>
</aside>

或

<aside>
  <h1>How to format</h1>
</aside>

【问题讨论】：

标签： html semantics

【解决方案1】：

查看header元素的规范：

标题元素通常用于包含部分的标题（一个 h1-h6 元素），但这不是必需的。标题元素可以也可用于包装部分的目录、搜索表单或任何相关的标志。

所以你可以在一个页面中有很多页眉元素（它不限于页面顶部），你可以在标题周围使用它，但它是可选的。这意味着你的两个例子都是正确的。

【讨论】：

这两个代码示例（假设aside元素中还有其他内容，如图）形式上是正确的，但是使用h1依赖轮廓算法是“dangerous fiction” .在这里使用 header 元素几乎没有任何好处，作为单个元素的包装器。

【解决方案2】：

<header> 为我们提供了一些附加的语义价值，以便描述一个部分的头部。您可以在网页中使用多个标题，然后每个标题都将成为文档该部分的<header>。因此，使用<header> 取决于该部分的复杂性。它越复杂，标题元素就越需要。 <header> 通常至少包含（但不限于）一个标题标签 (<h1> – <h6>)。

希望对你有帮助

【讨论】：

所以这意味着我可以有一个
元素没有
-
里面？几年前我在 HTML5 医生中读到，如果你有
，你需要在里面有一个
-
。

【解决方案3】：

标题标签用于显示在页面顶部的内容 - 有时称为横幅。因此，当您的页面横幅中出现 h1-h6 标签时，请将它们放入其中。

像页眉和页脚这样的标签基本上只是为了组织健全而重命名了 div。将来搜索引擎和浏览器可能会寻找页眉和页脚标签来帮助他们更好地处理和显示信息。目前，它可以让你避免盯着一堆 div 标签。

<html>
<head>
</head>
<body>
    <header> Web page Banner</header>
    <div>Content</div>
    <footer>Web page bottom </footer> 
<body>
</html>

而不是这个...

<html>
<head>
</head>
<body>
    <div> Web page Banner</div>
    <div>Content</div>
    <div>Web page bottom </div> 
<body>
</html>

【讨论】：