How to use the HTML label tag to improve your website
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.
Web hosting with a personal consultant!
Fast and scalable, including a free domain and email address, trust web hosting from IONOS!
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!
Related articles
How to use the HTML div tag container
The div tag does not have any of its own semantic features. Since the introduction of HTML5, it is only recommended when there are no other suitable elements available. In our article, we’ll look into what you need to know about the div container, how it is used with practical examples, and why div doesn’t play a large a role in HTML anymore.
How to add images with the img tag in HTML
Integrating images and graphics into your website is simple with the img tag. We’ll explain how the img tag works and the attributes which can be used with it.
How to define link targets with _target in HTML
If you want to include links on your website, you can use the HTML attribute target to specify where the link should open. In doing so, you decide whether users should stay on your online presence or be sent on to the next website. In our article, you will learn how to use _target and what you should keep in mind when doing so.
A sample headline for your website
The HTML tag style is the best way to design the appearance of individual elements on a website and thus build the page optimally. Here you will learn what exactly the style tag in HTML is used for, how it is structured and which HTML attributes are compatible with it. This will allow you to easily embed the tag in your code.
