将 <br/> 与 <p></p> 与 CSS 用于表单字段，当前桌面、移动和可访问性的公认最佳实践是什么？

Question

问题：我应该避免使用<br/>断行来支持将内容包裹在 中<p></p>吗？什么时候可以使用<br/>（如果有的话）？

它们在我所说的典型桌面浏览器中都可以正常工作，但是其中一个在辅助功能和移动设备上工作得更好吗？

当前推荐的最佳实践是什么？（它似乎是一个移动的目标。）

例如，在做这样的事情时：

使用<br/>从输入单独的标签

<label for="txtUsername">Username</label><br/>
<input type="text" id="txtUsername" autocomplete="off" maxlength="50" spellcheck="false"/>

使用<p></p>从输入单独的标签

<p><label for="txtUsername">Username</label></p>
<p><input type="text" id="txtUsername" autocomplete="off" maxlength="50" spellcheck="false"/></p>

我已经搜索了一点，似乎对此没有 100% 的共识，我以为我会打出精彩的 SO 社区..谢谢！

Answer 1

在 HTML5 中，只有当换行符“实际上是内容的一部分”时才必须使用该br元素。br合适的典型例子：邮政地址和诗歌。

由于您的示例中的换行符没有意义（似乎只是出于布局原因才需要它；另请参见下面的示例），您不得使用br. 您应该改用 CSS ( display:block)。

该div元素通常默认带有此 CSS 声明，并且使用它（或更具体的元素，如p，如果合适）允许没有 CSS 支持的用户代理（例如，文本浏览器）以更易于理解的方式显示内容（它们'如果使用所谓的“块级”元素，d 通常还会显示换行符）。

该规范在示例中明确提到了类似的情况：

以下示例不符合标准，因为它们滥用了该br元素：

[…]

<p><label>Name: <input name="name"></label><br>
<label>Address: <input name="address"></label></p>