我遇到这样一种情况，我会有很多内容在小文本中有一个标题，在它的正下方将是一个更长的标题(有时甚至是句子(，在更大的文本中，然后是标准的段落文本。这是我所说的一个例子：
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>标签？
处理HTML语义时的主要规则是永远不要在HTML的表示部分工作。这就是我们有CSS的原因。
目前，所有网站都在修改HTML语义以满足WCAG标准。简而言之，这些是开发人员遵循的一些标准，可以帮助有可访问性问题的人轻松访问网络。
了解更多详情 ：https://www.w3.org/WAI/standards-guidelines/wcag/
因此，我建议以正确的方式保持标题和子标题和正确的语义。从 CSS 的角度考虑演示文稿。
我不确定这是否是您正在寻找的答案，但我希望这有助于做出决定。
阅读 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标签基本上允许您编写多个标题元素，同时仅出于文档大纲目的"计数"第一个。随后的只是美学。根据规范的示例用例是"字幕"、"标语"等。
为什么不使用标题层次结构？在您的示例中，如果标记行是标题，则应将其放在 h3 后面。
屏幕阅读器不会向用户呈现 CSS，所以问问自己，"当 CSS 减少时，内容'结构'是否仍然有意义？如果您使用正确的语义，那么结构将被保留，但是当CSS被删除时，模拟样式(如应用于p标签的标题样式(将失去其意义。这意味着屏幕阅读器只会将标语行显示为段落文本，而不是将其显示为子标题。人们使用屏幕阅读器导航或跳过标题，因此 p 标记行不会出现在其标题导航中。
这有意义吗？很高兴澄清任何令人困惑的事情。