是否应在HTML代码中使用br、hr标签？替代方案是否更优？

这其实是个关于语义化和代码可维护性的经典问题，没有绝对的“最佳答案”，得看你具体的使用场景来选，咱们拆开来聊：

关于br标签的选择 #

首先得明确br的原生语义：它是用来表示内容本身需要的换行，不是用来做布局间距的。

• 如果是符合语义的场景，比如诗歌的换行、地址里街道和城市的换行：直接用<br>就对了！比如：

  <p>北京市朝阳区建国路88号<br>SOHO现代城A座15层</p>
  

  这种场景下用br是完全符合HTML标准的，辅助设备（比如屏幕阅读器）也能正确识别内容的结构。
• 但如果你是用一堆<br>来给段落、模块之间加间距（比如<p>第一段</p><br><br><p>第二段</p>），那这时候用CSS方案（比如给段落设置margin-bottom: 1em;，或者给元素加display:block调整布局）才是更好的实践。毕竟布局样式应该交给CSS来管，把结构和样式分开，后续要调整间距的时候，只改CSS就行，不用去动HTML里的一堆br，维护起来方便太多。

关于hr标签的选择 #

hr的原生语义是主题分隔，表示当前内容从一个主题切换到了另一个主题，它不是单纯的“水平线”样式。

• 如果你的分隔是带有语义的：比如一篇文章里从“产品介绍”切换到“使用案例”，那直接用<hr>更合适。现代浏览器里hr的默认样式可以通过CSS完全自定义，而且它能让辅助设备识别到主题的变化，提升页面的可访问性。
• 如果只是需要一条装饰性的水平线，没有主题切换的语义：那用CSS伪元素（比如:after）来实现是没问题的。比如给某个容器加：

  .section-divider:after {
    content: '';
    display: block;
    width: 80%;
    height: 1px;
    background: #ccc;
    margin: 1em auto;
  }
  

  这种方式能让HTML结构更干净，样式也更灵活。

总结一下核心原则 #

记住一句话：HTML管语义，CSS管样式和布局。

• 当你需要的是「内容语义上的换行/主题分隔」：放心用br、hr，这就是它们的本职工作，符合语义化和可访问性要求。
• 当你只是需要「布局上的间距/装饰性线条」：用CSS方案，别让HTML承担它不该做的布局工作，代码会更清晰、更易维护。

内容的提问来源于stack exchange，提问作者Underscore Elven