html header 总是必须从 1 开始计数吗？

Question

我说的是正确的语义标记。

我知道通常没有理由不从 h1 开始，然后从那里开始往下走。

但是，如果我正在构建类似侧边栏的东西，它有自己的稍微独立的层次结构，那么最佳实践是什么？我知道我可以从 h1 开始并使用 css 规则来区分侧边栏 h1 和主 h1，但如果我从 h3 开始，可能更有可能我不必编写那么多 css，因为它会直接匹配，或者至少更接近主 h3。

同时，这也不是严格意义上的语义，不是吗？

这里有最佳实践吗？ （我主要关心屏幕阅读器看起来最好的）

Answer 1

有些人认为跳过标题级别是不好的做法。这种观点非常普遍，以至于它实际上在 HTML 4.01 中提到过规格（参见绿色文本）。但规范并没有说你不应该跳过级别。

事实上， HTML5 规范 甚至包含一个示例，其中所有标题都是

，使用新的

标记相互区分。几年前，这看起来很疯狂。

我仍然认为至少有一个包含文章标题的

是一种很好的做法。但侧边栏通常不需要任何特定级别的标题。没有人关心 - 甚至搜索引擎也不关心 - 无论您是从侧边栏中的

还是

开始。只要确保有某种层次感即可，以帮助使用屏幕阅读器的人。除此之外，想做什么就做什么吧。

Answer 2

当您考虑标题时，请忽略 CSS 和样式。这完全取决于页面标题的重要性。

就我个人而言，我最多会在大约 h3 处开始侧边栏标题，有些甚至从 h5 开始。文档中标题的权重应决定相应的级别。例如，相当不重要的标题“Navigation”不应该是 h1。

对于 Google 和其他搜索引擎来说，如果“Navigation”和“My Amazing title”都是 h1，那么它们同等重要，但语义上并非如此。

一旦确定了标题的语义级别，您就可以深入研究并使用 CSS 设计它们的样式，以获得您认为适合您的设计的尺寸。为了避免开发人员产生错误的印象，他们确实应该将所有标题的默认字体大小设置为相同。

Answer 3

依赖。我认为有些搜索引擎认为 h1 比 h2、h3 等更重要。但对于编码来说这并不重要。

Answer 4

我认为使用 CSS 后代将是推荐的方式。不用担心编写“太多”CSS。使用 CSS 定义的布局越明确，布局就越灵活。我会使用侧边栏 ID 作为主选择器。

<style>
  h1 {
    font-size: 2em;
  }

  #sidebar h1 {
    font-size: 1.1em;
  }
</style>

并在代码中定义它，如下所示：

<div id="sidebar">
  <h1><!-- sidebar H1--></h1>
</div>
<h1>Page Title</h1>

此外，出于可访问性的原因，我建议仅使用 h1 一次，仅将其用于主要内容的标题。同样，仅将 h2-h6 用于内容副标题。 （请参阅 WAI-ARIA 角色s 了解菜单-具体标记）。

Answer 5

您可以使用列表，然后使用类在 CSS 中格式化它们，即使这也不是很语义化：

<ul>
  <li class="level1">Level 1</li>
  <li class="level2">Level 2</li>
</ul>

<style>
  .level1 { font-size: 1.2em; }
  .level2 { font-size: 0.8em; }
</style> 

段落标签可能更语义化：

<p class="level1">Level 1</p>
<p class="level2">Level 2</p>

<style>
  .level1 { font-size: 1.2em; }
  .level2 { font-size: 0.8em; } 
</style>