HTML label Tag

The HTML <label> tag is used to add a caption or label text to any HTML element on the webpage.

• One important thing is that Label is not directly associated with forms; though labels are indirectly associated with forms through form control.

• Labeled Control: When a Label is used for labeling the form control then it is known as Labeled control of label element; One input can be associated with multiple labels.

• Whenever one will click or tap on <label> and also we know that label is associated with a form control; then the resulting click event is also raised for the associated control.

• <label> tag comes under the category of inline elements.

• Labels are beneficial for screen reader users as it becomes easy for them when they read out labels.

• Labels are also beneficial for users who face problems in clicking a small region like a simple checkbox; whenever a user clicks on the text inside the label then it makes an increase in hit area.

HTML <label> Tag - Syntax and Usage

The <label> tag requires the start(opening) tag and end(closing) tag.

Below is the required syntax for the same:

<label>
    Label Text
</label>

HTML <label> Tag Attributes

The <label> tag supports both Global attributes and Event attributes and some of the common attributes used along with <label> tag is:

HTML <label> Tag Basic Example

Below we have a basic example for <label> tag:

Using for Attribute inside <label> Tag

<label for="username">Click Here</label>
<input type="text" id="username">

Note: We should not use the heading elements inside the label tag because headings have a different purpose and it will also bring in the default styling of the heading which may distort the webpage user interface.

If you want to style the text added to the <label> tag then you can do so using CSS style rules.

Using CSS classes with <label> Tag:

Here is an example where we have used a CSS class to add styling to the label text:

<label class="large-label" for="name">
    Your name
</label> 
<input id="name" name="name" type="text">

adding styling to the CSS class large-label created above:

.large-label {
    font-size: 34px;
    font-weight: bold;
}

Doing so will increase the size of the label text and will make it apeear bold.

Default CSS Settings for HTML <label> Tag

Most browsers use this default CSS setting given below for the <label> tag:

label {
    cursor: default;
}

Browser Support for HTML <label> Tag

Following browsers support this attribute:

• Firefox 1+

• Google Chrome 1+

• Internet Explorer 4+

• Safari 1+

• Opera 4+