So I understand the functional difference between the span and label tags... however it appears there is also a rendering difference between the tags and I can't seem to figure out what it is? Does anyone know the rendering difference between span and label? Thanks
+3
A:
I can see no rendering difference with the default stylesheets in IE, Firefox, Opera or Chrome. It's possible a browser might choose to render it differently, but it's unlikely to be a significant difference.
The main advantage of a label is that you can associate it with another form control (via containment or the for attribute). This can have accessibility advantages. Notably in the typical graphical-based browser you can click the label to focus the associated control (and tick it, for checkbox/radios, which is handy because otherwise it's quite a small target to hit). This reproduces established OS form widget behaviour.
bobince
2010-01-13 20:12:41
except that there is a difference in firefox...
Polaris878
2010-01-13 20:15:02
test case then. There is no difference here; do you have other rules interfering? The only rule that applies specifically to `label` in the Firefox 3.5 default stylesheet is `cursor: default`.
bobince
2010-01-13 20:17:30
drat.... so I'm digging through our massive amounts of CSS and there's a class that is overriding the default label attributes. Sorry bout that.
Polaris878
2010-01-13 20:17:58
+6
A:
Aside from the default rendering styles (label is sometimes bold in some browsers), the important difference is that a label it supposed to be linked to a form field (input, select, etc) to LABEL what that field is. Hence it's "for" attribute. It should not be used for anything but that. This is especially important with regards to accessibility with screen readers as they expect this link to exist.
Span is for a group of text that you'd like to apply a similar style to. Span by default has no style applied to it.
PS: May the wrath of Grayskull find you if I ever catch you using a label tab just to make some text bold or something like that. Repeat after me: "no input field, no label".
PPS: Sorry, it's one of my biggest annoyances with other people's markups.
Parrots
2010-01-13 20:14:33