<legend> HTML field set legend element
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The <legend> HTML element represents a caption for the content of its parent <fieldset>.
In customizable <select> elements, the <legend> element is allowed as a child of <optgroup>, to provide a label that is easy to target and style. This replaces any text set in the <optgroup> element's label attribute, and it has the same semantics.
Try it
<fieldset>
<legend>Choose your favorite monster</legend>
<input type="radio" id="kraken" name="monster" value="K">
<label for="kraken">Kraken</label><br>
<input type="radio" id="sasquatch" name="monster" value="S">
<label for="sasquatch">Sasquatch</label><br>
<input type="radio" id="mothman" name="monster" value="M">
<label for="mothman">Mothman</label>
</fieldset>
legend {
background-color: black;
color: white;
padding: 3px 6px;
}
input {
margin: 0.4rem;
}
Attributes
This element only includes the global attributes.
Examples
See <form> for examples on <legend>.
Technical summary
| Content categories | None. |
|---|---|
| Permitted content | Phrasing content and headings (h1–h6 elements). |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
A <fieldset> whose first child is this
<legend> element. In customizable select elements, a <legend> element is permitted as a child of <optgroup> .
|
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | No role permitted |
| DOM interface | HTMLLegendElement |
Specifications
| Specification |
|---|
| HTML # the-legend-element |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
legend
|
|
|
|
|
|
|
|
|
|
|
|
|
align
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Deprecated. Not for use in new websites.