<legend>

Definition

The HTML <legend> element is used to provide a caption or a title for the content of a <fieldset> element, which is used to group related form elements together. The <legend> element typically appears at the top of the <fieldset> element and provides a brief description or a title for the group of form controls within the fieldset.

The content of the <legend> element should be concise and descriptive, and it should clearly indicate the purpose of the form controls contained within the <fieldset> element. The <legend> element can be styled using CSS to change its appearance, such as its font size, color, and alignment.

Examples

Here is an example of how to use the <legend> element:

<fieldset>
  <legend>Personal Information</legend>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br>
</fieldset>

In this example, the <legend> element provides a title for the group of form controls that collect personal information. The two form controls within the fieldset are labeled using the <label> element, which is associated with the form control using the for attribute.

Attributes

This element only includes the global attributes.

Best Practices

• Use the <legend> element to provide a clear and concise description of the group of form controls within the <fieldset> element.
• Keep the content of the <legend> element short and meaningful. Avoid using long or ambiguous descriptions.
• Use proper markup by placing the <legend> element immediately after the opening <fieldset> tag.
• Use semantic markup by associating the <label> elements with their corresponding form controls using the for attribute.
• Avoid nesting one <fieldset> element inside another. Instead, use multiple <fieldset> elements to group related form controls together.
• Use CSS to style the <legend> element to match the design of your webpage.
• Use the accessibility features of HTML to ensure that the <legend> element is accessible to users with disabilities.

Accessibility Considerations

• Provide a clear and concise description in the <legend> element that accurately describes the purpose of the <fieldset>.
• Ensure that the <legend> element is programmatically associated with its corresponding <fieldset> element. This can be done by using the id attribute on the <fieldset> element and the for attribute on the <legend> element, or by nesting the <legend> element inside the <fieldset> element.
• Ensure that the content of the <legend> element is readable and visible to all users. This can be done by using sufficient contrast between the text and the background, and by using appropriate font sizes and styles.
• Consider using ARIA attributes to provide additional information and context to assistive technology users. For example, the aria-describedby attribute can be used to provide a more detailed description of the <fieldset> element.
• Avoid using visual cues alone to convey the purpose of the <fieldset> element. For example, using color or iconography to differentiate between different sections of a form may not be sufficient for users who are colorblind or who use screen readers.

Browser Compatibility