Question

W3C没有明确说明我们究竟应该如何使用标题，或者我找不到这样的信息。

资源：

这非常简短，提出了很多问题，例如：

“有些人认为跳过标题级别是不好的做法。他们接受H1 H2 H1，但他们不接受H1 H3 H1，因为标题级别H2被跳过。” - 那么，我们应该跳过它们吗？
设计侧栏时 - 应该使用哪些标题？ H2？
设计页脚时 - 应该使用哪些标题？ H2？
标题是用于列表（如页脚中的帖子列表）吗？
H1只能在页面上使用一次吗？
在设计“帖子列表页面”时 - 每个条目通常由TITLE和EXCERPT组成 - 我们是否应该使用H1作为标题？或H2或DIV？
由于标题是块级元素，我假设链接进入内部？对于应该以不寻常的方式标题标题的span也一样吗？

如果有人能够对此有所了解，那就太棒了:)谢谢。

Answer 1

1.有些人认为跳过标题级别是不好的做法。他们接受H1 H2 H1而他们不接受H1 H3 H1，因为跳过了标题级别H2。“ - 那么，我们应该跳过它们吗？

就像理查德所说，这取决于程序员。一般来说，标题会在您的页面中构建结构，就像您在学校中为纸张制作的大纲一样。有一个网站，根据标题为您创建一个大纲。进一步的WebAIM发现，使用技术like knowing what level they are on的人如此跳跃，可能会使一些人感到困惑。

2.设计侧栏时 - 应该使用哪些标题？ H2？

我通常会添加一个<h2>，以便人们可以更轻松/更快地导航到它。说实话，我没有在一年左右的时间里积极设计一个页面，所以如果我要做某事，我可能会使用ARIA来代替侧栏实际上不需要标题，并指定“互补的“角色。使用HTML5我可以简单地使用<aside>标签，它本身具有互补作用。

3.设计页脚时 - 应该使用哪些标题？ H2？

我通常不会在页脚中使用标题。您可以将contentinfo角色分配给页脚div，也可以再次使用HTML5 <footer>标记，将其置于原生状态。这个blog post on ARIA很有帮助。

4.Headings是用于列表（如页脚中的帖子列表）？

当然，你可以这样做：

<h3>My favorite Movies</h3>
<ol>......</ol>

5. H1应该只在页面上使用一次吗？

长期无休止的辩论。我在训练营中H1应该只用于内容的标题，例如这里只有问题标题。在HTML5小组中讨论过，新标记（例如<section>）重置了我上面提到的层次/轮廓，并且可以使用h1。我不是粉丝或赞成此。

6.设计“帖子列表页面”时 - 每个条目通常由TITLE和EXCERPT组成 - 我们应该使用H1作为标题吗？还是H2或DIV？

我会使用h2的

7.由于标题是块级元素，我假设链接进入内部？对于那些应该以不寻常的方式标题标题的跨度来说是一样的吗？

正确的方法是<h_><a>Words</a></h_>。

Answer 2

您应该阅读＆＃34; Headings and sections＆＃34; HTML5规范。获得正确的标题是可访问性的一个重要方面。

使用标题（和部分），您可以告诉各种用户代理页面的结构，哪些内容属于一起，哪些内容彼此分开。

想想一个有3列的典型网站。在第一列中，您具有站点导航，在第二列中，您具有主要内容，在第三列中，您具有辅助内容。现在，能够看到的人可能会立即掌握有三个区域＆＃34;在页面上，由于不同的背景颜色，边距，边框，等等。但视力受损或盲人无法从页面的图形设计中获得线索。机器（如搜索引擎）也不是。因此，我们使用标题/部分元素，以便他们可以从标记中获取信息（页面的结构）。

每个HTML5文档都有大纲，这是通过使用标题h1 - h6（和hgroup）和/或切片创建的元素（section，article，nav，aside）。您可以将其视为某种TOC。

虽然人们能够通过查看图形设计来了解页面结构，但使用屏幕阅读器和机器的人通过阅读页面轮廓来获得这个想法，例如：

(1.) John Doe's Example Blog
  (1.1) Navigation
  (1.2) My first year at ACME
  (1.3) Recent blog posts

这可能是以下示例文档的大纲：

仅使用标题：

<body>
  <h1>John Doe's Example Blog</h1>
  <h2>Navigation</h2>
  <h2>My first year at ACME</h2>
  <h2>Recent blog posts</h2>
</body>

使用具有根据计算轮廓的级别的切片元素和标题：

<body>
  <h1>John Doe's Example Blog</h1>
  <nav>
    <h2>Navigation</h2>
  </nav>
  <article>
    <h2>My first year at ACME</h2>
  </article>
  <aside>
    <h2>Recent blog posts</h2>
  </aside>
</body>

在所有地方使用h1的分区元素：

<body>
  <h1>John Doe's Example Blog</h1>
  <nav>
    <h1>Navigation</h1>
  </nav>
  <article>
    <h1>My first year at ACME</h1>
  </article>
  <aside>
    <h1>Recent blog posts</h1>
  </aside>
</body>

（后两者在语义上是等价的！）

使用切片元素时，你甚至可以完全省略标题，轮廓仍然是相同的，虽然＆＃34;未命名＆＃34; （这不是很有用！）：

<body>
  <nav></nav>
  <article></article>
  <aside></aside>
</body>

这将是相应的大纲：

(1) (Untitled Section)
  (1.1) (Untitled Section)
  (1.2) (Untitled Section)
  (1.3) (Untitled Section)

您可以使用此online outliner来查看哪些文档会创建哪些大纲。

那么，我们应该跳过它们吗？

为什么你想首先跳过关卡？它可能永远不会好，所以不，你不应该跳过级别。但如果它发生，我不会认为这是一个严重的错误。

但请注意，根据您的跳跃程度，特别是如果您不跳过该级别的所有标题，则可能会创建错误的轮廓。例如，请参阅此简单文档：

<body>
<h1>Interesting stories</h1> <!-- this is the site heading -->

  <h2>My first snow</h2> <!-- this is a story -->
    <h3>What I thought snow would be like</h3> <!-- this is a subsection of that story -->
    <h3>How I experienced it actually</h3> <!-- also subsection -->
    <h3>Why I'm disappointed by snow</h3> <!-- also subsection -->

  <h2>More stories about snow</h2> <!-- this is not part of the story, but a kind of "See also" for the site/page -->
</body>

现在，如果您将上一个h2更改为h3，那么突然之间会发生更多故事＆＃34;部分将成为故事的一个分节。如果您将其更改为h4，则会成为子分段。

设计侧栏时 - 应该使用哪些标题？ H2？设计页脚时 - 应该使用哪些标题？ H2？

这些问题一般无法解答。这取决于您的网站和您的网页和您的内容。但是，在许多情况下，对于一个典型的页面＆＃34; h2将是合适的候选人。页面标题（不要与主要内容标题混淆！）是h1，主要内容是h2，次要内容（侧边栏等）是h2。如果你的页脚需要一个标题（不是每个标题都有），在这种情况下它也会h2。

标题是用于列表（如页脚中的帖子列表）吗？

这实际上取决于内容和背景。

您必须提出的重要问题（一般来说，所有标题决定）：

此内容是否属于＆＃34;到上一个标题？
如果是：
1. 是某种分段吗？ →使用更高一级的标题。使用section元素（以及可选的内部标题）
2. 是否没有自然的＆＃34;子标题＆＃34;对于这个内容？ →请勿使用此处的标题
如果否：使用较低级别的标题，请参阅。使用不是相关切片元素的子元素的切片元素
- （您必须重复此步骤，直到您的标题/部分是其所属标题的子项）。

H1只能在页面上使用一次吗？

不。正如我所解释的那样，你可以在页面上使用h1 all 你的标题（如果你使用了分段元素！）。

设计＆＃34;帖子列表页面＆＃34; - 每个条目通常由TITLE和EXCERPT组成 - 我们应该使用H1作为标题吗？或H2或DIV？

您应该为每个条目使用article元素。因此，您可以自动获得标题（=大纲中的条目），可以这么说，因为article是一个分段元素。现在，您可以使用h1（无论放置article的位置！），或者您可以使用计算的标题级别（如果article是body的直接子级1}}，您使用h2。如果它更深一层，h3。依此类推。）。

使用切片元素和标题，以便创建有用的轮廓。

如果您标记网页，请仅在创建的大纲中查找一分钟：它是否有意义？你是否了解页面的结构，它有哪些部分？层次结构是否正确？此大纲中是否缺少该页面的单独区域/部分？一个部分是一个它不属于的部分的孩子吗？（例如，通常您会看到网站导航是网页主要内容的子项，当然这是不正确的：通常它们应该在相同< / em>级别，都是网站标题的子项。）

Answer 3

<h_>标签从其原始用法的角度来看是多余的。随着CSS的普遍存在，像<h4>这样的标签几乎可以描述所有意图和目的。

如果你有一个包含多个部分的页面，那么在某种程度上表示以某种方式是有意义的，并且在完全采用HTML5 <section id="">标记之前，标题对某些部分非常有用 - 东西阅读源代码。考虑因素可能包括：

搜索引擎优化：如果您将某段文字设为标题，则告诉搜索引擎，“嘿，这很重要！”。这在多大程度上与另一个讨论有关。
代码可读性：如果多个人正在处理项目，标题是了解页面副本中断点的好方法。您可以使用来达到类似的效果，但对某些人来说这是一种矫枉过正的行为。

“有些人认为跳过标题级别是不好的做法。他们接受H1 H2 H1而他们不接受H1 H3 H1，因为标题级别H2被跳过。” - 那么，我们应该跳过它们吗？

这由程序员自行决定。您可能决定使用<h1>作为页面标题，<h2>用于章节标题，但这不是一成不变的。无论如何，您可以使用CSS重新标记标题，因此您可以支持层次结构而不是外观。如果您认为侧边栏与标记云同等重要，请为其提供相同的标题分类。

由于标题是块级元素，我假设链接进入内部？对于那些应该以不寻常的方式标题标题的跨度来说是一样的吗？

这是绝对正确的。

我所说的要点是W3C标准可供参考。使 Web浏览器，RSS阅读器等的开发团队关心它们，因为这意味着它们不必相互讨论新的标记。想象一下谷歌，微软和苹果举行跨党派会谈，讨论何时应使用<h4>或<span>标签......噩梦般的燃料！

如果上述问题2-6 中的主题不是一成不变的，那么常识就是故障安全。那，并与您的同事交谈，并同意前进的方向。很抱歉重复一遍，但标准仅供参考。

希望有所帮助！

官方标题使用原则？

3 个答案: