Live Preview
A fieldset with legend and labeled inputs:
HTML <legend> Tag
Overview
What You’ll Learn
By the end of this tutorial, you’ll caption form groups with accessible, semantic <legend> elements.
Core Syntax
Place <legend> as the first child of <fieldset>.
Group Captions
Name sections like Contact Info or Payment Method.
legend vs label
Distinguish group titles from individual field labels.
Radio & Checkbox Groups
Use legend for mutually exclusive or related options.
CSS Styling
Style legends for polished form section headings.
Accessibility
Help screen readers announce form group context.
Fundamentals
What Is the <legend> Tag?
The legend element (<legend>) represents a caption for the content of its parent <fieldset>. It provides a human-readable title for a group of related form controls, such as contact details, shipping options, or payment methods.
First child of fieldset
<legend> must appear inside <fieldset> and should be the first child. Screen readers announce the legend when users enter controls in that group.
While <label> names individual inputs, <legend> names the entire group. Use both together: a legend for the section, labels for each field inside it.
Foundation
📝 Syntax
Place the legend as the first element inside a fieldset:
syntax.html
<fieldset>
<legend>Your Caption Here</legend>
<!-- form controls go here -->
</fieldset>Syntax Rules
<legend>is only valid as a child of<fieldset>.- It must be the first child of the fieldset (only whitespace or comments may precede it).
- Write concise, descriptive text — it names the whole group.
- Pair every meaningful fieldset with a legend for accessibility.
Cheat Sheet
⚡ Quick Reference
| Use Case | Code Snippet | Notes |
|---|---|---|
| Basic group | <legend>Contact Info</legend> | Inside <fieldset> |
| Radio group | <legend>Payment</legend> | Names the option set |
| Multiple groups | One legend per fieldset | Shipping, billing, etc. |
| Styled legend | <legend class="..."> | CSS on global class |
| Parent element | <fieldset> | Required container |
| Individual fields | <label> | Use label, not legend |
Comparison
⚖️ <legend> vs <label>
Legends and labels work together but serve different roles:
| Feature | <legend> | <label> |
|---|---|---|
| Scope | Names an entire fieldset group | Names one form control |
| Parent | Must be inside fieldset | Standalone or in a form |
| Typical use | “Contact Information” | “Email:” on one input |
| Radio/checkbox sets | Group title (e.g. “Gender”) | Each option label |
| Click behavior | No direct focus link | Focuses associated control |
Comparison
⚖️ <legend> vs <h2>
Do not replace legend with a heading inside fieldset:
| Element | Best for | In fieldset? |
|---|---|---|
<legend> | Form group accessible name | Yes — first child |
<h2> | Page or section headings | Not for form group a11y |
| Together | Heading for page; legend for form group | Use legend inside fieldset |
Reference
🧰 Attributes
The <legend> element has no unique attributes. It supports global attributes only:
class GlobalCSS hook for typography, color, and spacing on the group caption.
class="section-legend"id GlobalUnique identifier for scripting or referencing from CSS.
id="contact-legend"lang GlobalLanguage of the legend text in multilingual forms.
lang="en"title GlobalAdvisory tooltip with extra context (rarely needed if text is clear).
title="Required section"Use class on legend or parent fieldset for consistent form section styling.
Hands-On
Examples Gallery
Contact groups, radio sets, multiple fieldsets, and styled legends with copy-ready code and live previews.
Contact Information Group
The primary use of <legend> — caption a related set of form fields.
contact-legend.html
<form>
<fieldset>
<legend>Contact Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</fieldset>
</form>📚 Common Use Cases
Use <legend> whenever you group related controls in a <fieldset> — contact sections, address blocks, payment methods, and radio or checkbox option sets.
Radio Button Group
Name a set of mutually exclusive options with a legend; label each radio individually.
radio-legend.html
<fieldset>
<legend>Payment Method</legend>
<input type="radio" id="card" name="payment" value="card">
<label for="card">Credit Card</label>
<input type="radio" id="paypal" name="payment" value="paypal">
<label for="paypal">PayPal</label>
</fieldset>Multiple Fieldsets
Use separate legends for distinct sections in one form.
multiple-legends.html
<form>
<fieldset>
<legend>Shipping Address</legend>
<!-- shipping fields -->
</fieldset>
<fieldset>
<legend>Billing Address</legend>
<!-- billing fields -->
</fieldset>
</form>Styled Legend
Style the legend and fieldset together with CSS classes.
styled-legend.html
<fieldset class="form-section">
<legend class="form-section__title">Account Details</legend>
<!-- fields -->
</fieldset>Design
Styling <legend> with CSS
Browsers render legend text at the top of the fieldset border. Customize it for your design system:
font-weight Bold group titlepadding Space around legend textfieldset border Group container stylingcolor Muted disabled groups legend-styles.css
/* Fieldset + legend styling */
fieldset {
border: 1px solid #cbd5e1;
border-radius: 8px;
padding: 1rem 1.25rem;
margin: 0 0 1rem;
}
legend {
font-weight: 600;
font-size: 0.9375rem;
color: #0f172a;
padding: 0 0.35rem;
}
fieldset:disabled legend {
color: #94a3b8;
}Live styled legend
A11y
♿ Accessibility
Legends are critical for accessible form groups:
- Include a legend in every fieldset — it gives the group an accessible name.
- Keep legend text descriptive — “Payment Method” is clearer than “Options”.
- Use legend for radio/checkbox sets — screen readers announce the group before each option.
- Do not use headings instead of legend — inside fieldset, legend is the correct semantic caption.
🧠 How <legend> Works
1
Author groups controls in fieldset
Wrap related inputs in fieldset and add legend first.
Markup
2
Browser renders group border
Legend text appears at the top edge of the fieldset box.
Rendering
3
Assistive tech announces group
Screen readers speak the legend when focus enters a control in the group.
Accessibility
=
Organized, understandable forms
Users know which section they are filling out and why fields are grouped.
Compatibility
Universal Browser Support
The <legend> element is fully supported in all browsers when used inside <fieldset>.
Baseline · Since HTML 4
Form group captions that work everywhere
From legacy Internet Explorer to the latest mobile browsers — legend inside fieldset is fully supported.
100% Core tag support
Google Chrome All versions · Desktop & Mobile
Full supportMozilla Firefox All versions · Desktop & Mobile
Full supportApple Safari All versions · macOS & iOS
Full supportMicrosoft Edge All versions · Chromium & Legacy
Full supportInternet Explorer IE 6+ · Legacy environments
Full supportOpera All modern versions
Full support<legend> tag 100% supported
Bottom line: Ship accessible form groups with confidence. The <legend> element is safe to use in every production environment today.
Wrap Up
Conclusion
The <legend> tag is essential for structured, accessible HTML forms. It captions each <fieldset> group, helps users scan complex forms, and gives assistive technology the context needed to understand grouped controls.
Remember to place legend first inside fieldset, write clear group titles, and pair legends with individual <label> elements on each control.
Pro Tips
💡 Best Practices
✅ Do
- Include a legend in every meaningful fieldset
- Write concise, descriptive group titles
- Use legend for radio and checkbox option sets
- Place legend as the first child of fieldset
❌ Don’t
- Use legend outside of fieldset
- Replace legend with a heading inside fieldset
- Use vague captions like “Section 1”
- Skip legend when grouping related controls
Summary
Key Takeaways
Knowledge Unlocked
Six truths every developer should know about <legend>
Bookmark these before you ship — they’ll keep your form groups semantic and accessible.
6
Core concepts 01
Group Caption
<legend> titles a <fieldset> group.
02
First Child
Legend must be the first element in fieldset.
Syntax 03
Not a Label
Legend names groups; label names individual fields.
Comparison 04
Radio Sets
Essential for accessible radio/checkbox groups.
Forms 05
Screen Readers
Announced when focus enters the group.
Accessibility 06
Universal Support
Works in every browser, including legacy IE.
Compatibility❓ Frequently Asked Questions
It provides a caption for a
<fieldset>, naming a group of related form controls for users and assistive technology.Inside
<fieldset>, as the first child element.legend names an entire group. label names one individual control.No. Inside fieldset, use
legend for the group accessible name. Headings do not replace legend for form accessibility.Strongly recommended. Without a legend, screen reader users may not know the purpose of the grouped controls.
Yes. Full support in all modern and legacy browsers when used inside fieldset.
Practice Form Group Captions
Try contact groups, radio sets, and styled legends in the interactive editor.
About the author
6 people found this page helpful