在HTML的标签体系中，div和br都是非常高频使用的标签，但二者的设计初衷和功能定位完全不同，错误的使用方式往往会导致页面布局混乱或者代码语义不清晰。理解两者的本质差异，是写出规范HTML代码的基础。
div与br标签的本质属性差异
div是块级容器标签，本身没有特定的语义，主要用来对网页内容进行区块划分，默认情况下会独占一整行，前后会自动换行。它的核心作用是承载内容、配合CSS实现页面布局，属于结构类标签。
br是换行标签，属于空标签，没有闭合标签，作用是强制在文本中插入一个换行符，不会创建新的区块，也不会改变内容的层级结构，属于文本格式化类标签。
默认样式对比
| 对比维度 | div标签 | br标签 |
|---|---|---|
| 标签类型 | 块级容器标签 | 行内空标签 |
| 默认换行 | 前后自动换行，独占一行 | 仅在插入位置强制换行 |
| 语义作用 | 划分内容区块，无特定语义 | 文本换行，无内容承载功能 |
| 是否可嵌套内容 | 可以嵌套任意HTML内容 | 不能嵌套其他内容 |
div标签的正确使用场景
div的核心作用是做内容区块的划分，适合用在需要组合多个元素、配合CSS设置统一样式或者布局的场景。
场景1：页面布局划分
当需要把页面的不同功能模块分开时，比如头部、内容区、底部，就可以用div来包裹每个模块，方便后续设置样式。
<!-- 页面整体布局示例 --> <div class="header"> <h1>网站标题</h1> <nav>导航栏</nav> </div> <div class="content"> <p>页面主体内容</p> </div> <div class="footer"> <p>版权信息</p> </div>
场景2：组合关联内容
当多个元素属于同一个逻辑单元时，用div把它们包裹起来，比如一组表单控件、一个商品卡片的内容。
<!-- 商品卡片示例 --> <div class="product-card"> <img src="product.jpg" alt="商品图片"> <h3>商品名称</h3> <p>商品描述信息</p> <span class="price">99元</span> </div>
br标签的正确使用场景
br标签仅用于文本内的强制换行，适合在需要保留文本换行格式的场景使用，不建议用它来做布局换行。
场景1：诗歌、地址等需要保留换行的文本
这类文本本身就有固定的换行格式，用br可以还原原本的排版，不需要额外的CSS样式。
<!-- 地址信息示例 --> <p> 收货地址：<br> 江苏省南京市鼓楼区<br> 某某街道123号<br> 收件人：张三 </p>
场景2：表单中短文本的换行
当表单的说明文字需要换行，且不需要额外的样式控制时，可以合理使用br。
<!-- 表单提示示例 --> <label> 备注信息：<br> <textarea rows="3"></textarea> </label>
常见使用误区
- 不要用br来做布局换行：比如想让两个区块分开，很多人会加多个<br>标签，这是错误的做法，应该用div划分区块，再用CSS设置margin间距。
- 不要用div来单纯实现文本换行：如果只是想让文本换行，不需要划分区块，用br即可，没必要嵌套div，会增加无意义的标签。
- 不要滥用br标签：段落之间的换行应该用<p>标签，而不是多个br，p标签有默认的上下间距，更符合语义。
总结
简单来说，div是做内容区块划分的容器，br是做文本内强制换行的工具。开发时先判断需求是要划分结构还是单纯换行，再选择对应的标签，这样写出来的HTML代码既符合规范，也更容易维护。