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