Menu
Menu

    LIVE Classes

    Software Development
    Software Development New

    MongoDB & IIT-M Pravartak certified

    AI & Machine Learning
    AI & Machine Learning New

    Intel & IIT-M Pravartak Certified

    Data Science
    Data Science

    IIT-M Pravartak certified

    Full Stack Development
    Full Stack Development

    IIT-M Pravartak certified

    UI/UX Design
    UI/UX Design

    HCL GUVI certified

    Mechanical CAD
    Mechanical CAD

    Autodesk & IITM Pravartak Certified

    Courses

    Free Courses

    Free Courses

    Paid Courses

    Paid Courses

    Combo Courses

    Combo Courses

    Practice

    CodeKata

    CodeKata

    Sharpen your coding skills, prepare for interviews

    WebKata

    WebKata

    Build basic frontend & backend development skills

    SQLKata

    SQLKata

    Master SQL concepts in relational database management

    Debugging

    Debugging

    A series of programs curated by Industry Experts

    IDE - Online Compiler

    IDE - Online Compiler

    Run & test your code in any programming language

    Resources

    Free Resources

    Free Resources

    Referral

    Referral

    Success Stories

    Success Stories

    Blogs

    Blogs

    Learn Hub

    Learn Hub

    Get The App

    Get The App

    Rewards

    Rewards

    Become an Affiliate

    Become an Affiliate

    Leaderboard

    Leaderboard

    What's New?
    Resume Builder

    Resume Builder

    Our Products

    HackerKID

    HackerKID

    Coding classes platform for K-12 children

    GUVI For Corporates

    GUVI For Corporates

    Meet your Hiring & Training Needs

    Placement Preparation

    Placement Preparation

    Ace Up your Aptitude

    Studytonight

    Studytonight

    Free Programming Resources

Still Confused?WhatsApp

Welcome to HCL GUVI

Welcome Img

Hey there! Welcome to HCL GUVI—Grab Your Vernacular Imprint—where tech learning is easy, fun, and curated specially for you. Incubated by IIT Madras & IIM Ahmedabad in 2014 and now part of HCL Group, we're making quality tech education accessible to all.

Join 3M+ learners breaking barriers and upskilling for a brighter future. We're here to guide you every step of the way! 🚀

LIVE Classes

Live Class Img

Zen Classes are HCL GUVI's most refined and flagship product—live, expert-led tech programs for beginners and pros. With IITM Pravartak affiliations, master Full-Stack, Data Science, DevOps, UI/UX, and more in multiple languages!

Explore More

Courses

Courses Img

Looking for flexibility? HCL GUVI's 200+ self-paced courses let you learn anytime, anywhere! From free lessons to IIT-M & Autodesk-certified programs, gain in-demand skills in your preferred language.

Explore More

Practice Platforms

Practice Platform Img

Enhance your coding skills with HCL GUVI's Practice Platforms—interactive, structured, and designed to help you master programming effortlessly.

CodeKata:

A structured coding practice platform with 1500+ coding problems designed by industry experts. Ideal for beginners and professionals preparing for tech interviews with real-world coding challenges.

Try Now >

WebKata:

An interactive platform to master HTML, CSS, JavaScript, and Bootstrap with a live coding environment. Perfect for hands-on web development practice without any setup.

Try Now >

SQLKata:

A practice ground for mastering SQL queries used in real-world applications. Write, optimize, and refine your queries to build strong database skills.

Try Now >

Debugging:

Hone your bug-fixing skills with real-world debugging challenges in Python, C++, JavaScript, and Golang. More languages coming soon!

Try Now >

IDE:

A free online compiler supporting 20+ programming languages with auto-complete, debugging, and AI-powered code generation—all in the cloud!

Try Now >

Leaderboard

LeaderBoard Img

Climb the leaderboard as you earn Geekoins by learning and practicing! The top scorers get featured, making learning competitive and rewarding. Keep going—you could be next!

Explore More

Rewards

Rewards Img

Earn Geekoins by watching videos and practicing problems, then redeem them for exciting rewards. The more you engage, the more you win!

Explore More

Referral

Referral Img

Love learning with HCL GUVI? Share it with friends! Invite them using your unique link or code and unlock exciting rewards—Amazon vouchers, iPhones, and more. A Win-Win.

Explore More

Profile

Profile Img

Your HCL GUVI profile is your digital portfolio! Track progress, showcase skills, add projects, and build a resume. Keep it updated—opportunities await!

Explore More

That's It! You Are Ready!

Finish Img

You're all set to dive into your learning journey with HCL GUVI. Explore, upskill, and make each step count—exciting possibilities awaits!

Thank you for Reaching us out

Our team will reach you out
within the next 24 hours.

Explore all Programs

HTML Legend Tag

HTML Legend Tag

In HTML, the <legend> tag is used to provide a caption to the content of its parent <fieldset> tag.

  • Basically <legend> tag is used to define a title for child content.
  • We can use <legend> tag to perform various CSS properties.

HTML <legend> Tag Syntax and Usage

The <legend> element requires the start(opening) tag and end(closing) tag.

<legend>
.....content here
</legend>

HTML5 <legend> Tag Basic Example

Here, we have a basic example for a clear understanding of the <legend> tag:

<!doctype html>
<head>
   <title>basic Legend tag example</title>
   <style>
      legend {
      background-color: #000;
      color: #fff;
      padding: 3px 6px;
      }
      .output {
      font: 1rem 'Fira Sans', sans-serif;
      }
      input {
      margin: .4rem;
      }
   </style>
</head>
<body>
   <fieldset>
      <legend>Choose your favorite Fruit</legend>
      <input type="radio" id="mango" name="mango">
      <label for="mango">Mango</label><br/>
      <input type="radio" id="Pineapple" name="Pineapple">
      <label for="Pineapple">Pineapple</label><br/>
      <input type="radio" id="Kiwi" name="Kiwi">
      <label for="Kiwi">Kiwi</label>
   </fieldset>
</body>
</html>

Using various CSS Properties with <legend> Tag

Here, we are using CSS properties with This tag.

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Legend Tag</title> 
        <style> 
            form{ 
            width: 50%; 
            } 
            legend { 
                display: block; 
                padding-left: 10px; 
                padding-right: 10px; 
                border: 3px solid blue; 
                background-color:tomato; 
                color:white;; 
            } 
            label { 
                display: inline-block; 
                float: left; 
                clear: left; 
                width: 90px; 
                margin:5px; 
                text-align: left; 
            } 
            input[type="text"] { 
                width:250px; 
                margin:5px 0px; 
            } 
            .st { 
                font-size:40px; 
                color:orange; 
                font-weight:bold; 
            } 
        </style> 
    </head> 
    <body> 
        <div class = "st">StudyTonight</div> 
        <h2>Legend tag</h2> 
        <form> 
            <fieldset> 
                <legend>STUDENT:</legend> 
                <label>Name:</label><input type="text"> 
                <br> 
                <label>Email:</label><input type="text"> 
                <br> 
                <label>Date of birth:</label><input type="text"> 
                <br> 
                <label>Address:</label><input type="text"> 
                <br> 
                <label>Admission No:</label><input type="text"> 
            </fieldset> 
        </form> 
    </body> 
</html>

HTML <legend> Tag Attributes

This element does not have any specific attributes although this element supports Global and Event attributes.

Default CSS Settings for HTML <legend> Tag

legend {
  display: block;
  padding-left: 2px;
  padding-right: 2px;
  border: none;
}

Browser Support for HTML <legend> Tag

Following browsers support this attribute:

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 4+
  • Apple Safari 1+
  • Opera 4+

Share

You can share this topic with your family and friends on Social Media.

Share in

HTML 5 References Tutorial

AP
Abhishek Pati

HTML 5 References Tutorial

MODULE 1 : HTML Tags - A
lessonHTML a (anchor)
lessonHTML abbr Tag
lessonHTML address Tag
lessonHTML article Tag
lessonHTML aside Tag
lessonHTML audio Tag
MODULE 2 : HTML Tags - B
lessonHTML b (bold)
lessonHTML base Tag
lessonHTML bdi Tag
lessonHTML bdo Tag
lessonHTML blockquote Tag
lessonHTML body Tag
lessonHTML br Tag
lessonHTML button Tag
MODULE 3 : HTML Tags - C
lessonHTML canvas Tag
lessonHTML caption Tag
lessonHTML col Tag
lessonHTML colgroup Tag
lessonHTML cite Tag
lessonHTML code Tag
MODULE 4 : HTML Tags - D
lessonHTML dl Tag
lessonHTML del Tag
lessonHTML dialog Tag
lessonHTML details Tag
lessonHTML div Tag
lessonHTML datalist Tag
lessonHTML dt Tag
lessonHTML dd Tag
lessonHTML data Tag
lessonHTML dfn Tag
MODULE 5 : HTML Tags - E
lessonHTML em Tag
lessonHTML embed Tag
MODULE 6 : HTML Tags - F
lessonHTML fieldset Tag
lessonHTML footer Tag
lessonHTML figure Tag
lessonHTML figcaption Tag
lessonHTML form Tag
MODULE 7 : HTML Tags - H
lessonHTML heading Tags
lessonHTML hr Tag
lessonHTML html Tag
lessonHTML header Tag
lessonHTML head Tag
MODULE 8 : HTML Tags - I
lessonHTML i (italic)
lessonHTML input Tag
lessonHTML img Tag
lessonHTML ins Tag
lessonHTML iframe Tag
MODULE 9 : HTML Tags - K
lessonHTML kbd Tag
MODULE 10 : HTML Tags - L
lessonHTML li Tag
lessonHTML label Tag
lessonHTML Link Tag
lessonHTML Legend Tag
MODULE 11 : HTML Tags - M
lessonHTML Main Tag
lessonHTML Map Tag
lessonHTML Mark Tag
lessonHTML Meter Tag
lessonHTML Meta Tag
MODULE 12 : HTML Tags - N
lessonHTML Nav Tag
lessonHTML Noscript Tag
MODULE 13 : HTML Tags - O
lessonHTML OL Tag
lessonHTML Output Tag
lessonHTML Optgroup Tag
lessonHTML Option Tag
lessonHTML Object Tag
MODULE 14 : HTML Tags - P
lessonHTML P Tag
lessonHTML Progress Tag
lessonHTML Pre Tag
lessonHTML Param Tag
MODULE 15 : HTML Tags - Q
lessonHTML Q Tag
MODULE 16 : HTML Tags - R
lessonHTML RT Tag
lessonHTML Ruby Tag
lessonHTML RP Tag
MODULE 17 : HTML Tags - S
lessonHTML S(strikethrough) Tag
lessonHTML Source Tag
lessonHTML Span Tag
lessonHTML Select Tag
lessonHTML Summary Tag
lessonHTML Samp Tag
lessonHTML Small Tag
lessonHTML Section Tag
lessonHTML Strong Tag
lessonHTML Sub Tag
lessonHTML Sup Tag
lessonHTML Style Tag
lessonHTML Script Tag
MODULE 18 : HTML Tags - T
lessonHTML Title Tag
lessonHTML Textarea Tag
lessonHTML Track Tag
lessonHTML Table Tag
lessonHTML TD Tag
lessonHTML TH Tag
lessonHTML TR Tag
lessonHTML Template Tag
lessonHTML Tbody Tag
lessonHTML Thead Tag
lessonHTML Tfoot Tag
lessonHTML Time Tag
MODULE 19 : HTML Tags - U
lessonHTML u(underline) Tag
lessonHTML UL Tag
MODULE 20 : HTML Tags - V
lessonHTML Var Tag
lessonHTML Video Tag
MODULE 21 : HTML Tags - W
lessonHTML Wbr Tag
MODULE 22 : Miscellaneous
lessonHTML Event Attributes
lessonHTML Global Attributes

HTML 5 References Tutorial

MODULE 1 : HTML Tags - A
lessonHTML a (anchor)
lessonHTML abbr Tag
lessonHTML address Tag
lessonHTML article Tag
lessonHTML aside Tag
lessonHTML audio Tag
MODULE 2 : HTML Tags - B
lessonHTML b (bold)
lessonHTML base Tag
lessonHTML bdi Tag
lessonHTML bdo Tag
lessonHTML blockquote Tag
lessonHTML body Tag
lessonHTML br Tag
lessonHTML button Tag
MODULE 3 : HTML Tags - C
lessonHTML canvas Tag
lessonHTML caption Tag
lessonHTML col Tag
lessonHTML colgroup Tag
lessonHTML cite Tag
lessonHTML code Tag
MODULE 4 : HTML Tags - D
lessonHTML dl Tag
lessonHTML del Tag
lessonHTML dialog Tag
lessonHTML details Tag
lessonHTML div Tag
lessonHTML datalist Tag
lessonHTML dt Tag
lessonHTML dd Tag
lessonHTML data Tag
lessonHTML dfn Tag
MODULE 5 : HTML Tags - E
lessonHTML em Tag
lessonHTML embed Tag
MODULE 6 : HTML Tags - F
lessonHTML fieldset Tag
lessonHTML footer Tag
lessonHTML figure Tag
lessonHTML figcaption Tag
lessonHTML form Tag
MODULE 7 : HTML Tags - H
lessonHTML heading Tags
lessonHTML hr Tag
lessonHTML html Tag
lessonHTML header Tag
lessonHTML head Tag
MODULE 8 : HTML Tags - I
lessonHTML i (italic)
lessonHTML input Tag
lessonHTML img Tag
lessonHTML ins Tag
lessonHTML iframe Tag
MODULE 9 : HTML Tags - K
lessonHTML kbd Tag
MODULE 10 : HTML Tags - L
lessonHTML li Tag
lessonHTML label Tag
lessonHTML Link Tag
lessonHTML Legend Tag
MODULE 11 : HTML Tags - M
lessonHTML Main Tag
lessonHTML Map Tag
lessonHTML Mark Tag
lessonHTML Meter Tag
lessonHTML Meta Tag
MODULE 12 : HTML Tags - N
lessonHTML Nav Tag
lessonHTML Noscript Tag
MODULE 13 : HTML Tags - O
lessonHTML OL Tag
lessonHTML Output Tag
lessonHTML Optgroup Tag
lessonHTML Option Tag
lessonHTML Object Tag
MODULE 14 : HTML Tags - P
lessonHTML P Tag
lessonHTML Progress Tag
lessonHTML Pre Tag
lessonHTML Param Tag
MODULE 15 : HTML Tags - Q
lessonHTML Q Tag
MODULE 16 : HTML Tags - R
lessonHTML RT Tag
lessonHTML Ruby Tag
lessonHTML RP Tag
MODULE 17 : HTML Tags - S
lessonHTML S(strikethrough) Tag
lessonHTML Source Tag
lessonHTML Span Tag
lessonHTML Select Tag
lessonHTML Summary Tag
lessonHTML Samp Tag
lessonHTML Small Tag
lessonHTML Section Tag
lessonHTML Strong Tag
lessonHTML Sub Tag
lessonHTML Sup Tag
lessonHTML Style Tag
lessonHTML Script Tag
MODULE 18 : HTML Tags - T
lessonHTML Title Tag
lessonHTML Textarea Tag
lessonHTML Track Tag
lessonHTML Table Tag
lessonHTML TD Tag
lessonHTML TH Tag
lessonHTML TR Tag
lessonHTML Template Tag
lessonHTML Tbody Tag
lessonHTML Thead Tag
lessonHTML Tfoot Tag
lessonHTML Time Tag
MODULE 19 : HTML Tags - U
lessonHTML u(underline) Tag
lessonHTML UL Tag
MODULE 20 : HTML Tags - V
lessonHTML Var Tag
lessonHTML Video Tag
MODULE 21 : HTML Tags - W
lessonHTML Wbr Tag
MODULE 22 : Miscellaneous
lessonHTML Event Attributes
lessonHTML Global Attributes

ZEN CLASS

LIVE CLASS

Popular Courses

Self-Paced Courses

Practice Platforms

Community

Products

Resources

Company

ZEN CLASS

LIVE CLASS

Popular Courses

Self-Paced Courses

Practice Platforms

Community

Products

Resources

Company

app store
play store
Refer & Earn

HCL GUVI (Grab Your Vernacular Imprint) Geek Network Private Limited is a leading online learning and skills development company, incubated by IIT Madras and IIM Ahmedabad.

Established in 2014 and acquired by the HCL Group in 2022, HCL GUVI is dedicated to providing effective and high-quality learning and skilling programs that transcend language barriers in technology education. HCL GUVI today is trusted by over 3 million learners and 2000+ corporate partners.

app storeplay store
Refer & Earn

HCL GUVI (Grab Your Vernacular Imprint) Geek Network Private Limited is a leading online learning and skills development company, incubated by IIT Madras and IIM Ahmedabad.

Established in 2014 and acquired by the HCL Group in 2022, HCL GUVI is dedicated to providing effective and high-quality learning and skilling programs that transcend language barriers in technology education. HCL GUVI today is trusted by over 3 million learners and 2000+ corporate partners.

app storeplay storeRefer & Earn
Terms and ConditionsPrivacy Policy

HCL GUVI Geeks Network Pvt. Ltd.

Terms and ConditionsPrivacy Policy

HCL GUVI Geeks Network Pvt. Ltd.

Gift IconUnlock Your Exclusive Rewards!

You have exclusive rewards which you can unlock by earning Geekoins. Explore your rewards now!

Explore Rewards