诗歌排版应避免用替代语义结构，因其仅控制视觉换行而破坏屏幕阅读器对诗行的语义识别；推荐用或每行套加CSS间距，确保可访问性与语义完整性。
br 标签在诗歌排版中为什么不能用 <br> 替代语义结构
因为诗歌的每行是内容语义单位，不是视觉装饰——<br> 只表示“这里断行”，不表示“这是独立诗行”。如果把整首诗塞进一个 <p></p> 里靠 <br> 换行，屏幕阅读器会把它读成一句超长串，中间插入生硬停顿，对视障用户极不友好。
真正需要保留分行语义时，应优先考虑 <pre class="brush:php;toolbar:false;"></pre> 或带 white-space: pre-line 的容器；只有当诗歌作为纯静态文本、且明确无需语义分层（如页脚签名档）时，<br> 才是合理选择。
怎么写才让诗歌既保持分行又不破坏可访问性
推荐两种稳妥做法：
- 用
<pre class="brush:php;toolbar:false;"></pre>包裹原始换行文本，浏览器自动按源码折行，且保留语义完整性 - 用
<p></p>套每行诗，再配 CSS 控制间距：margin-bottom: 0.5em，这样每行都是独立焦点项、可单独加样式、响应式下也能统一控制 - 若必须用
<br>（比如 CMS 导出限制），至少确保父容器有role="poem"和aria-label描述，辅助技术才可能识别上下文
常见错误：连续多个 <br> 在诗歌里制造空行
比如这样写：
<p>床前明月光<br><br>疑是地上霜<br><br>举头望明月</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a> <p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>
问题不止是冗余——双 <br> 会被某些屏幕阅读器解析为“句间停顿+段落结束”，导致语音节奏错乱。更糟的是，打印或高对比度模式下，多余换行可能撑开布局。
正确做法：
- 空行需求改用 CSS：
margin-bottom: 1.2em控制诗节间距 - 单行换行只用一个
<br>，且前后不加空格或换行符（避免渲染异常） - 富文本编辑器导出时开启“转换换行为
<p></p>”选项，比手动补<br>更可靠
为什么 <br> 在地址和诗歌里能用，但在按钮文字里不能用
关键看换行是否属于内容本体：
- 地址中的“上海市浦东新区”和“张江路123号”天然属于同一逻辑单元，
<br>是内容表达所需 - 按钮文字如
<button>确<br>认</button>把语义连贯词硬拆，语音合成器会读成“确（停顿）认”，键盘聚焦时也仍是一个焦点，但视觉割裂 - 按钮内换行应走 CSS：
white-space: normal+ 宽度限制，或用display: flex; flex-direction: column
最容易被忽略的一点：哪怕只是临时调试，也不要为了“看起来对齐”就在 HTML 里堆 <br>——它一旦混入生产模板，后续维护者很难分辨哪些是语义必需、哪些是历史遗留。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
