The 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 tag. The tag is used to assign the caption for the element.
This tag is also used to specify the titles for form sections being an alternative to the -
tags. By using the tag with elements, it is easy to understand the purpose of grouped form elements. heading
Estimated reading time: 4 minutes
Syntax:
This tag contains both the starting tag and the ending tag. The content is written between these two tags.
<legend> Title </legend>
HTML Tag Characteristics:
th, td{ padding: 20px; }
| HTML 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
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | No role permitted |
| DOM interface | HTMLLegendElement |
Sample of the HTML 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:
Download Sample File:
Use CSS property to style an HTML Tag:
You can also use the CSS styling property to change the initial appearance of the legend.
Sample of the HTML 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:
Attributes:
The HTML legend tag supports both the Global Attributes and Event Attributes.
th, td{ padding: 20px; }
| 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 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 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 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 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 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:
Related Articles:
- HTML Caption Tag
- HTML
Figure Caption Tag - Basic HTML Definitions and Usages in the Real World
- HTML Figure Tag
- HTML
Code Tag
The post HTML Legend Tag appeared first on Share Point Anchor.
Top comments (0)