3

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!

nothingisnecessary
  • 6,099
  • 36
  • 60

4 Answers4

5

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>
Community
  • 1
  • 1
unor
  • 92,415
  • 26
  • 211
  • 360
  • 1
    Thank you! All were good answers, but I appreciate your reference (and link) to the HTML5 spec, and this is exactly what I was looking for. – nothingisnecessary Dec 06 '14 at 05:38
1

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.

Boric
  • 822
  • 7
  • 26
1

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.

D.Ferrante
  • 11
  • 1
0

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>
Picl
  • 149
  • 3
  • 12