Whats the rendering difference between a span and label tag?

Question

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

Answer 1

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.

Answer 2

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.