HTML <legend> Element
The HTML <legend> element provides a caption for a group of related form controls contained within a <fieldset> element. It helps users understand the purpose of the grouped controls and provides an important relationship for assistive technologies.
Syntax
<fieldset>
<legend>Choose a hobby:</legend>
<input type="checkbox" id="gaming" name="hobby[]" value="Gaming">
<label for="gaming">Gaming</label>
<input type="checkbox" id="crafts" name="hobby[]" value="Crafts">
<label for="crafts">Crafts</label>
</fieldset>The <legend> element is placed inside a <fieldset> and provides a caption that describes the group of related form controls.
Attributes
The <legend> element supports the global HTML attributes. It does not have any element-specific attributes.
Example
This example uses a <legend> to describe a group of related checkboxes contained within a <fieldset>. Each checkbox also has its own <label> identifying the individual choice.
Usage Notes
Use the <legend> element to describe the overall purpose of related controls grouped inside a <fieldset>.
The <legend> should be the first child of its <fieldset>. This creates a clear relationship between the caption and the controls contained in the group.
A legend describes the group as a whole, while individual <label> elements identify the controls within that group. For example, a legend might ask "Choose a hobby," while the individual labels identify choices such as Gaming and Crafts.
The <legend> element is especially useful for groups of radio buttons and checkboxes where the individual controls do not fully explain the question without a shared description.
Use <legend> only with a <fieldset>. It is not intended to serve as a general-purpose heading or caption for unrelated page content.
Accessibility
A properly structured <fieldset> and <legend> relationship helps screen reader users understand that several form controls belong to the same group and share a common description.
Write legend text that clearly explains the question or purpose of the group. Individual controls should still have appropriate <label> elements so users can identify each available choice.
Do not rely only on visual spacing, borders, or headings to communicate relationships between form controls. The semantic combination of <fieldset> and <legend> provides information that can also be interpreted by assistive technologies.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <legend> Element .
Related Elements
<fieldset> - Groups related form controls and labels.
<label> - Provides a descriptive label for an individual form control.
<input> - Creates controls for entering and selecting form data.
<form> - Represents a form used to collect and submit user input.