Why use ?

Question

From a presentation perspective, if I write a text between a tag it looks identical as to if I hadn\'t.

So, why do we use this tag at all?

Answer 1

When you click on the label, the focus goes to the related input. Very handy for checkboxes when it is hard to hit the small rectangle.

Answer 2

Nothing from presentation point of view. Lable tag is used for defining label for an input element. From the semantic point of view, it should not be used for defining text.

Answer 3

HTML tags are meant to convey special meaning to users of various categories. Here is what label is meant for:

1. For people with motor disabilities (also for general mouse users) Correctly used label tags can be clicked to access the associated form control. Eg. Instead of particularly clicking the checkbox, user can click on more easily clickable label and toggle the checkbox.

2. For visually-challenged users Visually challenged users use screen-readers that reads the associated label tag whenever a form control is focused. It helps users to know the label which was otherwise invisible to them.

Read more about labelling here

Answer 4

If you don't use tag then you will have to click on the exact tiny circular space to select an option.

But,if you use tag then you will just have to click anywhere on the text(or the tiny circular blank space) to select an option.

NOTE:-The tag just bound the small circular blank area with the text associated with it. Thats it.

Answer 5

The for attribute of a label element corresponds to the id attribute of an input element. If you click the label, it puts focus on the input box.

Example:

<input type="checkbox" id="agree" /> 
<label for="agree">I agree with the Terms and Conditions</label>

See this in action.

If you click on the text, it checks the box.

Answer 6

HTML is not about presentation. It is a way of describing data. If you have some text that represents a label for an input, you wrap it in label tags not for presentation but because that's what it is. Without the label tag, that text is almost meaningless. With the label tag and its for attribute (or not*) you are providing meaning and structure and forming a relationship between your markup that can be better understood by computers/parsers/browsers/people.

* you don't necessarily need the for if you wrap the label around the input:

<label>My input
  <input type="text" id="my-input" />
</label>