h1后直接写h2是合法且推荐的嵌套顺序，代表整页唯一主题与第一级子模块的语义承接；h1后跳过h2直写h3则破坏文档大纲，导致屏幕阅读器跳过、Lighthouse扣分及SEO信号失效。
h1后面直接写h2是合法且推荐的嵌套顺序
这是 HTML 语义结构的起点，<h1>代表整页唯一主题，<h2>自然承接为第一级子模块。Google 和屏幕阅读器都依赖这种线性关系理解内容骨架。只要 DOM 中 <h1> 出现在 <h2> 之前（且中间没插其他标题），就满足基本要求。
常见错误不是“h1后能不能跟h2”，而是：
– <h2> 出现在 <h1> 之前（比如 SSR 模板漏了主标题，或 CMS 动态渲染顺序错乱）
– <h1> 被包裹在 <footer> 或 <aside> 里，导致语义脱节
– 多个 <h1> 共存，让第二个 <h1> 实际被当作噪声忽略
h1后面跳过h2直接写h3会破坏文档大纲
这不是浏览器报错的问题，而是解析逻辑断裂：Chrome DevTools 的 Accessibility 面板会标出「Heading order」警告，Lighthouse 直接扣分，NVDA 屏幕阅读器在标题导航模式下会跳过 <h3>，用户卡在 <h2> 就进不去后续内容。
容易被忽略的场景：
– Markdown 渲染器（如 remark）把 ## 转成 <h2>，但原始文档从 ### 开始，结果生成 <h1> → <h3>
– 响应式中用 CSS 隐藏了某个 <h2>，但 DOM 仍存在，视觉上“跳级”了，实际结构已断层
– Vue/React 组件中用 v-if 或 {condition && <h2>...</h2>} 导致 SSR 后源码缺失 <h2>
立即学习“前端免费学习笔记（深入）”；
h2必须嵌套在h1之后，但不必紧邻
<h1> 和 <h2> 之间可以有其他非标题元素（比如 <p>、<section>、<div>），只要没有其他标题标签插入即可。关键不是物理距离，而是 DOM 树中的层级顺序和语义连续性。
需要注意：
– <h2> 不能出现在 <header> 或 <nav> 里（除非该区域确实是页面主内容的一部分）
– <h2> 应该放在 <main> 内，否则可能被搜索引擎判定为非核心内容
– 如果页面含多个独立区块（如仪表盘首页），用 <section> 包裹 + <h2> 划分，别硬塞多个 <h1>
SEO 权重不靠“h1 > h2”简单递减，而靠语义一致性
单独改一个 <h1> 不会让排名突变，真正起作用的是整套标题链是否自洽：<h1> 写“React 性能优化”，<h2> 就不该是“TypeScript 基础语法”，否则 Google 会降低页面主题相关性得分。
实操中更易踩的坑：
– <h1> 和 <title> 文本语义不一致（比如 <title> 是“前端面试题汇总”，<h1> 却是“Vue 3 响应式原理”）
– <h2> 堆砌关键词（如 <h2>北京React培训_北京前端培训班_北京Web开发课程</h2>），触发 spam 惩罚
– <h2> 数量失控（一页超过 5 个），说明内容组织混乱，反而稀释每个子模块的信号强度
最常被忽略的一点：检查必须基于原始 HTML 源码，不是 DevTools 渲染后的 DOM。SPA 页面路由切换后未更新 <h1> 文本、CMS 模板固定输出 <h1>{{site_name}}</h1>，这些错误在源码里才看得清。
