Home 〉 HTML Tutorials 〉 HTML '<label>' Tag Explained - Syntax, Attributes, and Examples
HTML '<label>' Tag Explained - Syntax, Attributes, and Examples !
HTML '<label>' Tag Explained - Syntax, Attributes, and Examples !
Want to improve form accessibility and user experience in your HTML documents?
Understanding the HTML '<label>' tag is essential. This tag allows you to link readable text to input fields, enhancing accessibility and interaction. It supports key attributes like 'for' and 'form', and it's an inline element that can be styled with CSS. We also covered best practices, real-world examples, and SEO tips. The detailed blog post on HTML label tag is as follows.
Introduction
The '<label>' tag in HTML is used to define a label for '<input>' elements like text boxes, checkboxes, radio buttons, etc. It improves accessibility and usability by associating readable text with form controls. Screen readers and users using assistive technologies can better interact with labeled elements.
The '<label>' tag is an inline-level element, meaning it appears within the flow of surrounding text unless styled otherwise.
Syntax and Meaning
Syntax ✍
<label for="input-id">Label Text</label>
- '<label>' is the opening tag.
- 'for="input-id"' connects the label to the specific form element with the same 'id'.
- 'Label Text' is the visible text to the user.
- '</label>' closes the label tag.
HTML Label Tag Attributes with Examples
1. 'for' Attribute
Associates the label with a form input element using its 'id'.
Code : 1 📝 
<!DOCTYPE html>
<html>
<body>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
This ensures that clicking on the label focuses the input field with id 'username'.
2. 'form' Attribute
Specifies which form the label is connected to, even if it is outside the '<form>' element.
Code : 2 📝
<!DOCTYPE html>
<html>
<body>
<form id="loginForm"></form>
<label for="email" form="loginForm">Email:</label>
<input type="email" id="email">
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
This associates the label with the form element that has the id 'loginForm'.
Best Inline CSS Styling for '<label>'
Apply decent styling to make labels user-friendly:
Code : 3 📝
<!DOCTYPE html>
<html>
<body>
<label for="username" style="font-size:16px; color:#333; padding:5px; margin:5px; background-color:#f0f0f0; border:1px solid #ccc; border-radius:5px;">
Username:
</label>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
This makes the label visually consistent and enhances UI experience.
Conclusion
The '<label>' tag plays a crucial role in improving form accessibility and usability. It ensures better user interaction, especially for screen readers, and connects form inputs clearly with descriptive text. By using the 'for' and 'form' attributes correctly and applying clean inline CSS, you can create user-friendly and SEO-optimized forms.
Suggested Topics:
- CSS background-color Tutorial with Examples - Learn Easily
- CSS Border Property Explained with Easy Examples for Beginners
- CSS Border-Radius Property Explained with Examples for Beginners
- CSS color Property Tutorial with Examples - Learn Text Color in CSS
- CSS Font Properties Tutorial with Examples | font-family, font-size, font-style
- CSS Margin Explained with Examples - Master Spacing in Web Design
- CSS Padding Explained with Examples | CSS Box Model Guide
Related Topics:
- HTML '<form>' Tag - Learn Syntax, Attributes & Examples for Forms
- HTML input Tag - Types, Attributes, Syntax, and Examples
Frequently Asked Questions (FAQs)
What is the use of the HTML '<label>' tag?
It defines a label for input elements like textboxes, radio buttons, etc., improving form accessibility.
Is '<label>' a block or inline element?
It is an inline-level element by default.
Can I use CSS with the '<label>' tag?
Yes, you can apply inline or external CSS for styling '<label>' elements.
What is the 'for' attribute in '<label>'?
It links the label to the input field with the matching 'id'.
Should every input have a '<label>'?
For best accessibility practices, yes - especially for text, checkbox, and radio inputs.