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!
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 (e.g., 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>
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, e.g. by setting label to display:block.
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.
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>
