legend (HTML element)

Spec
Depr. Empty Version
No No HTML 4
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

<legend>
</legend>

Description

The legend is used to provide the caption text for grouped form controls and text contained in a fieldset. By default, the text appears on the left, over the boxed outline that the fieldset creates, as Figure 1 shows (the word “Friendship” is the content). No other content may appear between the opening <fieldset> tag and the opening <legend> tag—only whitespace is allowed.

Figure 1. A fieldset with the legend “Friendship” grouping related items in the form A fieldset with the legend of ‘friendship’ grouping related items in the form

Example

This legend element identifies three related XFN attributes (the online reference has more on XFN):

<form>
  <fieldset>
    <legend>Friendship</legend>
    <input type="radio" name="radFriendship" value="Not_Applicable"
        id="radFriendNot_Applicable"/>
    <label for="radFriendNot_Applicable">Not_Applicable</label>
    <input type="radio" name="radFriendship" value="acquaintance"
        id="radFriendaquaintence"/>
    <label for="radFriendaquaintence">acquaintance</label>
    <input type="radio" name="radFriendship" value="friend"
        id="radFriendfriend"/>
    <label for="radFriendfriend">friend</label>
  </fieldset>
  ⋮
</form>

Use This For …

Use this element to give a name to the grouped form elements. There are no hard rules about what goes inside the <legend> and </legend> tags, but take care: some browsers have a hard time applying styles to the legend (particularly when you want to remove the spacing to the left of the text using CSS padding or margin properties), so it’s good practice to keep the text content as succinct as possible, in order to avoid styling problems. Another reason to keep the text short is that this is best for screen reader users who may, depending on what screen reader they have and how it is configured, have to listen to the announcement of the legend text with every form input inside the fieldset that the legend. relates to.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full

It causes no compatibility issues, and has excellent support across all tested browsers.

In this Section

User-contributed notes

Related Products