语义 HTML：哪个是标题，哪个是子标题？答案

【问题标题】：Semantic HTML: Which is the heading, which is the sub-heading?语义 HTML：哪个是标题，哪个是子标题？
【发布时间】：2023-03-17 02:46:01
【问题描述】：

我有一种情况，我的很多内容都有一个小文本标题，在它的正下方是一个更长的标题（有时甚至是一个句子），大得多的文本，然后是标准的段落文本。这是我所说的一个例子：

body {
  font-family: Arial, sans-serif;
  max-width: 400px;
  margin: 0 auto;
}
h2 {
  font-size: 12px;
  text-transform: uppercase;
  margin: 20px 0 10px;
}
.tagline {
  margin: 0 0 20px 0;
  font-size: 24px;
}

<h2>Section Title</h2>
<p class="tagline">A tagline... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos dolorem delectus neque est quidem numquam, incidunt corporis temporibus alias fuga.</p>

我最初的直觉是通过<h2> 将第一部分设为标题元素，并将第二部分设为段落（如您在我的示例中所见）。但这是正确的吗？较大的文本绝对是人们最有可能首先阅读的内容，但较小的文本是该部分的更好标题。

我的问题是我对这个很好还是应该交换它，让小文本成为段落，大文本成为标题标签？

此外，我想知道我是否也应该将这两个“标题”包装到 <header> 标记中？

【问题讨论】：

您是在为真正的Section 风格内容拍摄实际的WCAG 合规性，还是希望通过忽略WCAG 来获得SEO 提升（尽管一些“seo 大师”可能会说这可能会适得其反)?
更多地关注 SEO 和可访问性

标签： html semantic-markup

【解决方案1】：

主要规则在处理 HTML 语义时永远不会在 HTML 的表示部分上起作用。这就是我们拥有 CSS 的原因。

目前所有网站都在修改 HTML 语义以满足 WCAG 标准。简而言之，这些是开发人员遵循的一些标准，可帮助有可访问性问题的人轻松访问网络。

所以我建议使用正确的语义以正确的方式保留标题和子标题。考虑用 CSS 进行演示。

我不确定这是否是您正在寻找的答案，但我希望这有助于做出决定..

【讨论】：

是的，我正在尝试与 WCAG 标准相匹配并帮助 SEO。如果我理解正确，基本上你的理解是我需要考虑如果没有应用 CSS 会是什么样子，在这种情况下，将第一部分作为标题是最有意义的。我认为我被困在较大的文本上，可能严格来说是标题，因为它“看起来”应该是这样，但这并不意味着什么。谢谢你，你帮我克制了我的想法。
没问题.. :)

【解决方案2】：

为什么不使用标题层次结构？在您的示例中，如果标语行是标题，则应将其放在 h3 后面。

屏幕阅读器不会向用户展示 CSS，所以问问自己，“当 CSS 减少时，内容‘结构’仍然有意义吗？”如果您使用适当的语义，那么结构将被保留，但使用模拟样式（如应用于 p 标签的标题样式）将在删除 CSS 时失去其意义。这意味着屏幕阅读器只会将标语行呈现为段落文本，而不是将其呈现为子标题。人们使用屏幕阅读器导航或跳转标题，因此 p 标签标记行不会出现在他们的标题导航中。

这有意义吗？很高兴澄清任何令人困惑的事情。

【讨论】：