Menu
Menu

    LIVE Classes

    VLSI Design Programme
    VLSI Design Programme New

    IIT Delhi 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

    AI DevOps Program
    AI DevOps Program

    HCL GUVI certified

    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

    FixTheCode

    FixTheCode

    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

    Community Hub

    Community Hub

    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

    Play StoreApp Store
Still Confused?WhatsApp

Welcome to HCL GUVI

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

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

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

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 >

FixTheCode:

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

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

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

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

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!

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
  • Home
  • Basic
  • Building a Complete Multi-Section HTML Page

Building a Complete Multi-Section HTML Page

Building a Complete Multi-Section HTML Page

Now let's bring everything from this handbook together into one complete page. This example uses semantic structure, text formatting, a list, an image, and a form, all in one file.

Input:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>My Portfolio</title>

</head>

<body>

 

  <header>

    <h1>Jordan Lee</h1>

    <nav>

      <a href="#about">About</a>

      <a href="#projects">Projects</a>

      <a href="#contact">Contact</a>

    </nav>

  </header>

 

  <main>

    <section id="about">

      <h2>About Me</h2>

      <p>I am a <strong>front-end developer</strong> who loves building clean, simple websites.</p>

      <img src="profile.jpg" alt="Photo of Jordan Lee" width="150">

    </section>

 

    <section id="projects">

      <h2>Projects</h2>

      <ul>

        <li>Personal Blog</li>

        <li>Recipe Finder App</li>

        <li>Weather Dashboard</li>

      </ul>

    </section>

 

    <section id="contact">

      <h2>Contact Me</h2>

      <form action="/submit" method="post">

        <label for="name">Name</label>

        <input type="text" id="name" required>

 

        <label for="email">Email</label>

        <input type="email" id="email" required>

 

        <label for="message">Message</label>

        <textarea id="message" rows="4"></textarea>

 

        <button type="submit">Send</button>

      </form>

    </section>

  </main>

 

  <footer>

    <p>&copy; 2026 Jordan Lee. All rights reserved.</p>

  </footer>

 

</body>

</html>

Explanation:

  • Walk through this slowly. The header holds the name and navigation. Each nav link jumps to a section by id, exactly like we covered in Module 3.
  • main wraps three sections, each with its own heading.
  • The form at the bottom uses labels, inputs, a textarea, and a submit button, all connected properly with matching id and for attributes. This single file uses nearly every concept covered in this handbook.

Output:

Share

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

Share in

HTML Tutorial (From Basics to Implementation)

AP

Abhishek Pati

HTML Tutorial - From Basics to Implementation

MODULE 1 : Getting Started with HTML
lessonWhat is HTML and How the Web Works
lessonSetting Up Your First HTML File
lessonDocument Structure
lessonHTML Tags, Elements and Attributes Explained
MODULE 2 : Text and Content Basics
lessonHeadings (h1 to h6)
lessonParagraphs and Line Breaks
lessonText Formatting
lessonQuotes and Special Characters
MODULE 3 : Links and Navigation
lessonAnchor Tags and Hyperlinks
lessonInternal vs External Links
lessonLinking to Sections on the Same Page
MODULE 4 : Media Elements
lessonImages
lessonAudio Embedding
lessonVideo Embedding
lessonIframes
MODULE 5 : Lists
lessonOrdered Lists
lessonUnordered Lists
lessonNested and Description Lists
MODULE 6 : Tables
lessonTable Structure
lessonTable Headers and Captions
lessonRowspan and Colspan
MODULE 7 : Forms
lessonForm Basics
lessonInput Types
lessonSelect, Textarea and Buttons
lessonLabels, Placeholder and Validation Attributes
MODULE 8 : Semantic and Non-Semantic HTML
lessonNon-Semantic Tags: div and span
lessonSemantic Tags
lessonWhen and Why to Use Semantic Tags
MODULE 9 : HTML and Integration Basics
lessonLinking CSS to HTML
lessonLinking JavaScript to HTML
lessonFavicon and External Resources
MODULE 10 : Attributes Metadata and Best Practices
lessonGlobal Attributes
lessonMeta Tags
lessonComments and Clean Code Practices
lessonAccessibility Basics
MODULE 11 : Final Project
lessonPlanning Your Page Structure
lessonBuilding a Complete Multi-Section HTML Page
lessonReview and Common Mistakes to Avoid
MODULE 12 : Bonus - Styling and Scripting the Project
lessonBase Styles, Header and Section Cards
lessonStyling Lists, Forms and Buttons
lessonBasic JavaScript: Variables and Functions
lessonSelecting Elements and Responding to Clicks
lessonInput & Output of the Project (Updated with Style and Script)

Get in Touch For Details

HTML Tutorial - From Basics to Implementation

    MODULE 1 : Getting Started with HTML
    lessonWhat is HTML and How the Web Works
    lessonSetting Up Your First HTML File
    lessonDocument Structure
    lessonHTML Tags, Elements and Attributes Explained
    MODULE 2 : Text and Content Basics
    lessonHeadings (h1 to h6)
    lessonParagraphs and Line Breaks
    lessonText Formatting
    lessonQuotes and Special Characters
    MODULE 3 : Links and Navigation
    lessonAnchor Tags and Hyperlinks
    lessonInternal vs External Links
    lessonLinking to Sections on the Same Page
    MODULE 4 : Media Elements
    lessonImages
    lessonAudio Embedding
    lessonVideo Embedding
    lessonIframes
    MODULE 5 : Lists
    lessonOrdered Lists
    lessonUnordered Lists
    lessonNested and Description Lists
    MODULE 6 : Tables
    lessonTable Structure
    lessonTable Headers and Captions
    lessonRowspan and Colspan
    MODULE 7 : Forms
    lessonForm Basics
    lessonInput Types
    lessonSelect, Textarea and Buttons
    lessonLabels, Placeholder and Validation Attributes
    MODULE 8 : Semantic and Non-Semantic HTML
    lessonNon-Semantic Tags: div and span
    lessonSemantic Tags
    lessonWhen and Why to Use Semantic Tags
    MODULE 9 : HTML and Integration Basics
    lessonLinking CSS to HTML
    lessonLinking JavaScript to HTML
    lessonFavicon and External Resources
    MODULE 10 : Attributes Metadata and Best Practices
    lessonGlobal Attributes
    lessonMeta Tags
    lessonComments and Clean Code Practices
    lessonAccessibility Basics
    MODULE 11 : Final Project
    lessonPlanning Your Page Structure
    lessonBuilding a Complete Multi-Section HTML Page
    lessonReview and Common Mistakes to Avoid
    MODULE 12 : Bonus - Styling and Scripting the Project
    lessonBase Styles, Header and Section Cards
    lessonStyling Lists, Forms and Buttons
    lessonBasic JavaScript: Variables and Functions
    lessonSelecting Elements and Responding to Clicks
    lessonInput & Output of the Project (Updated with Style and Script)

    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 4.8 million users, 20 languages and 2500+ 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 4.8 million users, 20 languages and 2500+ corporate partners.

    app storeplay storeRefer & Earn
    Terms and ConditionsPrivacy Policy

    HCL GUVI Geek Network Pvt. Ltd.

    Terms and ConditionsPrivacy Policy

    HCL GUVI Geek Network Pvt. Ltd.