HTML Tutorial

HTML Tag: <legend>

Usage:

The <legend> tag defines a caption or label for groups of controls, such as <fieldset> elements.

Attributes:

  • align: Aligns the caption text (left, right, center)
  • accesskey: Specifies a keyboard shortcut to activate the legend

Examples:

<!-- Fieldset with legend -->
<fieldset>
  <legend>Personal Details</legend>
  <label for="name">Name:</label>
  <input type="text" id="name">
  <label for="email">Email:</label>
  <input type="email" id="email">
</fieldset>

<!-- Right-aligned legend -->
<fieldset>
  <legend align="right">Shipping Address</legend>
  ...
</fieldset>

<!-- Legend with keyboard shortcut -->
<fieldset>
  <legend accesskey="d">Details</legend>
  ...
</fieldset>

Simple HTML Example:

<!DOCTYPE html>
<html>
<head>
  <title>Exploring the &lt;legend&gt; Tag</title>
</head>
<body>
  <fieldset>
    <legend>Contact Information</legend>
    <label for="name">Name:</label>
    <input type="text" id="name">
    <label for="email">Email:</label>
    <input type="email" id="email">
  </fieldset>
</body>
</html>

Tips for Accessibility:

  • Ensure that the legend text is concise and descriptive.
  • Use the accesskey attribute to provide a keyboard shortcut for users with motor impairments.