Is the use of a <br/> tag between a <label> and its <input> good practice?

Question

The fields in my form have a label, some help text, some example text, and some contextual text.

<!--With Help and Example-->
<li>
    <label for="ingredients">Ingredients</label>
    <br/><!--Is this good practice?-->
    <span class="help">Enter one ingredient per line.</span>
    <br/>
    <textarea id="ingredients" name="ingredients"></textarea>
    <br/>
    <span class="example"><b>Example:</b><br/>1 Cup of Flour<br/>Pinch of Salt<br/>1 Tbsp of Paprika</span>

<!--With context-->
<li>
   <label for="yield">Yield</label>
   <br /> <!--Wish labels were block and you had to style them to be inline-->
   <input type="number" id="yield" name="yield" />
   <span class="context"> servings.</span>
</li>

When I look at it un-styled it drives me nuts how all of these things run together on the same line.

I might have come up with a solution to my question while typing. I think I might use <p> for my help and example text. I still don't like that labels are always on the same line as the input.

Answer 1

If you mean "bad" as in invalid, according to thw W3 validator, no. <br>s are allowed between <label> and <input> elements.

Answer 2

I don't think a lable needs to be in the same line as the input field. The only thing that is important for a good user experience, is that it is next to it, which could also mean above.

Answer 3

If one is being really pedantic, almost all uses of <br/> are 'bad HTML'. <br/> means a semantic line break. In other words, where removing the <br/> would change the meaning of the content. These really only occur in poetry/lyrics and postal addresses.

You could achieve the same outcome by making the other elements inside the <li>s have display:block styling.

Answer 4

"Bad" as in invalid? No. "Bad" as in unsemantic? Yes.

A better way of doing this would be to wrap your label elements in p elements. They are paragraphs, after all. (Besides, labels are not something that should be block elements, it is an inline element because it gives purpose to inline text, the same way em or the HTML5 time element does — a block element does more than that. Style it as a block element using CSS)

Edit: See also the answer by Alohci, explaining why <br> is being used incorrectly here.

Answer 5

It's not bad per se, but you ought to use CSS for styling (e.g. layout). It makes the code easier to read. E.g.

CSS

<style type="text/css">
  #myrecipies label,
  #myrecipies li:first-child span:first-child,
  #myrecipies textarea {
    display: block;
  }
</style>

HTML

<ul id="myrecipies">
  <li>
    <label for="ingredients">Ingredients</label>
    <span class="help">Enter one ingredient per line.</span>
    <textarea id="ingredients" name="ingredients"></textarea>
    <span class="example"><b>Example:</b><br/>1 Cup of Flour<br/>Pinch of Salt<br/>1 Tbsp of Paprika</span>
  </li>
  <li>
   <label for="yield">Yield</label>
   <input type="number" id="yield" name="yield" />
   <span class="context"> servings.</span>
  </li>
</ul>

This code in action.