应使用hgroup包裹主副标题以确保语义结构正确：①hgroup内仅允许h1–h6，不可含p、time等；②仅当存在多级标题时使用；③配合header组织完整头部；④严格遵循标题层级逻辑，避免跳级或多个h1。
主副标题结合不是视觉排版问题，而是语义结构问题。关键在于让浏览器、搜索引擎和辅助技术把“主标题+副标题”识别为一个逻辑单元，而不是两个独立章节。
用 hgroup 包裹主副标题
当页面顶部出现类似《前端开发指南》
《从零开始构建现代 Web 应用》这样的组合时，必须用 <hgroup></hgroup> 把它们包起来：
<hgroup><h1>前端开发指南</h1> <h2>从零开始构建现代 Web 应用</h2></hgroup>-
<hgroup></hgroup>内只能放<h1></h1>–<h6></h6>，不能加<p></p>、<time></time>或图片，否则破坏语义 - 如果只有一个标题（比如只有
<h1></h1>），就绝对不用<hgroup></hgroup>—— 它不提供额外含义，反而干扰解析
用 header 组织更完整的头部区域
当主副标题之外还有发布时间、作者、操作按钮等辅助信息时，需要用 <header></header> 包裹整个区块：
<header><hgroup><h1>健康饮食指南</h1> <h2>科学搭配一日三餐</h2></hgroup><time datetime="2026-09-20">2026年9月20日</time></header>-
<header></header>可以出现在顶层，也可以嵌套在<article></article>或<section></section>内部，表示该区块自身的头部 - 它不强制要求包含标题，但一旦有标题，推荐优先用
<hgroup></hgroup>套住多级标题
确保标题层级在结构中自然延续
主副标题只是页面大纲的起点，后续内容必须按逻辑递进，不能跳级或断层：
- 全页只用一个
<h1></h1>，放在最外层<header></header>内；<main></main>中每个<section></section>或<article></article>应以<h2></h2>开头 - 如果主标题是
<h1></h1>，副标题是<h2></h2>，那接下来第一个内容模块就不能直接用<h3></h3>——得先有<h2></h2>作为章节锚点 - 所有 heading 必须与语义区块对齐：
<h2></h2>应是<section></section>的主题，<h3></h3>是其子主题，不能脱离结构孤立存在
避免常见误用
这些做法看似方便，实则割裂语义逻辑：
- 用 CSS 改变
<h2></h2>样式去模拟副标题，却不包裹在<hgroup></hgroup>中 → 被解析为独立章节 - 在
<hgroup></hgroup>里塞<span></span>或<em></em>→ 违反规范，导致结构无效 - 多个
<h1></h1>并列（如每篇文章都用<h1></h1>）→ 模糊页面主旨，损害 SEO 和可访问性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
