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