HTML Div – Solved Practice Questions

By /

Introduction

The <div> tag is a block-level container used to group HTML elements into sections. It helps organize webpages, making the code cleaner and easier to style with CSS. Developers commonly use <div> to create headers, content areas, sidebars, cards, and footers.

Question 1

Problem Statement

Create a webpage that groups a heading and a paragraph inside a <div>.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>HTML Div Example</title>
</head>
<body>

    <div>
        <h1>Welcome to HTML</h1>
        <p>HTML is the foundation of web development.</p>
    </div>

</body>
</html>

Output

Welcome to HTML

HTML is the foundation of web development.

Step-by-Step Explanation

  • <div> creates a section.
  • Both the heading and paragraph belong to the same group.
  • <div> is a block-level element, so it starts on a new line.

Question 2

Problem Statement

Create two separate sections using two <div> elements.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Multiple Divs</title>
</head>
<body>

    <div>
        <h2>About Us</h2>
        <p>We teach web development.</p>
    </div>

    <div>
        <h2>Contact Us</h2>
        <p>Email: info@example.com</p>
    </div>

</body>
</html>

Output

About Us

We teach web development.

Contact Us

Email: info@example.com

Step-by-Step Explanation

  • Each <div> creates a separate section.
  • Related content is grouped together.
  • This improves code organization.

Question 3

Problem Statement

Create a student profile card using a <div>.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Student Profile</title>
</head>
<body>

    <div>
        <h2>Rahul Sharma</h2>
        <p>Class: 10</p>
        <p>School: ABC Public School</p>
    </div>

</body>
</html>

Output

Rahul Sharma

Class: 10

School: ABC Public School

Step-by-Step Explanation

  • One <div> contains all student details.
  • Related information stays together.
  • This is commonly used for profile cards.

Question 4

Problem Statement

Create a webpage with a Header and Main Content using separate <div> elements.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Website Layout</title>
</head>
<body>

    <div>
        <h1>My Website</h1>
    </div>

    <div>
        <h2>Latest News</h2>
        <p>Welcome to our website.</p>
    </div>

</body>
</html>

Output

My Website

Latest News

Welcome to our website.

Step-by-Step Explanation

Question 5

Problem Statement

Create a product card using a <div>.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Product Card</title>
</head>
<body>

    <div>
        <h2>Wireless Mouse</h2>
        <p>Price: ₹700</p>
        <p>In Stock</p>
    </div>

</body>
</html>

Output

Wireless Mouse

Price: ₹700

In Stock

Step-by-Step Explanation

  • The <div> groups all product information.
  • Product name, price, and stock appear together.
  • This layout is common on e-commerce websites.

Question 6

Problem Statement

Create a webpage that displays a Header, Content, and Footer using three separate <div> elements.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Website Layout</title>
</head>
<body>

    <div>
        <h1>My Website</h1>
    </div>

    <div>
        <h2>Latest Articles</h2>
        <p>Learn HTML with simple solved examples.</p>
    </div>

    <div>
        <p>© 2026 My Website. All Rights Reserved.</p>
    </div>

</body>
</html>

Output

My Website

Latest Articles

Learn HTML with simple solved examples.

© 2026 My Website. All Rights Reserved.

Step-by-Step Explanation

  • The first <div> contains the header.
  • The second <div> contains the main content.
  • The third <div> contains the footer.
  • Using separate <div> elements keeps the webpage organized.

Question 7

Problem Statement

Create a webpage that displays two product cards using separate <div> elements.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Product Cards</title>
</head>
<body>

    <div>
        <h2>Laptop</h2>
        <p>Price: ₹55,000</p>
    </div>

    <div>
        <h2>Keyboard</h2>
        <p>Price: ₹1,200</p>
    </div>

</body>
</html>

Output

Laptop

Price: ₹55,000

Keyboard

Price: ₹1,200

Step-by-Step Explanation

  • Each product is placed inside its own <div>.
  • Every <div> works as an independent section.
  • This structure is commonly used for product listings.

Question 8

Problem Statement

Create a webpage that groups an image, heading, and paragraph inside one <div>.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Travel Card</title>
</head>
<body>

    <div>

        <img src="manali.jpg" alt="Manali" width="250">

        <h2>Manali</h2>

        <p>Manali is a popular hill station in Himachal Pradesh.</p>

    </div>

</body>
</html>

Output

[Manali Image]

Manali

Manali is a popular hill station in Himachal Pradesh.

Step-by-Step Explanation

  • The image, heading, and paragraph belong to the same <div>.
  • <div> groups related content together.
  • This layout is commonly used for travel and blog cards.

Question 9

Problem Statement

Create a webpage with three service sections using three <div> elements.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Our Services</title>
</head>
<body>

    <div>
        <h2>Web Development</h2>
        <p>Build responsive websites.</p>
    </div>

    <div>
        <h2>Graphic Design</h2>
        <p>Create attractive designs.</p>
    </div>

    <div>
        <h2>Digital Marketing</h2>
        <p>Grow your business online.</p>
    </div>

</body>
</html>

Output

Web Development

Build responsive websites.

Graphic Design

Create attractive designs.

Digital Marketing

Grow your business online.

Step-by-Step Explanation

  • Each service is placed inside a separate <div>.
  • Every section contains a heading and description.
  • <div> helps organize webpage content into meaningful sections.

Question 10

Problem Statement

Create a simple portfolio webpage using multiple <div> elements for the Header, About Me, Projects, and Contact sections.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Portfolio</title>
</head>
<body>

    <div>
        <h1>Rahul Sharma</h1>
    </div>

    <div>
        <h2>About Me</h2>
        <p>I am learning HTML and web development.</p>
    </div>

    <div>
        <h2>Projects</h2>
        <p>Student Management System</p>
    </div>

    <div>
        <h2>Contact</h2>
        <p>Email: rahul@example.com</p>
    </div>

</body>
</html>

Output

Rahul Sharma

About Me

I am learning HTML and web development.

Projects

Student Management System

Contact

Email: rahul@example.com

Step-by-Step Explanation

  • Each major section is placed inside its own <div>.
  • <div> keeps the webpage structured and organized.
  • This is a common layout for portfolio websites.
  • CSS can later be applied to each <div> for better design.

Key Takeaways

  • <div> is a block-level element.
  • It is used to group related HTML elements.
  • <div> helps organize webpage sections.
  • It is commonly used for headers, content areas, cards, sidebars, and footers.
  • <div> has no visual effect until styles are applied with CSS.

Frequently Asked Questions (FAQs)

1. What is the <div> tag in HTML?

The <div> tag is a block-level container used to group HTML elements.

2. Is <div> a block-level or inline element?

<div> is a block-level element.

3. Why do developers use <div>?

Developers use <div> to organize webpage content and make it easier to style with CSS.

4. Can a <div> contain headings, paragraphs, images, and lists?

Yes. A <div> can contain almost any HTML element.

5. Can I use multiple <div> elements on one webpage?

Yes. Most webpages use many <div> elements to create different sections.

6. Does the <div> tag change the appearance of a webpage by itself?

No. The <div> tag only groups content. CSS is used to style it.

7. Where is the <div> tag commonly used?

It is commonly used for page layouts, profile cards, product cards, blog posts, dashboards, and website sections.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top