The HTML <legend> tag
In short
The HTML <legend> element provides a caption for its parent <fieldset>. It must be the fieldset's first child and names the group of controls for assistive technology.
Overview
The <legend> element captions a <fieldset>, and it must be the fieldset's first child. Visually it appears as the group's title, usually sitting on the fieldset's top border.
Its real value is for accessibility. The legend gives the grouped controls a shared accessible name, which is exactly what makes a set of radio buttons understandable: screen readers pair the legend's question with each option, so users hear "Shipping method, Standard" rather than just "Standard" with no context.
Syntax
<fieldset>
<legend>Shipping address</legend>
…
</fieldset>Example
<fieldset style="border:1px solid #cbd5e1;border-radius:6px;">
<legend>Account type</legend>
<label><input type="radio" name="a"> Personal</label>
<label><input type="radio" name="a"> Business</label>
</fieldset>Best practices
- Make the
<legend>the very first child of its <fieldset>. - Keep it concise; it is read alongside every control in the group.
- Treat it as the question for a radio or checkbox group, with each control as an answer.
- Restyle its default position and appearance with CSS as needed.
Frequently asked questions
Where does the legend element go?
It must be the first child of a <fieldset>, where it serves as the group's caption.
Why is the legend important for radio buttons?
It provides the shared question for the group, which screen readers announce with each option so the choices make sense in context.
Can I style the legend element?
Yes. You can reposition and restyle it with CSS, though its placement on the fieldset border is the historical default.
Is a legend required in a fieldset?
It is strongly recommended. A <fieldset> without a legend loses the accessible group name that makes the grouping useful.
