在 HTML 文档结构中，标题元素（h1–h6）必须按逻辑层级递进；若视觉上“副标题”（如 eyebrow）位于主标题上方，但语义上不构成独立章节，则不应使用 heading 标签，而应改用 包裹非标题文本与主标题，以保障无障碍浏览的准确性。
在 html 文档结构中，标题元素（h1–h6）必须按逻辑层级递进；若视觉上“副标题”（如 eyebrow）位于主标题上方，但语义上不构成独立章节，则不应使用 heading 标签，而应改用 `` 包裹非标题文本与主标题，以保障无障碍浏览的准确性。
在构建语义化、可访问性良好的网页时，标题层级（heading outline）绝不能仅由视觉样式（如字号、颜色、位置）决定，而必须严格反映内容的逻辑结构。WCAG 1.3.1「信息与关系」明确要求：呈现给用户的结构关系（例如上下文中的层级暗示）必须与代码中的语义标记一致。
回到具体场景：一个组件中，“eyebrow”文字（如 “Featured Article” 或 “In the News”）视觉上位于较大主标题（如 “Q3 Financial Results”）上方，但它并非独立节（section）的标题，而是起引导、分类或修饰作用的辅助性文本。此时，若错误地将其标记为 <h3></h3>，而下方主标题使用 <h2></h2>，将导致以下问题：
- 屏幕阅读器导航错乱：用户通过“跳转到下一个标题”快捷键浏览时，会先遇到 h3，再跳至语义级别更高的 h2——这违反了标题嵌套的自然流向（h2 → h3 → h4），造成逻辑断层；
- 文档大纲失真：浏览器或辅助工具生成的标题大纲（outline）会出现“h3 后紧跟 h2”的非法结构，可能被解析为一个空的 h3 节，随后 h2 被误判为新节的顶级标题；
- SEO 与语义混淆：搜索引擎和开发者工具同样依赖正确 heading 层级理解页面结构，错误标记会弱化主标题的权重并干扰内容意图表达。
✅ 正确做法是：放弃对 eyebrow 使用任何 heading 标签，改用语义中立但结构清晰的组合——HTML5 的 <hgroup></hgroup> 元素正是为此设计：
<section>
<hgroup>
<p class="eyebrow">Featured Story</p>
<h2>Breaking: New Climate Policy Announced</h2>
</hgroup>
<p>This is the lead paragraph explaining the announcement...</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill5117" title="HTML Extract"><img
src="https://img.php.cn/upload/skill/000/000/081/179033952939354.jpg" alt="HTML Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill5117" title="HTML Extract">HTML Extract</a>
<p>使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...</p>
</div>
<a href="/xiazai/skill5117" title="HTML Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</section>?
<hgroup></hgroup>的作用是将一组相关标题（或标题+辅助文本）声明为一个逻辑单元，其中仅最后一个子元素（且必须是 heading）参与文档大纲构建。因此，<p class="eyebrow"></p>不会被视为标题，不会出现在屏幕阅读器的标题列表中，也不会影响 heading 层级流——h2 仍作为该 section 的唯一有效标题，语义纯净、结构稳固。
? 注意事项：
-
<hgroup></hgroup>仅接受 heading 元素（h1–h6）或非-heading 的内联/短块级文本容器（如<p></p>、<span></span>、<div>），不可嵌套 sectioning content（如 <code><article></article>、<nav></nav>）； - 若需兼容极老浏览器（IE 等不支持
<hgroup></hgroup>），可用 ARIArole="group"+aria-labelledby作降级方案，但优先推荐现代语义方案； - 切勿为追求视觉效果滥用 heading 标签——字号、行高、间距等完全可通过 CSS 控制，语义与样式的分离是可访问性的基石。
总结：标题的语义层级永远高于视觉顺序。当“上方文字”不具备独立章节意义时，它就不是标题——用 <hgroup></hgroup> + 普通文本元素，才是兼顾设计意图与无障碍合规的专业解法。
