What Is The HTML <label> Tag?

Date First Published: 1st March 2023

Topic: Web Design & Development

Subtopic: Web Development

Article Type: Computer Terms & Definitions

Difficulty: Medium

Difficulty Level: 5/10

CONTENTS

Example Of The <label> Tag
Attributes

Learn more about what the HTML <label> tag is in this article.

In HTML, the <label< tag is used to define a label for an element in a HTML form field or items in a user interface. These specify the purpose of a field and improve the accessibility of a website as it makes the form fields clearer and more readable. This is useful for people with visual impairments who find the text displayed in the fields difficult to read. Labels can be read out by screen readers, which require form labels in order for them to identify form fields. This HTML tag is supported by all web browsers.

Note:

The "for" attribute of the <label> tag must be the same as the "id" attribute to bind them together.

Example Of The <label< Tag

An example of the <label> tag can be seen below:

<form>

<label for="username">Username</label><br>

<label for="password">Password</label><br>

<br>

</form>

In this example, the use of the <label> tags makes it clearer as to what the two fields require users to enter. Even though the fields already have a placeholder before they are filled in which specifies what data will need to be entered into the field, when in the process of entering data, that text cannot be seen. As a result, this will require users to remove their filled in data if they forget what data is supposed to be entered in the fields and will be time-consuming. This is why using the <label> tag can improve the overall user experience.