HTML - <legend> Tag

HTML <legend> tag is used to specify the caption of <fieldset> element. It typically rests on top of the frame because it is a caption. A border is drawn around an element's content using the <fieldset> tag on that border we can set the caption using the <legend> tag. It helps us to indentify the wraped group by following that caption set by the legend tag.

Syntax

<legend>.......</legend>

Attribute

HTML legend tag supports Global and Event attributes of HTML. And a specific attribute as well which are listed bellow.

Attribute	Value	Description
align	left right center justify	This is used to set the alignment of the element horizontally.

Examples of HTML legend Tag

Bellow examples will illustrate the usage of legend tag. Where, when and how to use it to create caption and how we can style that caption using CSS.

Creating caption using <legend> tag

In the following example, we are using the HTML <legend> tag to define the caption for its parent <fieldset> tag. The legend tag can be used on any element to give a caption but better to use it with fieldset elements.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML legend tag</title>
</head>
<body>
   <fieldset>
      <!-- Using legend Tag to Create Caption -->
      <legend>Cpation</legend>
   </fieldset>
</body>
</html>

Styling the caption using CSS

In this example, we are using the HTML <legend> tag to create a caption named "Message" for its parent tag <fieldset>. Using the CSS, we are trying to give some styling to the HTML <legend> tag.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML legend tag</title>
   <style>
      legend {
         color: blue;
         font-size: 25px;
         width: 100px;
         background-color: aquamarine;
         padding-left: 5px;
      }
   </style>
</head>
<body>
   <fieldset>
      <!-- Using legend Tag to Create Caption -->
      <legend>Message</legend>
      <p>
          Tutorials Point is an online learning platform providing free tutorials,
          paid premium courses, and eBooks. Learn the latest technologies and 
          programming languages SQL, MySQL, Python, C, C++, Java, Python, PHP,
          Machine Learning, data science, AI, Prompt Engineering and more.
      </p>
   </fieldset>
</body>
</html>

Caption on a Login form

Considering the following example, we are creating a caption(title) named "User Details" for HTML <fieldset> element using the HTML <legend> tag. The created caption will represent the title of the form.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML legend tag</title>
   <style>
      legend {
         color: rgb(168, 10, 193);
         font-size: 25px;
         width: 100px;
         background-color: rgb(164, 205, 14);
      }
      fieldset{
          width: 50%;
      }
      label{
          font-size: 24px;
      }
      input {
          border-radius: 5px;
          width: 95%;
      }
   </style>
</head>
<body>
   <fieldset>
      <!-- Using legend Tag to Create Caption 
           and align attribute to align the caption -->
      <legend align="center">Login</legend>
        <form>
        <label for="">Username</label>
        <br>
        <input type="text">
        <br>
        <label for="">Password</label>
        <br>
        <input type="password">
        <br><br>
        <button>Submit</button>
      </form>
   </fieldset>
</body>
</html>

Supported Browsers

Tag
legend	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm