HTML Span – Solved Practice Questions

By /

Introduction

The <span> tag is an inline element used to style or highlight a specific part of text without affecting the surrounding content. It is commonly used with CSS to change the color, font, size, or other styles of individual words or phrases. In this chapter, you’ll practice using the <span> tag through simple solved questions.

Question 1

Problem Statement

Create a webpage that displays the word HTML in red using the <span> tag.

HTML Code

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

    <p>
        I am learning
        <span style="color:red;">HTML</span>.
    </p>

</body>
</html>

Output

I am learning HTML.

(The word HTML appears in red.)

Step-by-Step Explanation

  • <span> is used to style a small part of text.
  • Only the word HTML changes color.
  • <span> is an inline element.

Question 2

Problem Statement

Create a webpage that displays the words HTML, CSS, and JavaScript in different colors.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Multiple Span Tags</title>
</head>
<body>

    <p>

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

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

        and

        <span style="color:green;">JavaScript</span>

        are used for web development.

    </p>

</body>
</html>

Output

HTML, CSS, and JavaScript are used for web development.

(Each technology name appears in a different color.)

Step-by-Step Explanation

  • Multiple <span> tags can be used in one sentence.
  • Each <span> has its own style.
  • Only the selected words are affected.

Question 3

Problem Statement

Create a webpage that highlights the word Important with a yellow background.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Highlight Text</title>
</head>
<body>

    <p>

        <span style="background-color:yellow;">
            Important
        </span>

        instructions must be followed carefully.

    </p>

</body>
</html>

Output

Important instructions must be followed carefully.

(The word Important has a yellow background.)

Step-by-Step Explanation

  • <span> selects a specific word.
  • background-color highlights the word.
  • The remaining sentence is unchanged.

Question 4

Problem Statement

Create a webpage that increases the font size of the word Success.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Font Size Example</title>
</head>
<body>

    <p>

        Hard work leads to

        <span style="font-size:30px;">
            Success
        </span>

    </p>

</body>
</html>

Output

Hard work leads to Success

(The word Success appears larger than the surrounding text.)

Step-by-Step Explanation

  • font-size changes the text size.
  • <span> applies the style to one word only.
  • The rest of the sentence remains the same.

Question 5

Problem Statement

Create a webpage that displays the word Sale in bold, red text.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Sale Offer</title>
</head>
<body>

    <p>

        <span style="color:red; font-weight:bold;">
            Sale
        </span>

        ends tonight!

    </p>

</body>
</html>

Output

Sale ends tonight!

(The word Sale appears in bold red text.)

Step-by-Step Explanation

  • color:red changes the text color.
  • font-weight:bold makes the text bold.
  • Multiple CSS properties can be applied inside one <span>.

Question 6

Problem Statement

Create a webpage that displays the word New in blue and italic.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Italic Text</title>
</head>
<body>

    <p>

        <span style="color:blue; font-style:italic;">
            New
        </span>

        arrivals are available now.

    </p>

</body>
</html>

Output

New arrivals are available now.

(The word New appears in blue and italic.)

Step-by-Step Explanation

  • <span> selects only one word.
  • color:blue changes the text color.
  • font-style:italic makes the text italic.

Question 7

Problem Statement

Create a webpage that displays a student’s name in green.

HTML Code

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

    <p>

        Student Name:

        <span style="color:green;">
            Rahul Sharma
        </span>

    </p>

</body>
</html>

Output

Student Name: Rahul Sharma

(The student’s name appears in green.)

Step-by-Step Explanation

  • <span> is used to style only the student’s name.
  • The remaining text keeps its default style.
  • This is useful for highlighting important information.

Question 8

Problem Statement

Create a webpage that displays a price in red.

HTML Code

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

    <p>

        Price:

        <span style="color:red;">
            ₹999
        </span>

    </p>

</body>
</html>

Output

Price: ₹999

(The price appears in red.)

Step-by-Step Explanation

  • <span> styles only the price.
  • color:red makes the price stand out.
  • This technique is common on e-commerce websites.

Question 9

Problem Statement

Create a webpage that highlights two important words using different colors.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Important Words</title>
</head>
<body>

    <p>

        Learn

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

        and

        <span style="color:blue;">
            CSS
        </span>

        to build websites.

    </p>

</body>
</html>

Output

Learn HTML and CSS to build websites.

(HTML appears in red and CSS appears in blue.)

Step-by-Step Explanation

  • Multiple <span> tags can be used in one sentence.
  • Each <span> can have a different style.
  • Only the selected words are formatted.

Question 10

Problem Statement

Create a welcome message where the user’s name is displayed in blue, bold text.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Welcome Message</title>
</head>
<body>

    <h2>

        Welcome,

        <span style="color:blue; font-weight:bold;">
            Rahul
        </span>

    </h2>

</body>
</html>

Output

Welcome, Rahul

(The name Rahul appears in blue and bold.)

Step-by-Step Explanation

  • <span> highlights only the user’s name.
  • color:blue changes the text color.
  • font-weight:bold makes the name bold.
  • The remaining heading remains unchanged.

Key Takeaways

  • <span> is an inline element.
  • It is used to style a specific word or part of a sentence.
  • <span> does not start on a new line.
  • It is commonly used with CSS.
  • Multiple <span> tags can be used in the same sentence.
  • <span> is useful for changing text color, size, background, and font style.

Frequently Asked Questions (FAQs)

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

The <span> tag is an inline element used to style or group a small part of text.

2. Is <span> a block-level element?

No. <span> is an inline element.

3. Can I change the color of text using <span>?

Yes. You can use the style attribute with the color property.

4. Can I use multiple <span> tags in one sentence?

Yes. Each <span> can have its own style.

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

  • <div> is a block-level element used for larger sections.
  • <span> is an inline element used for small portions of text.

6. Can I make text bold using <span>?

Yes. Use font-weight:bold.

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

It is commonly used to highlight keywords, prices, names, warnings, offers, and important text.

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

Related Posts

Scroll to Top