The <legend> tag defines a caption or title for a <fieldset> element. It's used to group related form elements and provide a descriptive label for the group. The legend appears at the top of the fieldset border.

<legend

Step 2

The <legend> tag must be placed as the first child of a <fieldset> element. It provides a semantic title for the grouped form controls. This improves accessibility and helps users understand the form structure.

<fieldset>
  <legend>Personal Information</legend>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
</fieldset>

Step 3

Use fieldset and legend to organize complex forms into logical sections. For example, group contact information, shipping address, and payment details separately. This makes forms more accessible and easier to navigate.

<fieldset>
  <legend>Contact Information</legend>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
</fieldset>

Step 4

In the browser, the legend appears as a title within the fieldset border. Screen readers announce the legend when users navigate to the fieldset, improving accessibility for form navigation.

<fieldset>
  <legend>Personal Information</legend>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
</fieldset>

Step 5

Checkpoint: Which element must contain a <legend> tag?

<fieldset>
  <legend>Title</legend>
</fieldset>

Step 6

Correct! The <legend> tag must be placed inside a <fieldset> element as its first child. This creates a semantic grouping of form elements with a descriptive title.

<fieldset>
  <legend>Title</legend>
</fieldset>

Step 7

Now it's your turn. Fieldset and legend help organize complex forms. Complete the challenges below to master the <legend> tag!

legend.html

1 / 7

📜

Tutor:The <legend> tag defines a caption or title for a <fieldset> element. It's used to group related form elements and provide a descriptive label for the group. The legend appears at the top of the fieldset border.

⭐ 0 EXP

Legend Mastery

Unlock nodes by learning fieldset and legend structure.

Concept 1: The Legend Tag

The <legend> tag defines a caption or title for a <fieldset> element. It's used to group related form elements and provide a descriptive label for the group. The legend appears at the top of the fieldset border.

System Check

Which element must contain a <legend> tag?

Community Holo-Net

Share Form Organization

Created well-organized forms with fieldset and legend? Share your code and best practices.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

HTML <legend> Tag

Pascual Vila

Frontend Instructor.

Fieldset Structure

The <legend> tag must be placed as the first child of a <fieldset> element. It provides a semantic title for the grouped form controls. This improves accessibility and helps users understand the form structure.

Form Organization

Accessibility Benefits

The legend appears as a title within the fieldset border. Screen readers announce the legend when users navigate to the fieldset, improving accessibility for form navigation. This helps users understand which form elements belong together.

Best Practices

Always place the legend as the first child of the fieldset. Use descriptive text that clearly identifies the group of form elements. Use fieldset and legend for complex forms with multiple sections, not for simple single-field forms.

Legend Tag Glossary

<legend>: HTML element that defines a caption or title for a <fieldset> element. Must be placed as the first child of the fieldset.
<fieldset>: HTML element that groups related form elements together. The legend provides a title for this group.
First Child Requirement: The legend must be the first child element of the fieldset. This ensures proper semantic structure and accessibility.
Form Organization: Use fieldset and legend to organize complex forms into logical sections (e.g., contact info, shipping address, payment details). This improves accessibility and user experience.
Accessibility: Screen readers announce the legend when users navigate to the fieldset, helping users understand which form elements belong together. This improves form navigation for assistive technologies.

📖 INDEX