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

Question

Question: Should I avoid using <br/> to break lines in favor of wrapping content in <p></p> ? When is it OK to use <br/> (if ever)?

They both work fine in what I would call typical desktop browsers, but does one or the other work better with accessibility features and mobile devices?

What is the current recommended best practice? (It seems to be a moving target.)

For example, when doing stuff like this:

Using <br/> to separate label from input

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

Using <p></p> to separate label from 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 a bit and there doesn't seem to be a 100% consensus on this, thought I would hit up the wonderful SO community.. Thanks!

Answer 1

In HTML5, the br element must only be used if the line break is "actually part of the content". Typical examples where br is appropriate: in postal addresses and in poems .

As the line break in your example is not meaningful (it seems to be needed only for layout reasons; see also the example below), you must not use br . You should use CSS instead ( display:block ).

The div element typically comes with this CSS declaration by default, and using it (or more specific elements, like p , if appropriate) allows user-agents without CSS support (eg, text browsers) to display the content in a more comprehensible manner (they'd typically also display line breaks if a so-called "block-level" element is used).

---

The spec explicitly mentions a similar case in an example:

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> 

Answer 2

Determining the visual layout of elements on the page is generally done in CSS, and it's best to separate concerns where possible. So to put the label tag on a seperate line from the input tag would be accomplished through CSS, eg by setting label to display:block .

Answer 3

If your intent is truly

to get up to speed with best practices and standards

then I would suggest becoming familiar with the constructs set forth in HTML5. If you are trying to utilize the constructs of HTML5 you would try to avoid using the <br> tag, and instead arrange your content within semantic markup and format the content using CSS.

Answer 4

The p-tag stands for paragraph. And content in one paragraph should always be independent from that in another. This by the way is also visualized by most browsers with a bigger space / an empty line between two p-tags.

Therefor, if you don't want to use css (which would be my first choice) - use br.

However if you actually want content to be separated, please don't do something like this (which unfortunately is very common):

 Some example text.<br/><br/> Even more example text. 

Here you really would use p-tags:

 <p>Some example text.</p> <p>Even more example text.</p>