Question

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

我知道通常没有理由不从h1开始并从那里开始工作。

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

与此同时，这不是严格意义上的，是吗？

这里有最好的做法吗？（我主要关注屏幕阅读器看起来最好的东西）

Answer 1

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

事实上，HTML5 spec甚至包含一个示例，其中所有标题都是<h1>，使用新的<section>标记相互区分。几年前这看起来很疯狂。

我仍然认为至少有一个<h1>包含文章标题是一种好习惯。但边栏通常不需要任何特定级别的标题。没有人关心 - 甚至不是搜索引擎 - 无论是从侧边栏中的<h1>还是<h4>开始。只需确保一些层次感，以帮助屏幕阅读器的人。除此之外，不管你想做什么。

Answer 2

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

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

对于谷歌和其他搜索引擎，如果“导航”和“我的惊人标题”都是h1，那么它们同样重要，这在语义上并非如此。

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

Answer 3

Depents。我认为一些搜索引擎认为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 roles。）

Answer 5

您可以使用list然后使用类在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>

html标题总是要从1开始算起来吗？

5 个答案: