br仅用于段落内强制折行，hr仅用于主题级内容分隔；误用会破坏语义结构，影响可访问性、SEO和样式维护。
br 不分割文档结构，hr 才真正承担语义化分割作用。用错一个，就等于在 DOM 里埋了个语义断点——屏幕阅读器会读错、SEO 会误判、CSS 维护也会变麻烦。
什么时候该用 br？只用于段落内强制折行
br 的唯一合法场景是：同一 p 元素内需要控制文字换行位置，且不改变语义结构。
- 典型用途：地址（如
<p>北京市朝阳区建国路8号<br>邮编：100022</p>）、诗歌分行、表单提示文案中“* 必填项”后加说明时的换行 - 常见错误：
<p>第一段</p><br><p>第二段</p>—— 这不是分段，只是视觉上“看起来像”，实际破坏了段落边界，辅助技术无法识别两个p之间的逻辑关系 - 连续多个
<br><br><br>几乎总是结构或 CSS 设计问题，应改用margin或padding控制间距 - 在 Flex/Grid 布局中，
br可能完全失效（尤其父容器设了flex-wrap: nowrap），此时必须靠 CSS 实现换行逻辑
什么时候必须用 hr？仅当存在主题级内容分隔
hr 表示的是内容主题或章节的逻辑分隔，不是装饰线，也不是“为了好看加一条横线”。
- 正确场景：文章正文与作者信息之间、不同产品模块之间、FAQ 列表中大类切换处（如“支付问题”→“售后问题”）
- 错误用法：仅为了在两行文字间加条线就塞个
hr；或把它当成“清空浮动”的老式 hack（早该用overflow: hidden或display: flow-root替代） -
hr默认带margin-top和margin-bottom，但各浏览器值不一致（Chrome 是1em，Firefox 是1.5em），重置建议统一写margin: 1.5em auto; - 旧属性如
width、size、color已废弃，必须用 CSS 控制样式，例如：<hr style="border: none; border-top: 2px solid #ccc;">
想加线但不需要语义？别碰 hr，用 CSS 边框
如果只是页面某处需要一条视觉分隔线，但前后内容并无主题切换（比如卡片底部、表单字段之间），hr 就是过度语义化。
立即学习“前端免费学习笔记（深入）”；
- 更合适的做法是给上一元素加
border-bottom，或给下一元素加border-top，例如：<div style="border-top: 1px solid #eee;"></div> - 这样既避免干扰可访问性（屏幕阅读器不会读出“horizontal rule”），也方便响应式控制（比如移动端隐藏边框）
- 国际化项目中，某些语言排版方向（如 RTL）会让
hr渲染行为不可预测，而 CSS 边框更可控
SSR/静态站点生成时容易被忽略的细节
服务端渲染或构建工具（如 Next.js、Hugo、Jekyll）常对 HTML 进行压缩，br 和 hr 都可能被误删或合并。
- 连续多个
br在压缩后可能只剩一个，导致换行丢失；建议用white-space: pre-line或明确的块级结构替代 -
hr若被当作无意义空标签删掉，会导致逻辑分隔消失，影响内容可读性；可在构建配置中禁用相关压缩规则，或改用带 class 的div+ CSS 模拟 - 检查最终输出的 HTML，确认
br是否仍在需要的位置、hr是否保留在语义关键节点
真正难的不是记住怎么写 br 和 hr，而是每次敲下它们之前，得先问一句：“这里到底需不需要语义？还是只是我懒得调 CSS？”——这个判断，比标签本身重得多。
