HTML Tutorials

HTML - Importance of the

Importance of the <label> Tag for Accessibility in HTML

A text label is bound to a particular form input element via the <label> tag. Because it enables screen readers to read out what the label is related to, improving user context, this is essential for accessibility. For sighted users, labels are especially helpful since they can be clicked to focus on or activate the corresponding input, improving the user experience.

Attributes of <label>:

  • for: To make it obvious which form element the label relates to, this should match the id of the form element.

Accessible Form Example:


<form action="/submit-form" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">

    <label for="useremail">Email:</label>
    <input type="email" id="useremail" name="email" required>

    <label for="userpassword">Password:</label>
    <input type="password" id="userpassword" name="password" required>

    <input type="submit" value="Register">
</form>
This form makes good use of the <label> element and accepts a range of input formats, making it accessible. Every type of input has a distinct purpose; for example, text inputs are used for general text, email inputs are used to verify email forms and password fields conceal submitted content. It is ensured that the label is associated with the related input by using the <label> tag with the proper attribute value linked to the input's id, improving accessibility and usability.

logo

HTML

Beginner 5 Hours

Importance of the <label> Tag for Accessibility in HTML

A text label is bound to a particular form input element via the <label> tag. Because it enables screen readers to read out what the label is related to, improving user context, this is essential for accessibility. For sighted users, labels are especially helpful since they can be clicked to focus on or activate the corresponding input, improving the user experience.

Attributes of <label>:

  • for: To make it obvious which form element the label relates to, this should match the id of the form element.

Accessible Form Example:


<form action="/submit-form" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">

    <label for="useremail">Email:</label>
    <input type="email" id="useremail" name="email" required>

    <label for="userpassword">Password:</label>
    <input type="password" id="userpassword" name="password" required>

    <input type="submit" value="Register">
</form>
This form makes good use of the <label> element and accepts a range of input formats, making it accessible. Every type of input has a distinct purpose; for example, text inputs are used for general text, email inputs are used to verify email forms and password fields conceal submitted content. It is ensured that the label is associated with the related input by using the <label> tag with the proper attribute value linked to the input's id, improving accessibility and usability.

Related Tutorials

Frequently Asked Questions for HTML

  • HTML stands for HyperText Markup Language.
  • It is used to create the structure of web pages and web applications.
  • HTML defines elements such as headings, paragraphs, links, images, and other content.

  • Block-level elements (like <div>, <p>, <h1>) start on a new line and take full width.
  • Inline elements (like <span>, <a>, <strong>) stay within the flow of the text.
  • Understanding this helps with layout and styling.

  • A basic HTML page includes a <!DOCTYPE html> declaration, followed by <html>, <head>, and <body>.
  • The <head> section contains metadata like the title and links to stylesheets.
  • The <body> section contains all the visible content of the webpage.

  • The <meta> tag provides metadata such as page description, keywords, and author.
  • It helps browsers and search engines understand the content of the page.
  • One common use is specifying the character encoding: <meta charset="UTF-8">.

  • Forms collect user input using the <form> tag.
  • Inside a form, use <input>, <textarea>, <select>, and <button>.
  • The action attribute specifies where to send the form data.

  • The <label> tag defines a label for an input element.
  • It improves accessibility and allows users to click the label to focus the input.
    Example: <label for="email">Email:</label><input id="email">.

Comments in HTML are written between <!-- and -->.

Example:
<!-- This is a comment -->.
Comments are not displayed on the webpage and are used for documentation.

HTML entities are used to display reserved or special characters.

For example, &lt; displays < and &amp; displays &.
Use them to avoid confusion with actual HTML syntax.