html - 对于表单字段使用 与 与 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 element只有当换行符“实际上是内容的一部分”时才必须使用。 br 适用的典型示例:in postal addresses和 in poems .

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

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

---

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

The following examples are non-conforming, as they abuse the br element:

[…]

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