HTML - <legend> Tag

Quiz

Introduction to <legend> Tag

The HTML <legend> tag is used to provide the caption or title of a <fieldset> element. The <fieldset> help to groups the form elements together and the <legend> acts as its descriptive heading. It improves the semantic structure and accessibility of the web forms.

The <legend> tag must be the first child of a <fieldset> and and by default it is styled to distinguish it from regular text. we can customize the appearance of the <legend> tag using the CSS.

Syntax

Following is the syntax of HTML <legend> tag −

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

Attributes

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.

Example : Basic Usage

Let's look at the following example, where we are going to consider the basic usage of the <legend> tag.

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

Example : Applying CSS

Consider the following example, where we are going to use the <legned> tag and applying the CSS properties to it.

<!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>

Example : Using Multiple <legend> Tags

In the following example, we are going to consider the nested fieldset with the multiple <legend> tags.

<DOCTYPE html>
<html>
<style>
    body {
        text-align: center;
        font-family: verdana;
    }
    label {
        color: blueviolet;
        font-size: 20px;
        color: green;
    }
</style>
<body>
<fieldset>
  <legend>SIGN IN</legend>
  <fieldset>
    <legend>Login Details</legend>
    <label for="email">Email : </label>
    <input type="text" id="email" name="email">
  </fieldset>
  <fieldset>
    <legend>Answer Security Question</legend>
    <label for="security">Your Nick Name:</label>
    <input type="text" id="security" name="security">
  </fieldset>
</fieldset>
</body>
</html>

Supported Browsers

Tag
legend	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm

Print Page