In this section, we will learn what HTML <label> element is and how to use it.

What is <label> Tag in HTML?

HTML <label> element, as its name suggests, is used to create a label for a field in a document.

This label element takes a value that describes the purpose of the target field. That being said, we usually put a <label> element close to a field that it is representing.

For example, let’s say you have a textbox in your document. This textbox is used to take users’ username! So with the help of a <label> element, we can set a value like “username” so that people know this is a field where they can put their username in.

Also, HTML <label> element has an attribute called “for”. This attribute takes one value, and that is the id of the field this label element is linked to.

After setting the value for the `for` attribute, if we click on the value of the <label> element, the target field will get the focus instead! This is a good practice because some fields might be small and users can’t select that field with ease! So using a <label> element with the attribute “for”, will help users to click that label instead and get the focus of the field they want.

HTML <label> Tag Syntax:

<label for = “target field id”> Label content </label>

HTML <label> Tag Values

The value we set in an HTML <label> element is a label or description that describes the field the <label> element is related to.

Example: HTML label input

See the Pen HTML label input by Omid Dehghan (@odehghan) on CodePen.

In this example, you can select any label and its related radio button will get the focus instead.