HTML Div & Span Practice Questions with Solutions

By /

The <div> and <span> elements are two of the most commonly used HTML elements for organizing and styling webpage content. HTML Div & Span practice questions with solutions help to understand the concepts.

Although neither element adds visual formatting by itself, they are extremely important because they allow developers to:

  • Group related content
  • Apply CSS styles
  • Create webpage layouts
  • Organize HTML code
  • Improve maintainability

The key difference between them is:

  • <div> is a block-level element, meaning it starts on a new line and takes up the full available width.
  • <span> is an inline element, meaning it only takes up as much space as its content and stays on the same line.

These elements are widely used in:

  • Website layouts
  • Navigation bars
  • Cards
  • Dashboards
  • Forms
  • Buttons
  • Typography styling
  • Responsive web design

Learning how to use <div> and <span> correctly is essential before moving on to advanced CSS and frontend frameworks like Bootstrap or Tailwind CSS.

Why Learn <div> and <span>?

Using <div> and <span> helps you:

  • Organize webpage content.
  • Apply CSS styles efficiently.
  • Build responsive layouts.
  • Improve code readability.
  • Separate page sections.
  • Create reusable UI components.

Difference Between <div> and <span>

ElementTypeStarts on New LineWidth
<div>Block-levelYesFull width
<span>InlineNoContent width

1. Create a Basic <div> Element

Problem Statement

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

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Div Example</title>

</head>

<body>

    <div>

        <h1>Welcome to HTML</h1>

        <p>This content is grouped inside a div element.</p>

    </div>

</body>

</html>

Expected Output

Welcome to HTML

This content is grouped inside a div element.

Explanation

The <div> element groups related content together.

It is commonly used for:

  • Sections
  • Containers
  • Layouts
  • Cards
  • Headers
  • Footers

A <div> is a block-level element, so it automatically starts on a new line.

Concepts Covered

  • <div>
  • Block-level Element
  • Content Grouping

2. Style a <div> Element Using CSS

Problem Statement

Create a <div> element with:

  • Background color
  • Padding
  • Border
  • Center-aligned text

using inline CSS.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Styled Div</title>

</head>

<body>

    <div style="
        background-color: lightblue;
        padding: 20px;
        border: 2px solid blue;
        text-align: center;
    ">

        <h2>Welcome to HTML5</h2>

        <p>This is a styled div element.</p>

    </div>

</body>

</html>

Expected Output

+--------------------------------------+

        Welcome to HTML5

     This is a styled div element.

+--------------------------------------+

Explanation

A <div> is commonly styled using CSS.

In this example:

  • background-color changes the background.
  • padding creates space inside the box.
  • border adds an outline.
  • text-align centers the content.

This approach is widely used for cards, banners, and content containers.

Concepts Covered

  • <div>
  • Inline CSS
  • Padding
  • Border
  • Background Color

3. Create Multiple <div> Sections

Problem Statement

Create a webpage containing three different <div> sections representing:

  • Home
  • About
  • Contact

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Multiple Divs</title>

</head>

<body>

    <div>

        <h2>Home</h2>

        <p>Welcome to our website.</p>

    </div>

    <div>

        <h2>About</h2>

        <p>Learn more about our services.</p>

    </div>

    <div>

        <h2>Contact</h2>

        <p>Email: info@example.com</p>

    </div>

</body>

</html>

Expected Output

Home

Welcome to our website.

-------------------------

About

Learn more about our services.

-------------------------

Contact

Email: info@example.com

Explanation

Using multiple <div> elements allows developers to organize different sections of a webpage.

Each section can later receive its own styling using CSS.

Concepts Covered

  • Multiple <div>
  • Webpage Sections
  • Content Organization

4. Create a Basic <span> Element

Problem Statement

Create a paragraph where one word is wrapped inside a <span> element.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Span Example</title>

</head>

<body>

    <p>

        Welcome to

        <span>HTML5</span>

        Programming.

    </p>

</body>

</html>

Expected Output

Welcome to HTML5 Programming.

The appearance is the same because <span> has no default styling.

Explanation

The <span> element is an inline element.

It is mainly used to:

  • Style specific words
  • Apply CSS
  • Apply JavaScript
  • Highlight text

Unlike <div>, <span> does not start on a new line.

Concepts Covered

  • <span>
  • Inline Element
  • Text Grouping

5. Highlight Text Using <span>

Problem Statement

Highlight the word HTML5 in red using the <span> element.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Highlight Text</title>

</head>

<body>

    <p>

        Learn

        <span style="color:red;">

            HTML5

        </span>

        with practical examples.

    </p>

</body>

</html>

Expected Output

Learn HTML5 with practical examples.

(HTML5 appears in red.)

Explanation

The <span> element allows you to style only a portion of text.

It is commonly used for:

  • Keywords
  • Error messages
  • Important words
  • Product names
  • Prices

Concepts Covered

  • <span>
  • Inline CSS
  • Text Styling

6. Compare <div> and <span> in One Example

Problem Statement

Create a webpage demonstrating the difference between <div> and <span>.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Div vs Span</title>

</head>

<body>

    <div>

        This is inside a div.

    </div>

    <div>

        Another div starts on a new line.

    </div>

    <p>

        HTML

        <span style="color:blue;">

            Span

        </span>

        remains on the same line.

    </p>

</body>

</html>

Expected Output

This is inside a div.

Another div starts on a new line.

HTML Span remains on the same line.

Explanation

This example clearly shows the difference:

<div>

  • Block-level element
  • Starts on a new line
  • Takes full available width

<span>

  • Inline element
  • Does not start on a new line
  • Takes only the required width

Understanding this distinction is essential for creating flexible webpage layouts.

Concepts Covered

  • Block-level Elements
  • Inline Elements
  • <div>
  • <span>

Mini Practice Challenge

Create a webpage containing:

  • Three styled <div> sections
  • A paragraph with two highlighted words using <span>
  • Different background colors for each <div>

Try creating the webpage yourself before checking the next practical project.

7. Create a Card Layout Using <div>

Problem Statement

Create a simple card using a <div> element that contains:

  • Heading
  • Paragraph
  • Border
  • Padding

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Card Layout</title>

</head>

<body>

    <div style="
        width:300px;
        border:1px solid gray;
        padding:20px;
        border-radius:8px;
    ">

        <h2>HTML5 Course</h2>

        <p>

            Learn HTML5 from beginner to advanced level.

        </p>

    </div>

</body>

</html>

Expected Output

+----------------------------+

HTML5 Course

Learn HTML5 from beginner
to advanced level.

+----------------------------+

Explanation

A card is one of the most common UI components.

Developers use <div> elements to build:

  • Course cards
  • Product cards
  • Team member cards
  • Service cards
  • Dashboard widgets

CSS controls the appearance while the <div> acts as the container.

Concepts Covered

  • <div>
  • Card Layout
  • CSS Styling

8. Create a Navigation Bar Using <div>

Problem Statement

Create a horizontal navigation bar using a <div> element.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Navigation Bar</title>

</head>

<body>

    <div style="
        background:black;
        color:white;
        padding:15px;
    ">

        Home |

        Courses |

        About |

        Contact

    </div>

</body>

</html>

Expected Output

-------------------------------------

Home | Courses | About | Contact

-------------------------------------

Explanation

Navigation bars are usually built using containers like <div>.

CSS controls:

  • Background color
  • Padding
  • Alignment
  • Spacing

In larger websites, <div> is often combined with semantic elements like <nav>.

Concepts Covered

  • Navigation Layout
  • <div>
  • Webpage Structure

9. Create a Student Profile Box

Problem Statement

Create a profile card displaying:

  • Student Name
  • Course
  • City

inside a <div>.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Profile Box</title>

</head>

<body>

    <div style="
        width:280px;
        border:2px solid black;
        padding:20px;
    ">

        <h2>Rohan Sharma</h2>

        <p>Course: HTML5</p>

        <p>City: Delhi</p>

    </div>

</body>

</html>

Expected Output

+------------------------+

Rohan Sharma

Course: HTML5

City: Delhi

+------------------------+

Explanation

Profile cards are widely used for:

  • Student profiles
  • Employee details
  • Team members
  • User accounts

A <div> groups all related information into one container.

Concepts Covered

  • Profile Card
  • Content Grouping
  • <div>

10. Create a Product Card

Problem Statement

Create a product card displaying:

  • Product Name
  • Price
  • Short Description

using a <div>.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Product Card</title>

</head>

<body>

    <div style="
        width:300px;
        border:1px solid gray;
        padding:20px;
    ">

        <h2>Wireless Mouse</h2>

        <p>Price: ₹799</p>

        <p>Comfortable wireless optical mouse.</p>

    </div>

</body>

</html>

Expected Output

+----------------------------+

Wireless Mouse

Price: ₹799

Comfortable wireless optical mouse.

+----------------------------+

Explanation

Almost every e-commerce website uses <div> elements to create product cards.

Each card can contain:

  • Image
  • Name
  • Price
  • Rating
  • Description
  • Buy Button

Concepts Covered

  • Product Card
  • E-commerce Layout
  • HTML Containers

11. Style Multiple <span> Elements

Problem Statement

Display a sentence where three different words have different text colors using <span>.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Multiple Span</title>

</head>

<body>

    <p>

        Learn

        <span style="color:red;">HTML</span>,

        <span style="color:green;">CSS</span>,

        and

        <span style="color:blue;">JavaScript</span>.

    </p>

</body>

</html>

Expected Output

Learn HTML, CSS, and JavaScript.

HTML → Red

CSS → Green

JavaScript → Blue

Explanation

Multiple <span> elements allow different parts of the same sentence to have unique styles.

This is useful for:

  • Keywords
  • Product names
  • Pricing
  • Error messages
  • Status indicators

Concepts Covered

  • Multiple <span>
  • Text Styling
  • Inline Elements

12. Use <span> Inside a Heading

Problem Statement

Highlight one word inside a heading using the <span> element.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Span in Heading</title>

</head>

<body>

    <h1>

        Learn

        <span style="color:orange;">

            HTML5

        </span>

        Today

    </h1>

</body>

</html>

Expected Output

Learn HTML5 Today

(HTML5 appears in orange.)

Explanation

Using <span> inside headings helps highlight important words without affecting the rest of the heading.

This technique is commonly used for:

  • Website banners
  • Hero sections
  • Landing pages
  • Marketing headings

Concepts Covered

  • <span>
  • Headings
  • Highlighted Text

13. Combine <div> and <span> in a Real-World Layout

Problem Statement

Create a course information box where the course name is highlighted using <span> inside a <div>.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Div and Span Example</title>

</head>

<body>

    <div style="
        border:1px solid gray;
        padding:20px;
        width:320px;
    ">

        <h2>

            <span style="color:blue;">

                HTML5

            </span>

            Complete Course

        </h2>

        <p>

            Duration: 2 Months

        </p>

        <p>

            Mode: Offline

        </p>

    </div>

</body>

</html>

Expected Output

+----------------------------+

HTML5 Complete Course

Duration: 2 Months

Mode: Offline

+----------------------------+

The word HTML5 appears in blue.

Explanation

This example demonstrates how <div> and <span> work together:

  • <div> organizes the content into a card.
  • <span> highlights a specific word inside the heading.

This pattern is widely used in modern web applications.

Concepts Covered

  • <div>
  • <span>
  • Real-World UI Layout

Mini Practice Challenge

Create a webpage containing:

  • A navigation bar using <div>
  • Two product cards using <div>
  • Highlight product prices using <span>
  • Highlight “New” using a red <span>

Try building the layout yourself before moving to the final practical projects.

14. Build a Complete Dashboard Layout Using <div>

Problem Statement

Create a simple dashboard containing:

  • Header
  • Sidebar
  • Main Content
  • Footer

using only <div> elements.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Dashboard Layout</title>

</head>

<body>

    <div style="
        background:#2c3e50;
        color:white;
        padding:20px;
    ">

        <h1>Student Dashboard</h1>

    </div>

    <div style="display:flex;">

        <div style="
            width:200px;
            background:#ecf0f1;
            padding:20px;
        ">

            <h3>Menu</h3>

            <p>Dashboard</p>

            <p>Courses</p>

            <p>Assignments</p>

            <p>Profile</p>

        </div>

        <div style="
            flex:1;
            padding:20px;
        ">

            <h2>Welcome Student</h2>

            <p>

                This is your dashboard homepage.

            </p>

        </div>

    </div>

    <div style="
        background:#2c3e50;
        color:white;
        text-align:center;
        padding:15px;
    ">

        © 2026 Student Dashboard

    </div>

</body>

</html>

Expected Output

---------------------------------------

Student Dashboard

---------------------------------------

Menu            Welcome Student

Dashboard       This is your dashboard.

Courses

Assignments

Profile

---------------------------------------

© 2026 Student Dashboard

Explanation

This example demonstrates how multiple <div> elements can be combined to create a complete dashboard layout.

Each <div> acts as an independent container:

  • Header
  • Sidebar
  • Content Area
  • Footer

Modern admin panels are built using this concept together with CSS.

Concepts Covered

  • <div>
  • Dashboard Layout
  • Page Containers
  • Flex Layout

15. Create a Professional Homepage Using <div> and <span>

Problem Statement

Create a homepage for an institute that contains:

  • Website title
  • Navigation
  • Hero section
  • Course information
  • Highlight important words using <span>
  • Footer

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Institute Homepage</title>

</head>

<body>

    <div style="
        background:#1f2937;
        color:white;
        padding:20px;
    ">

        <h1>

            VSIT

            <span style="color:yellow;">

                Computer Education

            </span>

        </h1>

    </div>

    <div style="
        background:#374151;
        color:white;
        padding:12px;
    ">

        Home |

        Courses |

        Placements |

        Contact

    </div>

    <div style="
        padding:30px;
    ">

        <h2>

            Learn

            <span style="color:blue;">

                HTML5

            </span>

            from Scratch

        </h2>

        <p>

            Build responsive websites with practical examples.

        </p>

    </div>

    <div style="
        border:1px solid gray;
        padding:20px;
        width:350px;
    ">

        <h3>Popular Course</h3>

        <p>

            HTML5 Complete Course

        </p>

        <p>

            Duration:

            <span style="color:red;">

                2 Months

            </span>

        </p>

    </div>

    <div style="
        background:#1f2937;
        color:white;
        text-align:center;
        padding:15px;
        margin-top:20px;
    ">

        © 2026 VSIT Computer Education

    </div>

</body>

</html>

Expected Output

--------------------------------------------

VSIT Computer Education

Home | Courses | Placements | Contact

--------------------------------------------

Learn HTML5 from Scratch

Build responsive websites.

--------------------------------------------

Popular Course

HTML5 Complete Course

Duration: 2 Months

--------------------------------------------

© 2026 VSIT Computer Education

Explanation

This project combines both <div> and <span> elements to create a professional webpage.

<div> is used for:

  • Header
  • Navigation
  • Hero Section
  • Course Card
  • Footer

<span> is used for:

  • Highlighting institute name
  • Highlighting course name
  • Highlighting course duration

This structure is commonly used in:

  • Educational websites
  • Company websites
  • Landing pages
  • Course portals
  • Business websites

Concepts Covered

  • <div>
  • <span>
  • Homepage Layout
  • Professional UI Design
  • HTML Structure

Coding Challenge

Create an Online Shopping Homepage that includes:

  • Header
  • Navigation Bar
  • Three Product Cards
  • Highlight Product Prices using <span>
  • Highlight “Sale” in red
  • Footer

Use only:

  • <div>
  • <span>

Apply different background colors, borders, and padding to make the page visually organized.

Try building the complete homepage yourself before reviewing previous examples.

Chapter Summary

In this chapter, you learned how to use the <div> and <span> elements to organize and style HTML content.

Although these elements do not provide any visual styling by themselves, they are among the most important building blocks of modern web development. Almost every professional website uses <div> and <span> extensively to create layouts, cards, navigation bars, dashboards, forms, and interactive user interfaces.

Throughout this chapter, you practiced creating:

  • Basic <div> containers
  • Styled <div> sections
  • Multiple content sections
  • Basic <span> elements
  • Highlighted text using <span>
  • Card layouts
  • Navigation bars
  • Student profile cards
  • Product cards
  • Dashboard layouts
  • Professional homepage designs

You also learned the fundamental difference between block-level and inline elements, which is essential for understanding HTML and CSS.

Mastering <div> and <span> prepares you for advanced frontend technologies such as:

  • CSS Flexbox
  • CSS Grid
  • Bootstrap
  • Tailwind CSS
  • React
  • Angular
  • Vue.js

Key Takeaways

  • <div> is a block-level element.
  • <span> is an inline element.
  • <div> is used to group large sections of content.
  • <span> is used to style or manipulate small portions of text.
  • Both elements work closely with CSS and JavaScript.
  • <div> is commonly used to build layouts, cards, dashboards, and containers.
  • <span> is commonly used to highlight keywords, prices, status labels, and important text.
  • These elements have no default styling.
  • Proper use of <div> and <span> improves code organization and maintainability.

Frequently Asked Questions (FAQs)

1. What is a <div> element in HTML?

The <div> element is a block-level container used to group related content.

Example:

<div>

    <h2>HTML5 Course</h2>

    <p>Learn HTML step by step.</p>

</div>

2. What is a <span> element?

The <span> element is an inline container used to style or manipulate specific portions of text.

Example:

<p>

    Learn

    <span style="color:red;">

        HTML5

    </span>

</p>

3. What is the difference between <div> and <span>?

<div><span>
Block-levelInline
Starts on a new lineStays on the same line
Full widthContent width
Groups large sectionsStyles small text portions

4. Does <div> add any styling?

No.

<div> has no visual styling by default.

CSS is used to style it.

Example:

<div style="background:lightblue;">

    Content

</div>

5. Can multiple <div> elements be used on one webpage?

Yes.

Most webpages contain many <div> elements.

For example:

  • Header
  • Sidebar
  • Main Content
  • Footer
  • Cards
  • Sections

6. Can <span> contain block elements?

No.

A <span> should only contain inline content such as:

  • Text
  • Icons
  • Links
  • Small inline elements

It should not contain block-level elements like:

<div>

<section>

<article>

7. Why are <div> and <span> important?

They help developers:

  • Organize content
  • Apply CSS
  • Use JavaScript
  • Create reusable layouts
  • Improve code readability

Almost every modern website depends on them.

8. Are <div> and <span> semantic elements?

No.

They are non-semantic elements.

Unlike semantic tags such as:

  • <header>
  • <main>
  • <article>
  • <footer>

they do not describe the meaning of their content.

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

Related Posts

Scroll to Top