p标签是语义化段落容器，非排版工具；div无语义，仅作通用容器。用div替代p会导致语义缺失、seo下降、无障碍访问失败及dom结构异常，如内容被浏览器强制修正为内容。
p 标签不是排版工具，而是语义容器；div 标签根本不该用于“排版段落”——用错就等于把结构逻辑搞乱了。
为什么不能用 div 替代 p 写段落
浏览器渲染时，div 和 p 都是块级元素，视觉上都换行，但这是表象。真正区别在语义层：p 明确告诉浏览器“这是一段完整、独立的文字段落”，而 div 只说“这里有个盒子，里面随便塞啥”。搜索引擎、读屏软件、甚至 CSS 的 p + h2 选择器，都依赖这个语义。用 div 包文字，等于把段落降级成无意义区块。
常见错误现象：
- 只靠回车或空格分段，不写任何
p或div→ 文字粘连，无法被 CSS 精准控制行高、缩进 - 用
div包每段文字，再加 class="paragraph" 模拟 → 语义缺失，SEO 权重下降，无障碍访问失败 - 嵌套
p在div里再套div→ 没问题，但若反过来把div塞进p→ HTML5 无效，浏览器会自动修复（如闭合p），导致 DOM 结构意外断裂
p 的默认样式到底影响什么
p 自带 margin-top 和 margin-bottom（通常各 1em），而 div 的 margin 默认为 0。这不是“排版优势”，而是语义配套：段落之间天然需要呼吸感。但这个 margin 会带来实际干扰：
- 首尾
p的外边距可能撑开父容器，造成意料外的空白 - 连续多个
p之间会发生 margin 合并（collapsing），实际间距 ≠ 2em，而是取较大值 - 想取消段落间距？别删
p改用div，直接用 CSS 重置：p { margin: 0; }或p:first-child { margin-top: 0; } p:last-child { margin-bottom: 0; }
什么时候真该用 div 包文字
只有当这段文字不属于“段落”本身，而是需要额外结构包装时才用 div。比如：
- 一组段落要统一加背景色、圆角、阴影 → 用
div包住多个p，而不是每个p单独设样式 - 段落内需插入图标、按钮等非文本内容，且需 Flex 布局对齐 → 外层用
div控制布局，内部仍用p包纯文本 - 动态插入内容，JS 操作目标是整个区块（如 show/hide 一整块介绍文字）→
div是更自然的挂载点，但子节点仍是语义正确的p
关键判断标准：如果去掉这个容器，里面的文字还能独立成立为段落，那它就不该是 div 的直接子元素——而应是 p。
用 br 强制换行不是替代方案
br 是纯表现标签，只在**同一段落内**换行（比如地址、诗行、歌词）。它和 p 完全不在一个维度：
-
br不产生新段落，不带 margin，不参与语义结构 - 用
br分隔本该是不同段落的内容 → 屏幕阅读器会把它们读成一句超长句子，断句混乱 - 想让两行文字有段落级间距？不要
br br，而要两个p
真正容易被忽略的点：语义不是“多写几个标签”就能补救的。一旦用 div 写段落，后续所有样式、脚本、可访问性适配，都要绕着这个错误打补丁——而最省事的解法，就是从第一行 HTML 就选对 p。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
