HTML legend Tag

Last Updated : 17 Jun, 2025

The HTML <legend> tag is used to add a title or caption for the content grouped within a <fieldset>element. It should be the first child inside the <fieldset> to clearly describe the grouped form controls. Around 60% of accessible forms on the web use <legend> with <fieldset> to improve clarity and usability for users, including those using screen readers. The <legend> tag also supports global and event attributes in HTML, making it both functional and flexible.

Syntax

<legend> Text </legend>

Attributes

Attribute	Description	Example Value
align	Specifies the alignment of the legend text.	`left`, `center`, `right`

Example 1: In this example, we are using the <legend> tag inside a <fieldset> to group and label form elements related to student information.

index.html

<!DOCTYPE html>
<html>
<body>
    <h1>GeeksforGeeks</h1>
    <strong>HTML Legend Tag</strong>
    <form>
        <fieldset>
            <!-- Legend tag using -->
            <legend>STUDENT::</legend>
            <label>Name:</label>
            <input type="text">
            <br><br>
            <label>Email:</label>
            <input type="text">
            <br><br>
            <label>Date of birth:</label>
            <input type="text">
            <br><br>
            <label>Address:</label>
            <input type="text">
            <br><br>
            <label>Enroll No:</label>
            <input type="text">
        </fieldset>
    </form>
</body>

</html>

Output

HTML legend Tag example 1

Example 2: In this example, the <legend> tag is used to create a titled label for the grouped form elements inside a <fieldset>, with customized styling.

index.html

<!DOCTYPE html>
<html>
<head>
    <style>
        form {
            width: 50%;
        }
        legend {
            display: block;
            padding-left: 10px;
            padding-right: 10px;
            border: 3px solid green;
            background-color: tomato;
            color: white;
            ;
        }
        label {
            display: inline-block;
            float: left;
            clear: left;
            width: 90px;
            margin: 5px;
            text-align: left;
        }
        input[type="text"] {
            width: 250px;
            margin: 5px 0px;
        }

        .gfg {
            font-size: 40px;
            color: green;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="gfg">GeeksforGeeks</div>
    <h2>HTML Legend Tag</h2>
    <form>
        <fieldset>
            <!-- Legend tag using -->
            <legend>STUDENT:</legend>
            <label>Name:</label>
            <input type="text">
            <br>
            <label>Email:</label>
            <input type="text">
            <br>
            <label>Date of birth:</label>
            <input type="text">
            <br>
            <label>Address:</label>
            <input type="text">
            <br>
            <label>Enroll No:</label>
            <input type="text">
        </fieldset>
    </form>
</body>
</html>