legend: The Legend element

The <legend> HTML element represents a caption for the content of its parent <fieldset>. It provides context for the group of controls within the fieldset.

Attributes

Global attributes

accesskey Specifies a keyboard shortcut to activate or focus an element.

aria-* Defines accessibility properties and states for assistive technologies.

class Specifies one or more CSS class names for styling the element.

data-* Stores custom data private to the page or application.

dir Sets the text direction (left-to-right, right-to-left, or auto).

hidden Hides the element from display and assistive technologies.

id Defines a unique identifier for the element within the document.

inputmode Hints which virtual keyboard type to display on mobile devices.

itemid Provides a global identifier for microdata items.

itemprop Defines a property name-value pair for microdata.

itemref Associates properties with an item via element IDs for microdata.

itemscope Creates a new microdata item container.

itemtype Specifies the vocabulary URL for microdata items (like Schema.org).

lang Specifies the primary language of the element’s content.

nonce Provides a cryptographic nonce for Content Security Policy.

role Defines the element’s semantic role for accessibility.

tabindex Controls keyboard navigation order and focusability.

title Provides advisory information displayed as a tooltip.

Example

<form action="/website-setup" method="post">
  <h2>Website Setup Preferences</h2>
  
  <fieldset>
    <legend>Hosting Platform</legend>
    <label><input type="radio" name="hosting" value="github-pages"> GitHub Pages</label>
    <label><input type="radio" name="hosting" value="netlify"> Netlify</label>
    <label><input type="radio" name="hosting" value="vercel"> Vercel</label>
    <label><input type="radio" name="hosting" value="self-hosted"> Self-hosted</label>
  </fieldset>
  
  <fieldset>
    <legend>Static Site Generator</legend>
    <label><input type="radio" name="generator" value="jekyll"> Jekyll</label>
    <label><input type="radio" name="generator" value="hugo"> Hugo</label>
    <label><input type="radio" name="generator" value="11ty"> Eleventy (11ty)</label>
    <label><input type="radio" name="generator" value="gatsby"> Gatsby</label>
    <label><input type="radio" name="generator" value="none"> Plain HTML/CSS</label>
  </fieldset>
  
  <fieldset>
    <legend>IndieWeb Features</legend>
    <label><input type="checkbox" name="features" value="webmention"> Webmention support</label>
    <label><input type="checkbox" name="features" value="microformats"> Microformats markup</label>
    <label><input type="checkbox" name="features" value="rss"> RSS feed</label>
    <label><input type="checkbox" name="features" value="indieauth"> IndieAuth login</label>
  </fieldset>
  
  <fieldset>
    <legend>Contact Information</legend>
    <label for="domain">Your Domain:</label>
    <input type="url" id="domain" name="domain" placeholder="https://your-site.com">
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </fieldset>
  
  <button type="submit">Set Up Website</button>
</form>