HTML Fieldset Caption

Introduction

The HTML <legend> tag is an important way to provide a caption or title to the child content in the HTML <fieldset> tag. The <legend> tag is used to identify the fieldset content and give a proper title to the page. In this lab, we will learn how to use the <legend> tag and various CSS properties with it.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

Add a <fieldset> tag

First, open your code editor and create a new file called index.html. Add the basic structure to the file by typing html then press tab key.

Add a <fieldset> tag into your HTML document.

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

Add <legend> tag in the <fieldset> tag

Add a <legend> tag within the <fieldset> tag to create a header.

<fieldset>
  <legend>Contact Information</legend>
</fieldset>

Use CSS Properties with <legend> tag

Let's add some CSS properties with our <legend> tag to make it look better.

<style>
  legend {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-align: center;
  }
</style>

Save the file and open the index.html file in your preferred web browser.

Summary

In summary, the HTML <legend> tag helps us provide a caption or title to the child content in the HTML <fieldset> tag. We used various CSS properties with it to make it look better. We hope you can now use the <legend> tag to create headers or titles within your HTML files.