该用而非当内容是一段具有完整语义的文本，它明确表示逻辑段落，而仅为无语义布局容器；误用会破坏可访问性、seo及dom结构。
什么时候该用 <p></p> 而不是 <div>
<p>当内容是一段具有完整语义的文本（比如一句话、一个观点、一段说明），就该用 <code><p></p>。它不只是“换行”，而是告诉浏览器和辅助工具：“这是一个逻辑段落”。<div> 没有这层含义，纯属布局容器。
<p>常见误用场景：</p>
<ul>
<li>把标题、按钮、图标等非文本块塞进 <code><p></p> —— 这会破坏语义，屏幕阅读器可能读成“段落：首页”，很奇怪
<p></p> 包裹单行短文本（如表单项提示），不如用 <span></span> 或直接加 CSS<li> 里嵌套 <p></p>（除非内容本身是多段文字），多数情况 <li> 自带语义已足够
<strong></strong> 和 <em></em> 不是加粗/斜体的快捷键
它们表达的是语气强度：<strong></strong> 表示内容重要性高（比如错误提示、必填项说明），屏幕阅读器会加重语气；<em></em> 表示轻度强调或语调变化（比如反讽、重点词）。
别用它们替代 <b></b> 或 <i></i> 来单纯实现样式——那属于 CSS 职责。如果只是想让某段文字变粗但无语义重点，就该用 font-weight。
典型踩坑：
- 新闻标题里每个关键词都套
<strong></strong>—— 消耗语义权重，反而稀释真正关键信息 - 用
<em></em>包裹整段话，等于告诉辅助工具“这段全在强调”，失去区分度 - 在代码示例中误用
<strong></strong>替代<code>，导致语法高亮失效或可访问性下降
<code>、<pre class="brush:php;toolbar:false;"></pre>、<samp></samp> 的分工很明确
这三个标签不是“都能放代码”，各自有不可替代的语义边界：
<code>：表示一小段计算机代码（比如函数名querySelectorAll、CSS 属性display: flex）-
<pre class="brush:php;toolbar:false;"></pre>：保留原始格式（空格、换行、缩进），适合多行代码块或日志输出，通常需配合<code>使用：<pre class="brush:php;toolbar:false;"><code>...</code></pre> -
<samp></samp>：表示程序运行时的输出结果（比如终端报错<samp>ReferenceError: x is not defined</samp>），不是你写的源码
混用后果明显：搜索引擎可能把 <pre class="brush:php;toolbar:false;"></pre> 当作普通文本索引，而忽略其中的代码语义；屏幕阅读器对 <samp></samp> 会按“输出”语调朗读，和 <code> 的“输入”语调不同。
标题层级（<h1></h1>–<h6></h6>）不是样式开关
<h1></h1> 是页面唯一主主题，不是“最大的字”。它的缺失或重复会直接影响 SEO 和屏幕阅读器导航流。浏览器默认样式可以改，但语义层级不能跳。
实际开发中容易忽略的约束：
- 一个页面只应有一个
<h1></h1>，且通常放在<main></main>内部或紧邻其上 - 不要为了视觉效果跳级（比如
<h2></h2>后直接<h4></h4>），必须保持逻辑连续 -
<section></section>或<article></article>内部可重新起始层级（例如<section><h2>...</h2></section>），但不意味着能绕过全局结构
最常被忽视的一点：服务端渲染或 CMS 输出的标题可能自动包裹了 <h1></h1>，前端再加一个就造成重复——得先检查 DOM 结构，而不是直接写 CSS 隐藏。
