blob: fab90e629cc3ba3a1c6c40c6587414042f709c89 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
---
layout: post
title: ! 'HTML Semantics: br''s & control labels'
tags:
- Design
- Development
status: publish
type: post
published: true
meta:
_edit_last: '1'
---
<blockquote><code><br /></code> elements break content. They don't space it.</blockquote>
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 <code><br />'s</code> to wrap an <code><hr /></code> just to give the ruler some space — instead of adding margins to it —. <a href="http://paulozoom.com">Paulo Zoom</a> and <a href="http://levifig.com">Levi Figueira</a> propelled the whole thing and I kinda moderated it. The end result was quite satisfying.
<!--more-->
<h3>Our conclusions</h3>
The only way I'd use <code><br /></code> would be for:
<ul>
<li>Addresses;</li>
<li>Poems;</li>
<li>Multiple radio buttons / checkboxes.</li>
</ul>
<h3>There was one more thing.</h3>
Then the conversation shifted towards how to include labels, inputs and paragraphs inside each other. Levi found <a href="http://www.w3.org/TR/2010/WD-html5-20100304/forms.html#the-label-element">this about labels and inputs</a> on the <a href="http://www.w3.org/TR/2010/WD-html5-20100304/">HTML5 specification</a>:
<blockquote>The <code>label</code> represents a caption in a user interface. <strong>The caption can be associated with a specific form control, known as the </strong><code><strong>label</strong></code><strong> element's labeled control</strong>, either using <code>for</code> attribute, or by putting the form control inside the <code>label</code> element itself.</blockquote>
The idea of including an input inside a label — <code><label>Label: <input /></label></code> — 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:
<label><input type="checkbox" /> Checkbox 1</label><label><input type="checkbox" /> Checkbox 3</label><label><input type="checkbox" /> Checkbox 3</label>
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!
|
