HTML <legend> Legend Tag
Tags: learnhtml, htmll
Published: 2021-05-10 08:42:17

---
title: HTML <legend> Legend Tag
published: true
date: 2021-02-25 05:03:21 UTC
tags: LearnHTML,HTMLL
canonical_url: https://sharepointanchor.com/learn-html/html-legend-tag/
---

The **<legend> Legend tag** is used to **define the caption or title** for its parent element in an HTML document. It is the **first child element** of the **<fieldset>** tag. The <legend> tag is used to **assign the caption** for the **<fieldset>** element.

This tag is also used to **specify the titles** for form sections being an alternative to the **<h1>-<h6> heading** tags. By using the **<legend>** tag with **<form>** elements, it is easy to **understand the purpose of grouped form** elements.

<svg aria-hidden="true" focusable="false" data-icon="clock" width="20" height="20" fill="none" stroke="currentColor" style="display:inline-block;vertical-align:-0.1em" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>Estimated reading time: 4 minutes

## Syntax:

This tag contains both the **starting <legend> tag** and the **ending </legend> tag**. The content is written between these two tags.

```

<legend> Title </legend>

```

### HTML <legend> Tag Characteristics:
<style> th, td{ padding: 20px; } </style>

| HTML <legend> tag | Represent the caption for the contents. |
| Content categories | None |
| Permitted content | Phrasing content and headings (h1-h6 elements) |
| Tag omission | None, both opening and closing tags are mandatory. |
| Permitted parents | It is the first child element for <fieldset> tag. |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | No role permitted |
| DOM interface | HTMLLegendElement |

## Sample of the HTML <legend> Tag:

```

<!DOCTYPE html>
<html>
  <head>
    <title>HTML <legend> Tag</title>
  </head>
  <body>
<h2>Example of HTML <legend> Tag</h2>
    <form>
      <fieldset>
        <legend>Personal Information:</legend>
        First Name:
        <input type="text">
        <br>
	<br> Last Name:
        <input type="text">
        <br>
        <br> E-mail ID:
        <input type="email">
        <br>
        <br> Date of Birth:
        <input type="number">
        <br/>
        <br/> Birth Place:
        <input type="text">
      </fieldset>
    </form>
  </body>
</html>

```

## Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/result-45.png)<figcaption>Result</figcaption>

### Download Sample File:

[HTML-legend-tag](https://sharepointanchor.com/wp-content/uploads/2021/02/HTML-legend-tag.html)[Download](https://sharepointanchor.com/wp-content/uploads/2021/02/HTML-legend-tag.html)

## Use CSS property to style an HTML <legend> Tag:

You can also use the **CSS styling property** to change the initial appearance of the legend.

### Sample of the HTML <legend> tag with CSS:

```

<!DOCTYPE html>
<html>
  <head>
    <title>HTML <legend> Tag</title>
    <style>
      form {
        width: 55%;
      }
      fieldset {
        padding: 25px;
      }
      label {
        display: inline-block;
        width: 95px;
        text-align: right;
      }
      legend {
        display: block;
        padding: 15px;
        margin-bottom: 10px;
        background-color: #43156D;
        color: white;
      }
    </style>
  </head>
  <body>
   <h2>Example of HTML <legend> Tag with CSS</h2>
    <form>
      <fieldset>
        <legend>Personal data:</legend>
        <label>Name:</label>
        <input type="text">
        <br/>
        <br/>
        <label>E-mail:</label>
        <input type="email">
        <br/>
        <br/>
        <label>Date of birth:</label>
        <input type="number">
        <br/>
        <br/>
        <label>Birth Place:</label>
        <input type="text">
      </fieldset>
    </form>
  </body>
</html>

```

### Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/resu.png)<figcaption>Result</figcaption>

## Attributes:

The HTML legend tag supports both the **Global Attributes** and **Event Attributes**.

<style> th, td{ padding: 20px; } </style>

| Attributes | Value | Description |
| --- | --- | --- |
| align | 
- top
- bottom
- left
- right
 | This value helps to define the **alignment of the caption**. **It is not supported in HTML 5.** |

## Styling Methods for <legend> Tag:

You can use the following properties to style an HTML legend tag.

### Properties to style the visual weight/emphasis/size of the text in <legend> tag:

- **CSS font-style** – This CSS property helps to set the font style of the text such as normal, italic, oblique, initial, inherit.
- **CSS font-family** – This CSS property specifies a prioritized list of one or more font family names or generic family names for the selected element.
- **CSS font-size** – This CSS property will help to set the size of the font.
- **CSS font-weight** – This CSS property used to define whether the font should be bold or thick.
- **CSS text-transform** – This CSS property will control the text case and capitalization.
- **CSS test-decoration** – This CSS property specifies the decoration added to text such as **text-decoration-line** , **text-decoration-color** , **text-decoration- style**.

### Styles to coloring the text in <legend> Tag:

- **CSS color** – This CSS property will specify the color of the text content and decorations.
- **CSS background-color** – This CSS property helps to set the background color of an element. 

### Text layout styles for <legend> Tag:

- **CSS text-indent** – This CSS property is used to specify the indentation of the first line in a text block.
- **CSS text-overflow ** – This CSS property helps to describe how overflowed content that is not displayed should be signaled to the user.
- **CSS white-space** – This CSS property describes how white-space inside an element is handled.
- **CSS word-break**  – This CSS property decides where the lines should be broken.

### Other Properties for <legend> Tag:

- **CSS text-shadow**  – This CSS property helps to add the shadow to text.
- **CSS text-align-last**  – This CSS property will set the alignment of the last line of the text.
- **CSS line-height** – This CSS property defines the height of a line.
- **CSS letter-spacing** – This CSS property helps to decide the spaces between letters/characters in a text.
- **CSS word-spacing** – This CSS property specifies the spacing between every word.

## Browser Support:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Browser-Support-10.png)<figcaption>Browser Support</figcaption>

### Related Articles:

- **[HTML <caption> Caption Tag](https://sharepointanchor.com/learn-html/html-caption-tag/)**
- **[HTML <figcaption> Figure Caption Tag](https://sharepointanchor.com/learn-html/html-figcaption-figure-caption-tag/)**
- **[Basic HTML Definitions and Usages in the Real World](https://sharepointanchor.com/learn-html/basic-html-definitions-and-usages-in-real-world/)**
- **[HTML <figure> Figure Tag](https://sharepointanchor.com/learn-html/html-figure-tag/)**
- **[HTML <code> Code Tag](https://sharepointanchor.com/learn-html/html-code-tag/)**

The post [HTML <code><legend></code> Legend Tag](https://sharepointanchor.com/learn-html/html-legend-tag/) appeared first on [Share Point Anchor](https://sharepointanchor.com).