HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

HTML Tags

HTML <legend> Tag

The <legend> tag is used to provide a caption or title for a <fieldset> in a form.
It helps users understand the purpose of the grouped fields and improves form accessibility.
A <legend> must be the first child of a <fieldset> for proper display and semantics.

Syntax

html

<fieldset>
  <legend>Group Title</legend>
  <!-- Form controls go here -->
</fieldset>

Attributes

AttributeDescription
align (deprecated)Specifies the alignment of the legend text (left, center, right).
idAssigns a unique ID to the legend.
accesskeyProvides a keyboard shortcut to focus the legend (rarely used).

Example

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Legend Example</title>
</head>
<body>
  <h2>Survey Form</h2>
  <form action="/samples/form_processor.php" method="post">
    <fieldset>
      <legend>Personal Details</legend>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" required><br><br>

      <label for="age">Age:</label>
      <input type="number" id="age" name="age" required>
    </fieldset><br>

    <fieldset>
      <legend>Preferences</legend>
      <label for="color">Favorite Color:</label>
      <input type="text" id="color" name="color"><br><br>

      <label for="hobby">Hobby:</label>
      <input type="text" id="hobby" name="hobby">
    </fieldset><br>

    <input type="submit" value="Submit">
  </form>
</body>
</html>

Output

Browser Output

html

You will see a fieldset with a caption at the top, e.g., “Personal Details” or “Preferences.”
The legend clearly labels the grouped form fields.
Try it in our TryIt Editor to see how the legend improves form clarity and accessibility.

Browser Support

Chrome
Edge
Firefox
Safari
Opera
IE9+
YesYesYesYesYesYes

All major browser supports <legend> tag.

Notes

  • <legend> should always be the first element inside <fieldset>.
  • Provides a visual and semantic description of the fieldset.
  • Improves accessibility, especially for screen readers.
  • Deprecated attributes like align should be avoided; use CSS for styling instead.

Conclusion

The <legend> tag enhances form organization and readability by labeling fieldsets.
It is widely supported and crucial for accessible web forms.

PreviousHTML <fieldset> TagNextHTML <datalist> Tag