HTML Text Formatting – Solved Practice Questions

By /

Introduction

HTML provides text formatting tags to make content bold, italic, highlighted, deleted, inserted, smaller, and more. In this chapter, you’ll practice the most commonly used formatting tags through simple solved questions. HTML text formatting help to build concepts.

Question 1

Problem Statement

Create a webpage that displays the text “HTML is Amazing!” in bold using the <b> tag.

HTML Code

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

    <p><b>HTML is Amazing!</b></p>

</body>
</html>

Output

HTML is Amazing!

Step-by-Step Explanation

  • <b> makes the text bold.
  • The text remains inside the paragraph.
  • The browser displays the text with a thicker font weight.

Question 2

Problem Statement

Create a webpage that displays “Important Notice” using the <strong> tag.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Strong Tag</title>
</head>
<body>

    <p><strong>Important Notice</strong></p>

</body>
</html>

Output

Important Notice

Step-by-Step Explanation

  • <strong> makes the text bold.
  • It also indicates that the text is important.
  • Search engines and screen readers recognize its importance.

Question 3

Problem Statement

Create a webpage that displays “Learning HTML is Fun!” in italic using the <i> tag.

HTML Code

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

    <p><i>Learning HTML is Fun!</i></p>

</body>
</html>

Output

Learning HTML is Fun!

Step-by-Step Explanation

  • <i> displays text in italic style.
  • It is commonly used for names, terms, or emphasis.
  • The text remains inside the paragraph.

Question 4

Problem Statement

Create a webpage that emphasizes the word “Practice” using the <em> tag.

HTML Code

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

    <p>Please <em>Practice</em> HTML every day.</p>

</body>
</html>

Output

Please Practice HTML every day.

Step-by-Step Explanation

  • <em> emphasizes the text.
  • Browsers usually display emphasized text in italic.
  • Screen readers give extra emphasis while reading.

Concepts Used: <em>

Question 5

Problem Statement

Create a webpage that highlights the word “HTML” using the <mark> tag.

HTML Code

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

    <p>Learn <mark>HTML</mark> before CSS.</p>

</body>
</html>

Output

Learn <mark>HTML</mark> before CSS.

Step-by-Step Explanation

  • <mark> highlights the selected text.
  • Browsers usually display it with a yellow background.
  • It helps draw attention to important words.

Concepts Used: <mark>

Question 6

Problem Statement

Create a webpage that displays the sentence “Offer Price: ₹499” and show the old price ₹799 using the <del> tag.

HTML Code

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

    <p>
        Old Price: <del>₹799</del><br>
        Offer Price: ₹499
    </p>

</body>
</html>

Output

Old Price: ~~₹799~~

Offer Price: ₹499

Step-by-Step Explanation

  • <del> displays deleted text with a line through it.
  • It is commonly used to show old prices or removed content.
  • The new price is displayed normally.

Question 7

Problem Statement

Create a webpage that displays “New Feature Added” where the word “Added” is written using the <ins> tag.

HTML Code

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

    <p>New Feature <ins>Added</ins></p>

</body>
</html>

Output

New Feature

Added (underlined)

Step-by-Step Explanation

  • <ins> represents inserted text.
  • Browsers usually underline the inserted text.
  • It is useful for showing newly added content.

Question 8

Problem Statement

Create a webpage that displays the chemical formula of water (H₂O) using the <sub> tag.

HTML Code

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

    <p>Water Formula: H<sub>2</sub>O</p>

</body>
</html>

Output

Water Formula: H₂O

Step-by-Step Explanation

  • <sub> displays text as a subscript.
  • The number 2 appears slightly below the normal text.
  • It is commonly used in chemical formulas.

Question 9

Problem Statement

Create a webpage that displays the mathematical expression x² using the <sup> tag.

HTML Code

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

    <p>x<sup>2</sup></p>

</body>
</html>

Output

x²

Step-by-Step Explanation

  • <sup> displays text as a superscript.
  • The number 2 appears above the normal text.
  • It is commonly used in mathematical expressions.

Question 10

Problem Statement

Create a webpage that displays the following sentence using different HTML formatting tags:

HTML is easy to learn. Practice it every day, highlight coding, show the old version as deleted, and display Version 2 as newly inserted.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Formatting Example</title>
</head>
<body>

    <p>
        <strong>HTML</strong> is <em>easy</em> to learn.
    </p>

    <p>
        Practice it <b>every day</b>.
    </p>

    <p>
        <mark>Coding</mark> improves your skills.
    </p>

    <p>
        Old Version: <del>Version 1</del>
    </p>

    <p>
        New Version: <ins>Version 2</ins>
    </p>

</body>
</html>

Output

HTML is easy to learn.

Practice it every day.

Coding improves your skills.

Old Version: ~~Version 1~~

New Version:

Version 2 (underlined)

Step-by-Step Explanation

  • <strong> highlights important text.
  • <em> emphasizes text.
  • <b> displays bold text.
  • <mark> highlights text.
  • <del> shows deleted content.
  • <ins> displays newly inserted content.

Key Takeaways

  • <b> displays bold text.
  • <strong> marks important text.
  • <i> displays italic text.
  • <em> emphasizes text.
  • <mark> highlights text.
  • <del> shows deleted content.
  • <ins> shows inserted content.
  • <sub> creates subscript text.
  • <sup> creates superscript text.

Frequently Asked Questions (FAQs)

1. What is the difference between <b> and <strong>?

<b> makes text bold for visual appearance, while <strong> indicates that the text is important.

2. What is the difference between <i> and <em>?

<i> displays italic text, while <em> adds emphasis and is more meaningful for accessibility.

3. Which tag highlights text?

The <mark> tag highlights text.

4. Which tag is used to show deleted text?

The <del> tag is used to display deleted text.

5. Which tag is used for newly inserted text?

The <ins> tag is used to display inserted text.

6. Which tag is used for chemical formulas like H₂O?

The <sub> tag is used for subscript text.

7. Which tag is used for mathematical expressions like x²?

The <sup> tag is used for superscript text.

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

Related Posts

Scroll to Top