HTML <legend> Tag

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <legend> element is used to provide a caption or title for a <fieldset>, which groups related form controls together. It is particularly useful for enhancing the accessibility and clarity of forms, as it informs users about the purpose of the grouped inputs. Visually, browsers typically render <legend> text in bold and slightly offset from the rest of the fieldset content, making it stand out as a heading for the grouped controls.

Semantically, <legend> helps screen readers convey context to users, ensuring that each set of related form elements is clearly labeled. For example, if a form has a section for personal information and another for payment details, using <fieldset> with <legend> allows both sighted and visually impaired users to understand the grouping and purpose of the inputs.

A <legend> must always be the first child of a <fieldset> to maintain proper semantic structure and accessibility. While its content is usually plain text, it can also include inline elements like <span> or <em> for styling purposes.

Properties

Permitted Parents: A <fieldset> whose first child is this <legend> element
Content: Inline and text
Start/End Tags: Start tag: required, End tag: required

Example

HTML

<form>

  <fieldset>

    <legend>Personal Information:</legend>

    Name: <input type="text" size="30" /><br />

    Email: <input type="text" size="30" /><br />

    Date of birth: <input type="text" size="10" />

  </fieldset>

</form>

Result

Editor

Attributes

None

Global Attributes

The <legend> tag also supports the Global Attributes in HTML5

Event Attributes

The <legend> tag also supports the Event Attributes in HTML5

Browser Support

The following information will show you the current browser support for the HTML <legend> tag. Hover over a browser icon to see the version that first introduced support for this HTML tag.