5

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

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

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

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

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

4

5 回答 5

2

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

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

我仍然认为在其中至少<h1>包含一篇文章标题是一种很好的做法。但是侧边栏通常不需要任何特定级别的标题。没有人关心——甚至搜索引擎——不管你是从侧边栏开始<h1>还是从<h4>侧边栏开始。只要确保有某种层次感，以帮助人们使用屏幕阅读器。除此之外，做任何你想做的事。

于 2011-01-07T22:24:40.287 回答
1

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

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

对于 Google 和其他搜索引擎来说，如果“导航”和“我的惊人标题”都是h1s，它们同样重要，但语义上并非如此。

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

于 2011-01-07T22:19:30.403 回答
0

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

于 2011-01-07T22:17:23.203 回答
0

我认为使用 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仅用于内容副标题。role（有关特定于菜单的标记，请参见 WAI-ARIA ）。

于 2011-01-07T22:22:14.477 回答
-1

您可以使用列表，然后使用类在 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>
于 2011-01-09T19:24:59.090 回答