What is the use of <legend> tag in HTML ?

Last Updated : 13 Jan, 2022

In this article, we will discuss <legend> tag in HTML. The legend tag is used to define the title for the child’s contents. The legend elements are the parent element. This tag is used to define the caption for the <fieldset> element.

Syntax:

<legend> Some Text...... </legend>

Example 1: In this example, we are going to create a student “Name” and “No” in the student legend tag.

HTML

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

Output:

Example 2: The following example demonstrates, how to add CSS styles to the legend tag.

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 -->
            <legend>STUDENT:</legend> 
            <label>Name:</label> 
            <input type="text"> 
            <br> 
  
            <label> No:</label> 
            <input type="text"> 
        </fieldset> 
    </form> 
</body> 
  
</html> 