Import all posts.

1 files changed, 33 insertions, 0 deletions

diff --git a/_posts/2010-04-29-html-semantics-brs-control-labels.html b/_posts/2010-04-29-html-semantics-brs-control-labels.html
new file mode 100644
index 0000000..73dfb15
--- /dev/null
+++ b/_posts/2010-04-29-html-semantics-brs-control-labels.html
@@ -0,0 +1,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>&lt;br /&gt;</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>&lt;br /&gt;'s</code> to wrap an <code>&lt;hr /&gt;</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>&lt;br /&gt;</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>&lt;label&gt;Label: &lt;input /&gt;&lt;/label&gt;</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!