--- layout: post title: ! 'HTML Semantics: br''s & control labels' tags: - Design - Development status: publish type: post published: true meta: _edit_last: '1' ---
<br /> elements break content. They don't space it.
This gave birth to a nice debate. I threw that tweet because I was facing a terrible blunder from a fellow designer. He was using <br />'s to wrap an <hr /> just to give the ruler some space — instead of adding margins to it —. Paulo Zoom and Levi Figueira propelled the whole thing and I kinda moderated it. The end result was quite satisfying.

Our conclusions

The only way I'd use <br /> would be for:

There was one more thing.

Then the conversation shifted towards how to include labels, inputs and paragraphs inside each other. Levi found this about labels and inputs on the HTML5 specification:
The label represents a caption in a user interface. The caption can be associated with a specific form control, known as the label element's labeled control, either using for attribute, or by putting the form control inside the label element itself.
The idea of including an input inside a label — <label>Label: <input /></label> — didn't convince Paulo as he thought it felt wrong. It's not that bad if you think of this particular example, for instance. Consider a series of checkboxes for a certain field. It would be handy if people knew they can click the text and select the checkbox too, right? Like this: If you click the labels, the checkboxes are activated. And it's perfectly semantic as the labels work as controls alike. Thank you, Paulo and Levi!