html - Using <br/> versus <p></p> versus CSS for form fields, what is the current accepted best practice for desktop, mobile, and accessibility? -

question: should avoid using <br/> break lines in favor of wrapping content in <p></p>? when ok use <br/> (if ever)?

they both work fine in call typical desktop browsers, 1 or other work better accessibility features , mobile devices?

what current recommended best practice? (it seems moving target.)

for example, when doing stuff this:

using <br/> separate label input

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

using <p></p> separate label input

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

i've searched around bit , there doesn't seem 100% consensus on this, thought hit wonderful community.. thanks!

in html5, br element must used if line break "actually part of content". typical examples br appropriate: in postal addresses , in poems.

as line break in example not meaningful (it seems needed layout reasons; see example below), must not use br. should use css instead (display:block).

the div element typically comes css declaration default, , using (or more specific elements, p, if appropriate) allows user-agents without css support (e.g., text browsers) display content in more comprehensible manner (they’d typically display line breaks if so-called "block-level" element used).

---

the spec explicitly mentions similar case in example:

the following examples non-conforming, abuse br element:

[…]

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