HTML标题标签至核心规范是：一个页面仅一个且须准确表达核心主题，–必须严格逐级嵌套、禁止跳级或倒序，语义结构优先于视觉样式，CSS负责呈现，错误层级会损害SEO与无障碍访问。
用 <h1></h1> 到 <h6></h6> 构建语义化标题层级
HTML 的标题标签不是用来调字号的，而是表达内容结构关系。一个页面只该有一个 <h1></h1>，它代表整页唯一的核心主题；<h2></h2> 是它的直接子级（比如章节），<h3></h3> 再往下是小节，依此类推。
常见错误包括：<h1></h1> 出现多次、<h2></h2> 后直接跳 <h4></h4>、用 <h3></h3> 只因为“看起来大小刚好”。这些都会破坏屏幕阅读器导航逻辑，也让搜索引擎无法准确提取大纲。
- 正确层级示例：
<h1></h1>→<h2></h2>→<h3></h3>→<h4></h4> - 错误写法：
<h2></h2>后跟<h4></h4>（跳过<h3></h3>） - 样式控制交给 CSS：
font-size或class，别靠换标签“凑大小”
段落 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="DeepBI DHTML 页面生成器" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器">DeepBI DHTML 页面生成器</a>
<p>生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur</p>
</div>
<a href="/xiazai/skill12116" title="DeepBI DHTML 页面生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> 和标题之间不能混用
<p></p> 是纯内容容器，不带层级含义；它和标题标签属于不同语义轨道。把一段说明文字硬塞进 <h3></h3> 里，哪怕加了 style="font-weight:normal"，也改变不了它在 DOM 结构中被识别为“标题”的事实。
典型误用场景：
立即学习“前端免费学习笔记（深入）”；
- 用
<h4></h4>写按钮文案或表单提示（应使用<p></p>或<span></span>+ CSS） - 在
<h2></h2>下面不接<h3></h3>，而直接放<p></p>—— 这本身合法，但若该<p></p>实际是某个子主题的导语，就该补上对应层级的标题 -
<p></p>内部嵌套<h5></h5>：语义断裂，浏览器和辅助技术会困惑
辅助工具能帮你验证层级是否合理
仅靠肉眼很难判断标题结构是否连贯。Chrome DevTools 的「Accessibility」面板或 Lighthouse 的「SEO」审计项，会直接报出 <h1></h1> 缺失、层级跳跃、标题文本为空等问题。
命令行下也可快速检查（需安装 html-validate）：
html-validate --config node_modules/html-validate-config-a11y/index.json index.html
它会输出类似这样的提示：
error: Heading has wrong level (expected h3, got h5)warning: Document does not have a <h1> element</h1>error: Heading order invalid (h2 followed by h4)
这类反馈比人工逐行核对更可靠，尤其在长文档或多人协作时。
视觉样式和语义必须分离
很多人改完标题层级后发现“长得不像以前了”，其实是默认浏览器样式被覆盖或未重置。这恰恰说明你正在做正确的事：让结构归结构，样式归样式。
例如，想让所有 <h3></h3> 显示为 18px 灰色字，就该写：
h3 { font-size: 18px; color: #666; margin: 1.2em 0 0.8em; }
而不是把 <h3></h3> 换成 <p class="heading-3"></p> —— 后者丢失了语义，CSS 再怎么模拟，也无法被爬虫或读屏软件识别为“第三级标题”。
真正容易被忽略的点是：层级一旦写错，修复成本会随项目变大指数级上升。早期用错一个 <h2></h2>，后期可能要同步改 JS 锚点逻辑、SEO meta 生成规则、甚至 CMS 模板配置。
