<legend> Element

Technical Summary

Definition / Contexts

legend is not a generic heading that can be placed anywhere. Its parent and position are part of the specification context. Use h1–h6 and other heading structures for document headings.

Fieldset caption

<fieldset>
  <legend>Contact method</legend>
  <label><input type="radio" name="contact" value="email"> Email</label>
  <label><input type="radio" name="contact" value="phone"> Phone</label>
</fieldset>

Here, legend supplies the caption for the group, while each label supplies the name of an individual control. A legend does not, by itself, complete the label for each radio button.

Position and content model

In conforming fieldset markup, legend is the first child. Putting an explanatory div or p before it does not satisfy that positional context.

<!-- Conforming structure -->
<fieldset>
  <legend>Delivery method</legend>
  <label><input type="radio" name="delivery" value="mail"> Mail</label>
</fieldset>

<!-- The legend is not the first child -->
<fieldset>
  <p>Choose a delivery method.</p>
  <legend>Delivery method</legend>
</fieldset>

When the parent is a fieldset, the content model allows phrasing content optionally intermixed with heading content. The group caption and the document's heading structure still have different responsibilities, so include heading content only when the information architecture and assistive-technology presentation have been considered.

Optgroup boundary

<!-- Customizable-select context -->
<select name="standard">
  <optgroup>
    <legend>Specifications</legend>
    <option value="html">HTML Standard</option>
    <option value="dom">DOM Standard</option>
  </optgroup>
</select>

The current HTML Standard also permits a first-child legend in an optgroup within a customizable select. Its text is used as the option group's label. Traditional select implementations also use the optgroup label attribute. Do not treat the rendering of a customizable select and a conventional select as the same implementation boundary.

Disabled propagation boundary

<fieldset disabled>
  <legend>Not available yet</legend>
  <label><input name="plan" value="basic"> Basic</label>
</fieldset>

A fieldset[disabled] makes descendant form controls disabled except for controls that are descendants of the first legend child. This exception is a boundary for descendant controls; it does not turn the legend element itself into an enabled form control.

DOM Interface

HTMLLegendElement's form IDL attribute returns the same form owner as its parent fieldset when the parent is a fieldset. It returns null otherwise.

const legend = document.querySelector('fieldset > legend');

legend.form;
// The parent fieldset's form owner, or null

legend instanceof HTMLLegendElement;
// true

Rendering and accessibility

User agents have special rendering rules that relate the fieldset border to its first legend. CSS that changes the border, position, float, or display can therefore produce visual differences, but a pseudo-element or generic text cannot replace the meaning of a real legend.

HTML-AAM gives legend no corresponding ARIA role and uses it in the label relationship with its parent fieldset. The fieldset follows group mapping, and its first rendered legend is relevant to the group name. If the legend is hidden from the accessibility tree, it does not provide the accessible name for its parent fieldset.

Fact / Evidence

Normative claims and implementation observations are separated by parent, position, conditions, and verification state.

Evidence

1. HTML Standard: The legend element — meaning, contexts, content model, attributes, and DOM interface
2. HTML Standard: The optgroup element — option-group labeling through legend and the label attribute
3. HTML Standard: Enabling and disabling form controls — the first-legend disabled boundary
4. HTML Accessibility API Mappings: legend — legend role and its label relationship with fieldset
5. HTML Accessibility API Mappings: fieldset — group mapping and the first rendered legend

Implementation Evidence

Browser behavior, WPT results, and accessibility observations are tracked separately from normative claims. Unrun items are not treated as reviewed.

Measured fixture / environment: The fixture included a normal fieldset, a first legend, controls inside and outside the legend, a disabled fieldset, and a fieldset with a form owner; DOM and form APIs were measured in Chrome 152.0.0.0 (HeadlessChrome / Windows NT 10.0) on 2026-09-13. Rendering, the accessibility tree, optgroup legends, and customizable selects were not run.

Use the WPT repository for test mapping and HTML-AAM for the accessibility baseline. The related test listed here does not establish complete rendering, AAM, or optgroup legend coverage.

Coverage / Open Issues

• ReviewedFieldset caption, optgroup label, parent and position, content model, and HTMLLegendElement.form at the specification level
• ReviewedThe first-legend exception in disabled fieldsets and the HTML-AAM legend / fieldset mapping
• OpenCross-browser comparisons of legend rendering, CSS conditions, controls inside legend, and nested fieldsets
• OpenImplementation comparison for optgroup legend in customizable selects, WPT execution, platform APIs, and assistive-technology announcements

This is an initial coverage page. It does not claim complete verification of the legend specification, every select implementation, or every browser and assistive technology result.

Related surface

For a beginner-friendly introduction to group captions, see the legend element page in Yugien. The group itself is covered by the fieldset element; form relationships by the form element; option-group labels and disabled boundaries by optgroup; option groups as a selection model by the select element; and individual control names by the label element.