HTML <legend> Tag

The HTML <legend> tag is used to provide a caption or title for the <fieldset> element, which is often used to group related form elements. The <legend> tag improves the accessibility and readability of forms by providing context to the group of inputs contained within a <fieldset>. By clearly defining sections of a form, it helps users understand the purpose of the grouped fields, especially in lengthy or complex forms.

Syntax of the <legend> Tag

The <legend> tag is always used in conjunction with the <fieldset> element. Here's the basic Syntax:

html
<fieldset>
    <legend>Caption or Title</legend>
    <!-- Form elements go here -->
</fieldset>

The <legend> tag must be placed as the first child of the <fieldset> element. It provides a title for the group of fields enclosed within the <fieldset>.

Attributes of the <legend> Tag

The <legend> tag supports both global and event attributes, which can be used to style and interact with the content more effectively.

Common Attributes:

  • Global attributes: These include standard HTML attributes like class,id,lang, and style which allow for CSS styling and JavaScript interactions.
  • Event attributes: You can use event handlers like onclick, onmouseover, and onfocus to add dynamic functionality to the <legend> tag.

Example attributes:

html
<legend class="form-title" style="font-weight: bold;">Personal Information</legend>

In this example, global attributes are used to apply CSS styling and give a class name to the <legend>.

Examples of HTML <legend> Tag

Example 1: Basic <legend>Usage

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Legend Example</title>
</head>
<body>
    <form>
        <fieldset>
            <legend>Personal Information</legend>
            <label for="name">Name:</label>
            <input type="text" id="name" name="name"><br><br>

            <label for="email">Email:</label>
            <input type="email" id="email" name="email"><br><br>
        </fieldset>
    </form>
</body>
</html>

In this example, the <legend> tag is used to title a group of form fields related to personal information. It makes the form section more understandable.

Example 2: Styling the <legend> Tag

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled Legend Example</title>
    <style>
        fieldset {
            border: 2px solid #ccc;
            padding: 10px;
        }
        legend {
            font-weight: bold;
            color: #0073e6;
        }
    </style>
</head>
<body>
    <form>
        <fieldset>
            <legend>Account Details</legend>
            <label for="username">Username:</label>
            <input type="text" id="username" name="username"><br><br>

            <label for="password">Password:</label>
            <input type="password" id="password" name="password"><br><br>
        </fieldset>
    </form>
</body>
</html>

In this example, the <legend> is styled to make it stand out, improving the visual hierarchy of the form section.

FAQs About HTML<legend>Tag

Q1: What is the purpose of the HTML <legend> tag?
A: The <legend> tag is used to provide a caption or title for a group of form elements contained within a <fieldset>. It improves the accessibility and readability of forms.

Q2: Can I style the <legend> tag?
A: Yes, the <legend> tag supports global attributes, which means you can style it using CSS. You can apply styles such as font-weight, color, and background-color to enhance its appearance.

Q3: Is the <legend> tag required when using the <fieldset> element?
A: While not mandatory, it is highly recommended to use the <legend> tag to describe the purpose of the grouped fields within a <fieldset>. This is especially important for accessibility and usability.

Q4: Does the <legend> tag improve accessibility?
A: Yes, the <legend> tag significantly improves form accessibility. Screen readers announce the <legend> text, which helps users understand the grouped fields, especially those with visual impairments.

Q5: Where should the <legend> tag be placed within the <fieldset>?
A: The <legend> tag should always be the first child of the <fieldset> element. This placement ensures proper rendering and accessibility.

tools

HTML

Related Articles