Menu
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
886
label is used for labeling form controls in html. It also has for attribute where you can set id of the control which this label related to. span used in case when you need to display some literal data.
Labels carry information, and they may be created specifically for that type of surface. We sort of like these. Tags are labels without adhesive. They're attached by other means, such as tying or hanging.
span is an in-line element and "p" is a block element. If you are not sure what are inline elements and block elements. and inline elements on the other hand takes as much space as they need.
Additionally, labels are designed to be used for forms, to label an input field. If you just want some text associated with the span , just use another span or a p tag.
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.
164
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
