REFERENCEhtml

html Documentation

📖 INDEX

# helloworld

LOADING ENGINE...

<legend>

AI & DATA SCIENCE // legend-tag

The <legend> element provides a caption for a <fieldset>, describing what the grouped controls are about.

Syntax

<fieldset>
  <legend>Payment Method</legend>
  <input type="radio" name="pay" value="card"> Card
</fieldset>

Deep Dive Course

**`<legend>`** must be the first child inside a `<fieldset>`, and browsers render it overlapping the fieldset's top border by default, like a labeled box. It plays an important accessibility role: screen readers announce the legend's text as context whenever the user focuses ANY control inside that fieldset — so for a group of radio buttons, each option gets announced together with the legend (e.g. 'Payment Method, Card, radio button'), giving the user the group's purpose along with each individual choice.

1Understanding <legend>

`<legend>` must be the first child inside a <fieldset>, and browsers render it overlapping the fieldset's top border by default, like a labeled box. It plays an important accessibility role: screen readers announce the legend's text as context whenever the user focuses ANY control inside that fieldset — so for a group of radio buttons, each option gets announced together with the legend (e.g. 'Payment Method, Card, radio button'), giving the user the group's purpose along with each individual choice.

💡

For a group of radio buttons representing one question (like 'Payment Method'), the <legend> effectively acts as that question's label — screen readers announce it alongside every option in the group.

editor.html

<fieldset>
  <legend>Preferred Contact Time</legend>
  <label><input type="radio" name="time" value="morning"> Morning</label>
  <label><input type="radio" name="time" value="evening"> Evening</label>
</fieldset>

localhost:3000

2Practical Example

Here is a real-world application of <legend> showing how it is used in production HTML.

editor.html

<!-- Styling the legend, which browsers otherwise render overlapping the border -->
<style>
  legend { font-weight: bold; padding: 0 8px; }
</style>

localhost:3000

3Best Practices

Follow these guidelines when working with <legend>:

1. Always make <legend> the first child of its <fieldset>

2. Use it to describe the group's overall purpose (e.g. 'Payment Method'), not an individual option

3. Rely on it as the 'question' label for a related set of radio buttons or checkboxes

⚠️

Tip: For a group of radio buttons representing one question (like 'Payment Method'), the <legend> effectively acts as that question's label — screen readers announce it alongside every option in the group.

editor.html

<fieldset>
  <legend>Preferred Contact Time</legend>
  <label><input type="radio" name="time" value="morning"> Morning</label>
  <label><input type="radio" name="time" value="evening"> Evening</label>
</fieldset>

localhost:3000

Examples

Example 01Basic Usage

<fieldset>
  <legend>Preferred Contact Time</legend>
  <label><input type="radio" name="time" value="morning"> Morning</label>
  <label><input type="radio" name="time" value="evening"> Evening</label>
</fieldset>

Example 02Advanced Example

<!-- Styling the legend, which browsers otherwise render overlapping the border -->
<style>
  legend { font-weight: bold; padding: 0 8px; }
</style>

Best Practices

Always make the first child of its
Use it to describe the group's overall purpose (e.g. 'Payment Method'), not an individual option
Rely on it as the 'question' label for a related set of radio buttons or checkboxes

Interview Question

How does a <legend> help a screen reader user understand a group of radio buttons?▼

Hint: Think about what gets announced when the user tabs to each individual radio button in the group.

As the user tabs through each radio button inside the <fieldset>, screen readers announce the <legend>'s text together with that specific option — so instead of just hearing 'Morning, radio button' with no context, the user hears something like 'Preferred Contact Time, Morning, radio button', giving them the overall question alongside each choice, every time, without needing to remember it from earlier in the page.

Exercises

EasyPractice using <legend> in a real scenario.

View Solution

<fieldset>
  <legend>Preferred Contact Time</legend>
  <label><input type="radio" name="time" value="morning"> Morning</label>
  <label><input type="radio" name="time" value="evening"> Evening</label>
</fieldset>

Frequently Asked Questions

How does a <legend> help a screen reader user understand a group of radio buttons?▼

As the user tabs through each radio button inside the

, screen readers announce the 's text together with that specific option — so instead of just hearing 'Morning, radio button' with no context, the user hears something like 'Preferred Contact Time, Morning, radio button', giving them the overall question alongside each choice, every time, without needing to remember it from earlier in the page.

Related Functions

fieldset-tag