h1必须且只能出现一次，代表文档主标题，多用会引发SEO降权和读屏混乱；h2–h6须严格嵌套，不可跳级，应配合section/article重置层级，工具校验优于人工。
h1必须且只能出现一次，别为了SEO硬塞多个
页面语义结构里，<h1>代表整个文档的主标题，浏览器、屏幕阅读器和搜索引擎都按这个逻辑解析。塞两个<h1>不会提升排名，反而可能触发爬虫降权或读屏混乱。
常见错误是首页放一个<h1>，又在轮播图、活动Banner里各加一个——这些应该用<h2>或<div>配合aria-label处理。
- 单页应用（SPA）注意：路由切换时要动态更新
<h1>内容，不能静态写死 - 后台系统或仪表盘类页面，若无明确“主标题”，可用
<h1>包裹当前模块名（如“用户管理”），而非留空或删掉 - 避免用
<h1>做视觉装饰——改CSS样式，别靠降级用<h2>冒充<h1>
h2–h6必须严格遵循嵌套逻辑，不能跳级
HTML5规范不强制要求视觉层级连续，但语义层级必须连续。比如出现<h3>，前面必须有<h2>作为父级；<h2>前面必须有<h1>或<section>/<article>等分节元素作为上下文。
跳级最典型的是直接从<h2>跳到<h4>，浏览器虽能渲染，但AT工具（如NVDA）会丢失结构感知，用户无法用快捷键逐层展开/折叠标题树。
立即学习“前端免费学习笔记（深入）”；
- 用
<section>或<article>包裹内容块后，内部可重新从<h2>开始，不必延续外层层级 -
<h6>极少需要——多数设计稿到<h4>就该收尾了；真要用，确认是否只是视觉小字，而非语义副标题 - 别用
style="font-size: 14px"把<h2>压成小字来“假装”是<h4>，语义和样式必须分离
用W3C验证器或axe插件快速检查层级缺陷
人工数<h1>到<h6>容易漏，尤其模板拼接或CMS生成的页面。直接用工具比肉眼靠谱。
推荐两个轻量方案：
- 在线验证：W3C Markup Validation Service，粘贴HTML或输URL，它会在“Outline”标签页生成结构树，一眼看出断层或重复
- 浏览器插件：
axe DevTools（Chrome/Firefox），运行后点“Heading order”，红色报错项直接定位到具体<h?>标签 - CI阶段可加
html-validate（npm包），配置规则"heading-order": "error"，提交即卡住不合规代码
Vue/React里动态生成标题要小心key和条件渲染
组件化开发中，v-if或{condition && <h2>}容易导致标题意外消失或重复，进而破坏整页层级。
比如一个卡片列表组件，每个卡片带<h3>，但某张卡片数据为空时被v-if移除——剩余卡片的<h3>还在，但父级<h2>可能已被另一个条件隐藏，结构就断了。
- 优先用
v-show或visibility: hidden替代v-if隐藏标题，保持DOM结构完整 - 动态标题内容务必绑定
key，避免Vue复用节点导致<h2>残留为<h3> - SSR场景下，服务端渲染的标题层级必须和服务端逻辑一致，否则Hydration时React/Vue会警告并降级处理
axe检查加进PR checklist，比写文档管用。 
