Search code examples
htmlcssformssemantics

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

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.

Solution

  • 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.