Learn Java, Angular, SQL with Coding Exercises & Career Tips

Label Tag

The <label> tag in HTML is used to associate a text label with a form element like an <input>, <textarea> or <select>. It improves both accessibility (especially for screen readers) and user experience by making form fields easier to understand and interact with.

Why Use <label> ?

Improves accessibility for users with assistive technologies.

Increases clickable area clicking the label focuses the input field.

Clearly communicates what kind of input is expected.

Syntax:

<label for="input_id">Label Text</label>
<input type="text" id="input_id" name="input_name">

Example: Basic Label with Input Fields

<!DOCTYPE html>
<html>
<head>
    <title>Label Example</title>
</head>
<body>

  <form>
    <label for="firstname">First Name:</label><br>
    <input type="text" id="firstname" name="firstname"><br><br>

    <label for="lastname">Last Name:</label><br>
    <input type="text" id="lastname" name="lastname"><br><br>
  </form>

</body>
</html>

Output:

Tip

Always use the for attribute for better form accessibility.
Labels can also wrap the input field instead of using the for attribute.
<label>First Name: <input type="text" name="firstname"></label
Both ways are valid, but using the for and id combo is the recommended practice for clean and accessible HTML.