HTML如何设置标题_html h1到h6标题标签的使用【推荐】

HTML如何设置标题_html h1到h6标题标签的使用【推荐】的重点在于把前置条件、操作顺序和容易误判的地方分清楚。

HTML标题必须遵循语义化层级规则：一个页面仅一个h1，h2为h1子节，h3隶属h2且不可跳级；section/article内可重置层级；禁用div模拟标题，避免CMS多h1、误用h5作副标题等错误。

HTML 标题不是“选个好看的字号”就行，而是语义结构的关键——用错 <h1> 到 <h6> 会导致 SEO 下降、屏幕阅读器混乱、甚至影响 CSS 选择器的可维护性。

为什么不能只靠 CSS 改样式来当标题？

很多人用 <div class="title"> + CSS 模拟 <h1>，但这样丢失了语义：

1. 搜索引擎无法识别内容层级，<h1> 权重最高，缺失或重复会弱化页面主题
2. 视障用户依赖屏幕阅读器按 <h1>–<h6> 跳转，乱序（比如 <h3> 后直接 <h1>）会让其迷失
3. CSS 中写 h2 + h3 或 article h4 这类组合选择器时，前提就是标签本身是正确的语义标签

h1 到 h6 的嵌套规则到底怎么算？

不是“数字越小越重要”就完事，关键是视觉层级与逻辑层级一致：

1. 一个页面有且仅有一个 <h1>：通常是主标题（如文章标题、产品名），代表整个页面的主题
2. <h2> 是 <h1> 的一级子节（如“功能介绍”“使用步骤”）
3. <h3> 隶属于某个 <h2>，不能跳级（禁止 <h2> → <h4>）
4. 在 <section> 或 <article> 内部，可以重新开始层级（即 <section><h2> 里嵌 <h3>，不强制接续外层 <h2>）

实际写 HTML 时容易踩的坑

这些错误高频出现，且调试困难：

1. <h1> 被 CMS 自动生成多个（比如页头一个、正文又一个）→ 检查模板，保留唯一 <h1>，其余降为 <h2>
2. 用 <h5> 做“小字副标题”，只因它默认字号小 → 应该用 <p class="subtitle"> 或 <small>，标题标签只用于内容分段
3. JS 动态插入标题时没校验层级，比如弹窗里硬塞 <h1> → 弹窗属于附属内容，应统一用 <h3> 或更低，并加 aria-labelledby
4. 为了兼容旧浏览器给 <h1> 加 style="font-size: 16px"，结果覆盖了所有默认样式 → 用 CSS 重置时保留 font-weight 和 margin 的语义意图，别一棍子打死

移动端和无障碍场景下的特殊注意点

标题不仅是给眼睛看的：

1. iOS VoiceOver 和 Android TalkBack 默认开启“标题导航”，用户双指上下滑动会按 <h1>–<h6> 跳转，若中间断层（比如缺 <h3>），他们会直接跳到下一个 <h4>，以为内容被跳过
2. 部分安卓浏览器对 <h6> 渲染极小（甚至小于 12px），若真需要“最小标题”，优先考虑 <h5> + font-size 微调，而非依赖 <h6> 的默认表现
3. 不要用 role="heading" aria-level="2" 替代原生 <h2> —— 多余且增加 JS 依赖，原生标签更稳

标题层级一旦写错，后期重构成本远高于初期多花两分钟想清楚结构。最稳妥的做法：先手写大纲（h1 → h2 → h3…），再贴代码，比边写边调要快得多。