HTML Semantics: br’s & control labels
<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:
- Addresses;
- Poems;
- Multiple radio buttons / checkboxes.
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
labelrepresents a caption in a user interface. The caption can be associated with a specific form control, known as thelabelelement’s labeled control, either usingforattribute, or by putting the form control inside thelabelelement 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!
Paulo Zoom said:
José, it was indeed a nice discussion. So, to make a bit longer, just two remarks.
First, I don’t think that line breaks should be used for forms at all, I only use them on addresses and poems (or when I get lazy at times).
About the labels and the inputs, I don’t agree with you. It doesn’t make sense to have a label *for* something where that something is part of the label itself. Besides being worse for styling, the elements are two distinct things. Conceptually, I don’t think it makes sense.
But of course they are *related*, and you said that it’s cool to click the label and have the browser select the form control. And it improves usability and acessibility. There’s a standard way to do that:
Matching the *foo* attribute of the label with the *id* of a form control makes the browser behave the way you like, regardless of where those elements are in the page.
Keep posting!