HTML Tags
HTML <legend> Tag
The
<legend>tag is used to provide a caption or title for a<fieldset>in a form.
It helps users understand the purpose of the grouped fields and improves form accessibility.
A<legend>must be the first child of a<fieldset>for proper display and semantics.
Syntax
html
<fieldset>
<legend>Group Title</legend>
<!-- Form controls go here -->
</fieldset>Attributes
| Attribute | Description |
|---|---|
| align (deprecated) | Specifies the alignment of the legend text (left, center, right). |
| id | Assigns a unique ID to the legend. |
| accesskey | Provides a keyboard shortcut to focus the legend (rarely used). |
Example
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Legend Example</title>
</head>
<body>
<h2>Survey Form</h2>
<form action="/samples/form_processor.php" method="post">
<fieldset>
<legend>Personal Details</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" required>
</fieldset><br>
<fieldset>
<legend>Preferences</legend>
<label for="color">Favorite Color:</label>
<input type="text" id="color" name="color"><br><br>
<label for="hobby">Hobby:</label>
<input type="text" id="hobby" name="hobby">
</fieldset><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Output
Browser Output
html
You will see a fieldset with a caption at the top, e.g., “Personal Details” or “Preferences.”
The legend clearly labels the grouped form fields.
Try it in our TryIt Editor to see how the legend improves form clarity and accessibility.Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
All major browser supports <legend> tag.
Notes
<legend>should always be the first element inside<fieldset>.- Provides a visual and semantic description of the fieldset.
- Improves accessibility, especially for screen readers.
- Deprecated attributes like
alignshould be avoided; use CSS for styling instead.
Conclusion
The <legend> tag enhances form organization and readability by labeling fieldsets.
It is widely supported and crucial for accessible web forms.