From 3204575bfcd1f12db5945c8959073d40915cfdfe Mon Sep 17 00:00:00 2001
From: José Mota <josemota.net@gmail.com>
Date: Fri, 6 Apr 2012 19:40:37 +0100
Subject: Import all posts.

---
 ...10-04-29-html-semantics-brs-control-labels.html | 33 ++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 _posts/2010-04-29-html-semantics-brs-control-labels.html

(limited to '_posts/2010-04-29-html-semantics-brs-control-labels.html')

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!
-- 
cgit v1.2.3-54-g00ecf