每个页面只能有一个<h1>作为唯一主标题；副标题应使用<p>或<span>而非<h2>，除非开启新内容区块；禁止跳级或使用已弃用的<hgroup>。
每个页面只能有一个 <h1>，它必须是主标题
浏览器、屏幕阅读器和搜索引擎都把 <h1> 当作页面唯一的核心主题。比如公司官网首页，<h1> 应该是“云启科技｜企业级前端解决方案”，而不是“欢迎访问”或空泛的“首页”。跳过 <h1> 直接用 <h2>，或者塞两个 <h1>，都会让语义断裂——SEO 会降权，无障碍工具可能读错重点。
常见错误现象：
- CMS 模板默认生成多个
<h1>（如页头 logo + 文章标题） - 为样式方便把导航栏文字也套上
<h1> - 用
<div class="title">替代<h1>，再靠 CSS 加粗放大
<h2> 是副标题的合理选择，但得看它是否承担章节级语义
如果副标题只是对主标题的补充说明（例如“专注响应式开发与性能优化”），它本身不开启新内容区块，就不该用 <h2>。强行用会导致标题层级虚假膨胀，破坏文档大纲。
更合适的方案是：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
<p>包裹副标题文字，加class="subtitle"控制样式 - 若副标题确实引出一个独立模块（如“服务优势”“客户案例”），那这个模块标题才配用
<h2> - 避免在
<h1>后紧接<h3>或<h4>，必须按顺序递进
<hgroup> 已被主流浏览器弃用，别再用了
<hgroup> 原本想解决“主标题+副标题”打包语义的问题，但实际支持极差：Chrome 从 95 版起完全移除，Firefox 也不再维护。现在用它，等于写一段注定失效的代码。
替代做法很简单：
- 主标题用
<h1> - 副标题用
<p>或<span>，放在<h1>同级或内部（只要不破坏块级流） - 需要视觉居中对齐？用 CSS 的
text-align或flex，别依赖标签
移动端和 SEO 对标题结构极其敏感
Google 的抓取器会基于标题层级生成文档大纲（Document Outline），这个大纲直接影响搜索结果中的片段展示。iOS VoiceOver 和 Android TalkBack 也会按 <h1>→<h2>→<h3> 的顺序朗读，中间断层会让视障用户迷失上下文。
真正容易被忽略的一点是：很多团队把 CMS 输出的“副标题字段”硬塞进 <h2>，却没检查它是否真对应一个可跳转的锚点或独立内容区。结果页面大纲里冒出一堆孤立的 <h2>，既干扰 SEO，又拖慢首屏可访问性评估。
