How to use the HTML label tag to improve your website
IONOS editorial team3 mins
The label tag in HTML improves the usability of your website and creates barrier-free access. The tag label can be used for input fields, checkboxes, and buttons. It also works with global attributes, event attributes, and for and form.
- 99.9% uptime
- PHP 8.3 with JIT compiler
- SSL, DDoS protection, and backups
Why is the HTML label used?
The HTML tag is an important part of a website’s accessibility. It is used in forms and adds a caption or label to explain elements such as input fields, buttons or checkboxes.
This is very important for two reasons. Firstly, it enlarges the area where visitors can click, making it easier for visitors who have problems navigating a website. Secondly, it ensures captions can be read aloud for visitors who use a screen reader, improving the overall usability of the website.
How is the label tag in HTML used?
There are two ways to use the label tag in HTML. You can use the for attribute to link the label directly to the input field or you can include the form next to the label within the label tag in HTML. Below you will find the options for the label tag in HTML.
For checkboxes:
<p>
<input type="checkbox" name="read" id="read" value="yes" />
<label for="read">I have read the terms and conditions</label>
</p>The for attribute used in the label tag in HTML should be the same value as the id attribute in the input field.
For buttons:
<input type="radio" id="radio" value="agree" />
<label for="read">agree</label>The caption is included in the second option, which looks like this:
<p>
<label>
<input type="checkbox" name="read" value="yes" />
I have read the terms and conditions
</label>
</p>Which elements should be marked with the HTML label?
The following elements in HTML should be marked with a label tag to allow visitors with screen readers to access your site:
- Input fields: , < input type="password" />, < testarea>
- Checkboxes: <input type="checkbox" />
- Buttons: <input type="radio" />
- Selection lists: <select>
- Upload fields: <input type="file" />
Which attributes does the label tag in HTML support?
The label tag in HTML supports all global HTML attributes as well as event attributes. The following attributes are associated with the HTML tag:
for: The for attribute is used to determine the ID of the input element which the caption should be associated with. This means that the first input element which matches this value in a document is automatically associated with the caption.
form: The form attribute defines which form element should be assigned to the label tag in HTML, which looks like this:
<form id="participant">
<label class="h2" form="participant">name</label>
<label for="firstname">first name</label>
<input name="firstname" id="firstname" maxlength="25">
<label for="lastname">last name</label>
<input name="surname" id="surname" maxlength="30">
<button>confirm details</button>
</form>Design your website with your ideas in mind! Cultivate your professional online presence with the Website Builder from IONOS and benefit from our developers’ expertise. Just choose the solution which suits your needs!
