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