HTML标题标签<h1>至<h6>须严格逐级嵌套，一个页面仅一个<h1>表核心主题，<h2>～<h6>按逻辑降级不可跳级；<p>定义语义段落非换行工具；和表达语气强度而非样式，语义错误将误导机器理解。
<p>、<h1>到<h6>、<strong>、<em>这些标签不是“装饰开关”，而是语义声明——浏览器和屏幕阅读器靠它们理解内容重要性，搜索引擎靠它们判断页面结构。用错就等于给机器传了错误信号。
标题标签 <h1>–<h6> 必须按层级嵌套
真实项目里常见错误是跳级使用，比如<h1>后面直接跟<h3>，中间缺<h2>。这会导致无障碍工具无法正确朗读大纲，SEO 也会弱化子标题权重。
实际写法应遵循逻辑层级：
-
<h1>全页唯一，代表页面主主题（如“用户注册”） -
<h2>是<h1>下的第一级分块（如“填写基本信息”“设置密码”） -
<h3>及以下只用于更细粒度的展开，不建议低于<h4> - 不要用
align或style强行改变字号来“模拟”标题——那是样式问题，该交给 CSS
<p> 不只是换行，它定义段落语义边界
很多人把<p>当“多加一行空隙”的快捷键，甚至用多个<p>堆出间距。但<p>的本意是包裹一个完整语义段落，比如一句完整陈述、一个观点支撑句。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 列表项、表格单元格、表单提示文字里误用
<p>——这些场景应优先用<li>、<td>、<small>等更贴切的标签 - 在
<div>里无意义地套一层<p>，既没语义又增加 DOM 深度 -
<p>内嵌<h2>等标题——标题必须是块级容器的直系子元素，否则解析行为不可靠
<strong> 和 <em> 不等于加粗和斜体
它们表达的是语气强度：<strong>表示内容有强重要性（如警告、必填项提示），<em>表示强调语气（如反讽、重点重读）。视觉样式可由 CSS 控制，但语义不能替换。
对比错误用法：
- 用
<b>代替<strong>——<b>仅表示“不加解释的粗体”，无语义权重 - 用
<i>代替<em>——<i>适用于外文术语、船名、思想实验名称等特定场景，不是通用斜体 - 在按钮文字里滥用
<strong>——按钮本身已是交互焦点，额外强调反而干扰语义流
别忽略 <small> 和 <mark> 的明确用途
<small>不是“调小字号”的样式钩子，W3C 明确定义它用于“附属细则”，比如版权信息、免责声明、法律条款脚注；<mark>专指“文档中需要高亮的引用或上下文相关部分”，不是随便标黄的装饰手段。
典型误用：
- 用
<small>写导航菜单文字——该用 CSS 的font-size - 用
<mark>做产品 slogan 装饰——slogan 是主信息，不是需被标记的上下文片段 - 把
<mark>当背景色工具，在非搜索结果页滥用——它隐含“当前匹配关键词”的语义
语义标签的价值不在“看起来像不像”，而在“机器能不能准确理解你在说什么”。一旦把<h2>当成<div class="title">的简写，就把 HTML 降级成了排版工具——而它本该是内容的身份证。
