Path // www.yourhtmlsource.com → Reference → <legend>

<legend>

by Ross Shannon

The <legend> element provides a caption or title for its parent <fieldset> element. It describes the purpose of the group of form controls contained within the fieldset. Screen readers announce the legend text when users enter the fieldset, making it essential for form accessibility. The legend appears visually at the top of the fieldset border.

Clock This page was last updated on 2025-11-17


Syntax

<fieldset>
  <legend>Caption Text</legend>
  <!-- form controls -->
</fieldset>

The element requires both opening and closing tags. It must be the first child element within a <fieldset>. The text content becomes the group caption that users see and screen readers announce.

Attributes

  • Global attributes - Supports standard attributes like id, class, style

The legend element has no specific attributes beyond global attributes. Its purpose is straightforward: provide a caption for the fieldset.

Examples

Contact Information Group

<fieldset>
  <legend>Contact Information</legend>
  
  <label for="phone">Phone:</label>
  <input type="tel" id="phone" name="phone">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
</fieldset>

Payment Method Selection

<fieldset>
  <legend>Payment Method</legend>
  
  <input type="radio" id="credit" name="payment" value="credit">
  <label for="credit">Credit Card</label>
  
  <input type="radio" id="debit" name="payment" value="debit">
  <label for="debit">Debit Card</label>
  
  <input type="radio" id="paypal" name="payment" value="paypal">
  <label for="paypal">PayPal</label>
</fieldset>

Styled Legend

<fieldset>
  <legend class="form-section-title">
    <span class="icon">📦</span> Shipping Details
  </legend>
  <!-- shipping form fields -->
</fieldset>

When to Use

Use the <legend> element when:

  • Creating a caption for a <fieldset> element
  • Grouping related form controls with a descriptive title
  • Providing context for radio button or checkbox groups
  • Improving form accessibility for screen reader users
  • Organizing complex forms into labeled sections

Accessibility and best practices:

  • Always include a legend when using fieldset (required for proper accessibility)
  • Keep legend text concise but descriptive
  • Place the legend as the first child of fieldset (required by HTML spec)
  • Screen readers announce "Group name, group" when entering the fieldset
  • Use clear, action-oriented text for groups (e.g., "Select your preferences")
  • Avoid overly long legend text that becomes cumbersome
  • Style the legend to visually distinguish it from form labels
  • Test with screen readers to ensure the legend is properly announced
  • The legend functions similarly to a label but for the entire group
  • <fieldset> - Parent container that legend captions
  • <label> - Labels for individual form controls
  • <form> - Parent form container
  • <input> - Form controls within the fieldset

CSS styling example:

legend {
  font-weight: bold;
  font-size: 1.1em;
  color: #333;
  padding: 0 10px;
  background: white;
}