语义HTML：哪个是标题，哪个是sub-heading？

Question

我遇到这样一种情况，我会有很多内容的小标题，而在它的正下方是一个更长的标题（有时甚至是一个句子），更大的文本，然后是标准段落文本。这是我正在谈论的示例：

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> 将第一部分设为标题元素，并将第二部分设为段落（如您在我的示例中所见）。但这是正确的吗？较大的文字肯定是人们最有可能首先阅读的内容，但较小的文字是该部分更好的标题。

我的问题是我是否擅长这个，或者我应该交换它，让小文本成为段落，大文本成为标题标签？

此外，我想知道我是否也应该将这两个 "headings" 包装到一个 <header> 标签中？

Answer 1

主要规则 在处理 HTML 语义时永远不会在 HTML 的表示部分起作用。这就是为什么我们有 CSS.

的原因

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

更多详情：https://www.w3.org/WAI/standards-guidelines/wcag/

所以我建议以正确的方式保持标题和 sub-heading 正确的语义。考虑 CSS.

的演示文稿

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

Answer 2

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

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

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

Answer 3

阅读 whatwg.org 上的 HTML 规范，这似乎正是 hgroup 元素的用途。在您的情况下，“正确”标记类似于：

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

hgroup 标签基本上允许您编写多个 header 元素，同时仅“计算”第一个元素以用于文档大纲目的。随后的只是审美。根据规范的示例用例是“字幕”、“标语”等

语义HTML：哪个是标题，哪个是sub-heading？

Semantic HTML: Which is the heading, which is the sub-heading?

html

semantic-markup