Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Michael Leismeister
Michael Leismeister
3,706 Points

What is the difference in using <legend> tag vs h1 or h2 to create a title for form?

Just wondering why in forms legend tag is used rather than a h1 or h2 tag?

2 Answers

Jonathan Cousins
Jonathan Cousins
4,160 Points

H1 and H2 are headings of block of content. Forms are not content.

Legends are only meant to be used within a fieldset element. As stated by HTML5 doctor.

"The legend element represents a caption for the rest of the contents of the legend element's parent fieldset element, if any."

Here is an example snippet of the legend element in use:

<form id="app-login" action="process.php">
  <fieldset>
    <legend>Login Details</legend>
    <div>
      <label for="user-name">Username:</label>
      <input name="user-name" type="email" placeholder="Your username is your email address" required autofocus>
    </div>

    <div>
      <label for="password">Password:</label>
      <input name="password" type="password" placeholder="6 digits, a combination of numbers and letters" required>
    </div>
    <div>
      <input name="login" type="submit" value="Login">
    </div>
  </fieldset>
</form>
Ernestas Sipavicius
Ernestas Sipavicius
6,327 Points
Ernestas Sipavicius
Ernestas Sipavicius
6,327 Points

For seo:

The h1 tag should contain your targeted keywords, ones that closely relate to the page title and are relevant to your content. The h2 tag is a subheading and should contain similar keywords to your h1 tag. Your h3 is then a subheading for your h2 and so on. Think of them as a hierarchy based on importance, the above being more important than the below.

The legend tag defines a caption for the fieldset element in form.