The <legend> element provides a caption for its parent <fieldset> — describing what the entire group of fields is actually about.
Syntax
<fieldset>
<legend>Group description</legend>
...fields...
</fieldset>Basic Example
<fieldset>
<legend>Shipping Address</legend>
<label for="street">Street</label>
<input type="text" id="street" name="street">
</fieldset>Browser output: "Shipping Address" renders overlapping the top border of the fieldset's box by default — a distinctive, easily recognizable visual pattern.
How It Works
<legend> must be the very first child inside its <fieldset>, immediately after the opening tag — this positioning requirement is stricter than most other HTML pairings.
Important Attributes
| Attribute | Purpose |
|---|---|
| — none special — | Only universal global attributes apply |
Real-World Example
<fieldset>
<legend>How did you hear about us?</legend>
<input type="radio" id="src-friend" name="source" value="friend">
<label for="src-friend">A friend</label>
<input type="radio" id="src-social" name="source" value="social">
<label for="src-social">Social media</label>
</fieldset>The legend states the overall question ("How did you hear about us?"), while each radio button's own label states the specific answer option — two levels of description working together correctly.
Common Mistakes
- Using a
<fieldset>with no<legend>at all, or replacing it with a plain heading or paragraph instead — this loses the explicit, programmatic association a real legend provides - Placing
<legend>anywhere other than the fieldset's first child
Best Practices
- Write a specific, meaningful legend describing exactly what the group of fields is asking
- Never skip it when using
<fieldset>— the two are meant to always appear together
Accessibility Considerations
Without a <legend>, a screen reader user landing on an individual field inside the fieldset has no announced context for the overall group's purpose — they only hear that one field's own label, missing the bigger picture.
SEO Considerations
No direct ranking effect.
Browser & Modern HTML Notes
Default styling (overlapping the fieldset border) is purely presentational and fully controllable with CSS if a different visual treatment is needed.
Mini Practice
- Add a specific, descriptive
<legend>to a fieldset that's currently missing one. - Explain why a heading placed above (but outside) a fieldset isn't a substitute for a real legend.
