Table of contents

HTML <legend> Tag

What is HTML <legend> Tag?

The HTML legend tag is used to define a caption or title for the content inside a fieldset element. It provides a descriptive label that explains what information the group of form elements represents. The legend tag is important because it improves the accessibility and readability of forms. Screen readers use the legend text to describe the purpose of each fieldset, helping users understand form sections easily. It is placed directly after the opening fieldset tag and before the form controls.

Syntax of the HTML <legend> Tag

plaintext
<legend>Legend Text</legend>

The text between the opening and closing legend tags represents the caption for the fieldset. It must always be used within a fieldset element to be valid.

Examples of HTML <legend> Tag

Example 1: Basic HTML Legend Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

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

</body>
</html>

Explanation:
In this basic example, the legend tag defines the title “Personal Information” for the group of form fields inside the fieldset. This makes the form more structured and clear for users.

Example 2: SEO Optimized HTML Legend Tag

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

  <form action="https://www.scholar247.com/signup">
    <fieldset>
      <legend>Scholar247 User Registration</legend>
      Username: <input type="text" name="username"><br>
      Password: <input type="password" name="password"><br>
      Email: <input type="email" name="email">
    </fieldset>
  </form>

</body>
</html>

Explanation:
This example uses the legend tag for an SEO-friendly form section titled “Scholar247 User Registration.” The title includes the brand name Scholar247, which helps in branding and better search relevance.

Attributes of the HTML <legend> Tag

The HTML legend tag does not support any specific attributes. It only contains plain text or inline elements that act as the caption for the fieldset.

However, you can apply global attributes like:
• id – to assign a unique identifier.
• class – to apply CSS styling.
• style – to add inline styling for positioning or color.
• title – to provide additional information as a tooltip.

Best Practices for HTML <legend> Tag

• Always use the legend tag inside the fieldset element.
• Keep the text short and descriptive for better readability.
• Avoid using multiple legend tags in one fieldset.
• Use CSS to style the legend tag for consistent form design.
• Include keywords when relevant to improve SEO and accessibility.

FAQs About the HTML <legend> Tag

Q1: What is the purpose of the legend tag?

The legend tag defines a caption for the fieldset element, giving a clear label to a group of related form controls.

Q2: Can the legend tag be used outside the fieldset tag?

No. The legend tag must always be used inside a fieldset tag to be valid in HTML.

Q3: Does the legend tag support any attributes?

No specific attributes are defined for the legend tag, but it can use global HTML attributes like id, class, and style.

Q4: How does the legend tag help accessibility?

Screen readers use the legend text to announce the purpose of each group of form fields, helping visually impaired users navigate forms more easily.

Q5: Can the legend tag be styled with CSS?

Yes, you can style the legend tag using CSS properties such as color, font-size, margin, or border to match your website’s design.

HTML

Related Articles