HTML语义标签是结构锚点而非样式工具：<p>用于完整语义段落，<h1>–<h6>须严格嵌套表层级，<strong>/<em>表达重要性与语气，<small>/<mark>/<del>等有特定语义场景，滥用损害可访问性与SEO。
<p>、<h1>到<h6>、<strong>、<em>、<small>、<mark>、<del>、<sub>、<sup>——这些不是装饰开关，而是语义锚点。用错标签不会让页面立刻崩掉，但会让屏幕阅读器读错重点、搜索引擎降权内容、协作时别人看不懂你为什么给“价格”套<h3>。
什么时候该用<p>而不是<div>
段落标签<p>表示一段有完整语义的文本内容，比如说明、描述、用户协议条款；<div>只是通用容器，没语义。浏览器默认给<p>加上下外边距，而<div>不加——但这不是关键区别。
真正容易踩的坑是：把按钮文字、表单项提示、卡片标题全塞进<p>里。比如：
<p><button>提交</button></p>
这违反了语义原则：<p>不该包裹交互元素。正确做法是用<div>或<span>（行内场景），再配合适的 ARIA 属性。
立即学习“前端免费学习笔记（深入）”；
- 纯文字说明、用户须知、文章段落 → 用
<p> - 需要控制样式但无语义含义的包装层 → 用
<div> - 同一行内插入提示、错误信息、单位等 → 用
<span>，别硬套<p>
<h1>到<h6>不是字号调节器
很多人把<h2>当“比<p>大一号的字”来用，结果整页出现 5 个<h1>、穿插着<h4>当小标题。这样结构扁平，辅助技术无法构建内容大纲，SEO 也会认为页面重点混乱。
实际规则很简单：
- 每个 HTML 文档只应有一个
<h1>，代表页面主主题（如文章标题、产品名称） -
<h2>是<h1>的一级子节（如“功能介绍”“使用步骤”） - 嵌套必须连续：不能跳级写
<h1>→<h3>，也不能在<h2>内部直接放<h1> - 视觉大小交给 CSS 控制，不要靠改标签来“凑效果”
<strong>和<em>不是<b>和<i>的替代品
<b>和<i>是纯样式标签（HTML4 遗留），只表达“加粗”“斜体”；<strong>和<em>是语义标签，分别表示强重要性和强调语气。屏幕阅读器对它们的处理完全不同：<strong>会加重语音、放慢语速；<em>会改变语调。
常见误用：
- 用
<em>给品牌名加斜体 → 错，品牌名不需要语气强调，用 CSS 更合适 - 用
<b>标出关键词 → 错，关键词若需突出重要性，应改用<strong> - 在表格表头里写
<th><b>姓名</b></th>→ 多余，<th>本身已有语义加粗
一句话判断：删掉样式后，这段话的意思是否因此改变？如果否，就别用<strong>/<em>。
<small>、<mark>、<del>这些“小众标签”的真实用途
它们不是“可有可无的装饰”，而是解决特定语义场景的最小完备方案。
-
<small>专用于“附属细则”：版权信息、免责声明、法律条文脚注。不是用来做“小号字体”的通用手段 -
<mark>表示“在当前上下文中被高亮的相关内容”，比如搜索结果页中匹配的关键词，或文章中被引用的重点句。不是背景色工具 -
<del>必须搭配<ins>使用才有意义，表示“被删除的内容 + 替换的新内容”，比如修订稿、价格变更记录：<del>¥199</del><ins>¥149</ins> -
<sub>和<sup>只用于化学式（H2O）、数学公式（E=mc2）、脚注编号等有明确排版规则的场景，别用来做“上标商标™”——那该用 Unicode 字符或 CSS
最常被忽略的一点：<small>和<mark>在无障碍支持中都有对应的角色声明，滥用会导致读屏软件跳过或误读。语义越精确，网页越健壮。
