HTML5 Headings, Paragraphs and Text Formatting Practice Questions with Solutions

HTML5 provides several text formatting elements that help developers organize and present webpage content clearly. HTML5 Headings, Paragraphs and Text Formatting practice questions with solutions help to understand the concepts.

Using proper headings, paragraphs, and formatting tags improves:

Readability
User Experience (UX)
Search Engine Optimization (SEO)
Accessibility
Content Structure

Every professional website uses these tags to make content easier to understand.

In this chapter, you’ll practice using:

Headings (<h1> to <h6>)
Paragraphs ()
Line Break ( )
Horizontal Rule (<hr>)
Bold (, )
Italic (, )
Underline ()
Highlight ()
Small Text ()
Superscript ()
Subscript ()

Why Learn HTML Text Formatting?

Text formatting is essential because it helps:

Organize webpage content
Improve readability
Highlight important information
Display formulas correctly
Create professional webpages
Improve SEO using proper heading hierarchy

Basic Example

<!DOCTYPE html>
<html>

<head>

    <title>Text Formatting</title>

</head>

<body>

    <h1>Welcome to HTML5</h1>

    <p>This is a paragraph.</p>

</body>

</html>

1. Display All Heading Tags (h1 to h6)

Problem Statement

Create an HTML page that displays all six heading tags from <h1> to <h6>.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Heading Tags</title>

</head>

<body>

    <h1>Heading 1</h1>

    <h2>Heading 2</h2>

    <h3>Heading 3</h3>

    <h4>Heading 4</h4>

    <h5>Heading 5</h5>

    <h6>Heading 6</h6>

</body>

</html>

Expected Output

The browser displays six headings, starting from the largest (Heading 1) to the smallest (Heading 6).

Explanation

HTML provides six heading levels.

<h1> is the most important heading.
<h6> is the least important.

For SEO, a webpage should generally contain only one <h1> representing the main topic.

Concepts Covered

Heading Tags
HTML Structure
SEO Basics

2. Create Multiple Paragraphs

Problem Statement

Create a webpage displaying three different paragraphs.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Paragraph Example</title>

</head>

<body>

    <h1>Programming Languages</h1>

    <p>HTML creates the structure of a webpage.</p>

    <p>CSS styles the webpage.</p>

    <p>JavaScript makes webpages interactive.</p>

</body>

</html>

Expected Output

Programming Languages

HTML creates the structure of a webpage.

CSS styles the webpage.

JavaScript makes webpages interactive.

Explanation

Every  element creates a separate paragraph.

Browsers automatically add spacing between paragraphs.

Concepts Covered

Paragraph Tag
HTML Content Structure

3. Use Line Break (` `) to Display Text on Multiple Lines

Problem Statement

Display an address where each part appears on a new line using the   tag.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Line Break Example</title>

</head>

<body>

    <h1>Office Address</h1>

    <p>
        VSIT Computer Institute<br>
        Ramphal Chowk<br>
        Sector 7, Dwarka<br>
        New Delhi
    </p>

</body>

</html>

Expected Output

Office Address

VSIT Computer Institute
Ramphal Chowk
Sector 7, Dwarka
New Delhi

Explanation

The   element inserts a single line break without starting a new paragraph.

It is useful for:

Addresses
Poems
Contact details
Song lyrics

Concepts Covered

Line Break
  Tag
Text Layout

4. Display a Horizontal Line Using `<hr>`

Problem Statement

Create an HTML page that displays two sections separated by a horizontal line.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Horizontal Rule</title>

</head>

<body>

    <h1>About HTML5</h1>

    <p>HTML5 is used to create the structure of webpages.</p>

    <hr>

    <h2>About CSS</h2>

    <p>CSS is used to design and style webpages.</p>

</body>

</html>

Expected Output

About HTML5

HTML5 is used to create the structure of webpages.

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

About CSS

CSS is used to design and style webpages.

Explanation

The <hr> element inserts a horizontal line between sections of content.

It is commonly used to:

Separate content sections
Divide articles
Improve webpage readability

Concepts Covered

<hr> Tag
Section Separation
HTML Formatting

5. Display Bold Text Using ``

Problem Statement

Display a sentence where one word appears in bold using the  tag.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Bold Text</title>

</head>

<body>

    <p>Learning <b>HTML5</b> is the first step toward web development.</p>

</body>

</html>

Expected Output

Learning HTML5 is the first step toward web development.

HTML5 appears in bold.

Explanation

The  tag displays text in bold without adding semantic importance.

Use it mainly for visual styling.

Concepts Covered

 Tag
Bold Text
Text Formatting

6. Display Important Text Using ``

Problem Statement

Display an important warning message using the  tag.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Strong Tag</title>

</head>

<body>

    <p><strong>Warning:</strong> Save your work before closing the browser.</p>

</body>

</html>

Expected Output

Warning: Save your work before closing the browser.

The word Warning: appears bold and is treated as important by browsers and screen readers.

Explanation

 makes text bold and gives it semantic importance.

Search engines and accessibility tools recognize  as important content.

Concepts Covered

 Tag
Semantic HTML
Accessibility

7. Display Italic Text Using ``

Problem Statement

Display a sentence where one word is shown in italic using the  tag.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Italic Text</title>

</head>

<body>

    <p>I enjoy learning <i>HTML5</i> every day.</p>

</body>

</html>

Expected Output

I enjoy learning HTML5 every day.

The word HTML5 appears in italic.

Explanation

The  tag is used to display text in italic for visual presentation.

It does not indicate emphasis.

Common uses include:

Foreign words
Book titles
Technical terms

Concepts Covered

 Tag
Italic Text
HTML Formatting

8. Display Emphasized Text Using ``

Problem Statement

Create a webpage where one word is emphasized using the  tag.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Emphasized Text</title>

</head>

<body>

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

</body>

</html>

Expected Output

Please practice HTML every day.

The word practice appears italic and is treated as emphasized.

Explanation

 displays text in italic and also adds semantic emphasis.

Unlike ,  tells browsers and assistive technologies that the word should be emphasized.

Concepts Covered

 Tag
Semantic HTML
Emphasized Text

Difference Between `` and ``

`<b>`	`<strong>`
Makes text bold	Makes text bold and meaningful
Visual formatting only	Semantic importance
Less useful for SEO	Better for SEO and accessibility

Difference Between `` and ``

`<i>`	`<em>`
Italic styling only	Italic + semantic emphasis
Visual formatting	Meaningful emphasis
Less useful for accessibility	Better for accessibility

9. Underline Text Using ``

Problem Statement

Create an HTML page that underlines an important word using the  tag.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Underline Text</title>

</head>

<body>

    <p>Please read the <u>instructions</u> carefully before starting the exam.</p>

</body>

</html>

Expected Output

Please read the instructions carefully before starting the exam.

The word instructions appears underlined.

Explanation

The  tag underlines text.

It is commonly used for:

Important notes
Labels
Highlighting specific words

Best Practice: Avoid underlining normal text that is not a hyperlink, as users often associate underlined text with clickable links.

Concepts Covered

 Tag
Underlined Text
Text Formatting

10. Highlight Text Using ``

Problem Statement

Highlight an important keyword in a sentence using the  tag.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Highlighted Text</title>

</head>

<body>

    <p>Learning <mark>HTML5</mark> is the first step toward web development.</p>

</body>

</html>

Expected Output

Learning HTML5 is the first step toward web development.

The word HTML5 appears highlighted with a yellow background (default browser style).

Explanation

The  element highlights text to draw the reader’s attention.

Common uses include:

Search results
Important keywords
Notes
Exam answers

Concepts Covered

 Tag
Highlighted Text
HTML5 Formatting

11. Display Smaller Text Using ``

Problem Statement

Display a copyright notice using smaller text.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Small Text</title>

</head>

<body>

    <h1>VSIT Computer Institute</h1>

    <p><small>© 2026 VSIT Computer Institute. All Rights Reserved.</small></p>

</body>

</html>

Expected Output

VSIT Computer Institute

© 2026 VSIT Computer Institute. All Rights Reserved.

The copyright notice appears in a smaller font size.

Explanation

The  tag displays text in a smaller font.

It is commonly used for:

Copyright notices
Terms and conditions
Footnotes
Legal information

Concepts Covered

 Tag
Copyright Text
Footer Information

12. Display Superscript Using ``

Problem Statement

Display the mathematical expression x² using the  tag.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Superscript Example</title>

</head>

<body>

    <p>x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup></p>

</body>

</html>

Expected Output

x² + y² = z²

Explanation

The  element displays text slightly above the normal text.

It is widely used for:

Mathematical formulas
Exponents
Footnote references

Concepts Covered

 Tag
Superscript
Mathematical Expressions

13. Display Subscript Using ``

Problem Statement

Display the chemical formula H₂O using the  tag.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Subscript Example</title>

</head>

<body>

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

    <p>Carbon Dioxide: CO<sub>2</sub></p>

</body>

</html>

Expected Output

Water Formula: H₂O

Carbon Dioxide: CO₂

Explanation

The  element displays text slightly below the normal text.

It is commonly used for:

Chemical formulas
Scientific notation
Mathematical expressions

Concepts Covered

 Tag
Subscript
Chemical Formulas

Mini Practice Challenge

Create an HTML page that includes:

A heading
A paragraph with bold text
A sentence with italic text
A highlighted keyword
An underlined word
A mathematical formula using 
A chemical formula using

This exercise combines all the formatting tags you’ve learned so far.

14. Combine Multiple Text Formatting Tags in One Paragraph

Problem Statement

Create an HTML page that demonstrates multiple text formatting tags in a single paragraph.

Use:

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Multiple Formatting Example</title>

</head>

<body>

    <h1>HTML5 Text Formatting</h1>

    <p>

        <strong>HTML5</strong> is the foundation of web development.

        You should <em>practice daily</em> to improve your coding skills.

        Always remember the <mark>basic syntax</mark>.

        Read the <u>documentation</u> carefully.

    </p>

    <p>

        <small>Practice consistently to become a better developer.</small>

    </p>

</body>

</html>

Expected Output

HTML5 Text Formatting

HTML5 is the foundation of web development.

You should practice daily to improve your coding skills.

Always remember the basic syntax.

Read the documentation carefully.

Practice consistently to become a better developer.

The browser displays:

HTML5 in bold
practice daily in italic
basic syntax highlighted
documentation underlined
The final sentence in a smaller font

Explanation

HTML allows multiple formatting elements to be used together within the same webpage to improve readability and emphasize important information.

Concepts Covered

Multiple Formatting Tags
Semantic HTML
HTML5 Text Formatting

15. Build a Complete HTML Article

Problem Statement

Create a simple article webpage that includes:

Main heading
Subheading
Multiple paragraphs
Horizontal rule
Bold text
Italic text
Highlighted text
Underlined text
Superscript
Subscript
Small text

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>HTML5 Article</title>

</head>

<body>

    <h1>Introduction to HTML5</h1>

    <p>

        <strong>HTML5</strong> is the standard language used to build webpages.

    </p>

    <hr>

    <h2>Why Learn HTML5?</h2>

    <p>

        HTML5 helps developers create <em>modern websites</em> efficiently.

    </p>

    <p>

        Always remember the <mark>basic document structure</mark>.

    </p>

    <p>

        Read the <u>official documentation</u> regularly.

    </p>

    <p>

        Mathematical Formula:

        x<sup>2</sup> + y<sup>2</sup>

    </p>

    <p>

        Chemical Formula:

        H<sub>2</sub>O

    </p>

    <p>

        <small>Copyright © HTML Learning Portal</small>

    </p>

</body>

</html>

Expected Output

The webpage displays:

Main heading
Subheading
Multiple paragraphs
Horizontal separator
Bold text
Italic text
Highlighted keyword
Underlined text
Superscript formula
Subscript formula
Copyright notice

Explanation

This exercise combines all the text formatting elements introduced in this chapter into one complete webpage.

It demonstrates how different HTML tags work together to create well-structured and readable content.

Concepts Covered

Complete HTML Formatting
Headings
Paragraphs
Horizontal Rule
Bold
Italic
Highlight
Underline
Superscript
Subscript
Small Text

Chapter Summary

In this chapter, you learned how to organize and format text effectively using HTML5 text elements. These elements are essential for creating readable, accessible, and SEO-friendly webpages.

You practiced using headings, paragraphs, line breaks, horizontal rules, and various formatting tags to emphasize or style text.

Throughout this chapter, you covered:

Headings (<h1> to <h6>)
Paragraphs ()
Line Break ( )
Horizontal Rule (<hr>)
Bold Text ()
Important Text ()
Italic Text ()
Emphasized Text ()
Underlined Text ()
Highlighted Text ()
Small Text ()
Superscript ()
Subscript ()

These formatting elements are used in almost every website, from blogs and portfolios to business websites and documentation.

Key Takeaways

Use <h1> to <h6> to create a proper heading hierarchy.
Use  to organize text into readable paragraphs.
Use   to insert a line break within a paragraph.
Use <hr> to separate different sections of content.
Use  instead of  when the text has semantic importance.
Use  instead of  when emphasizing words.
Use  to highlight important information.
Use  sparingly, as underlined text is commonly associated with hyperlinks.
Use  for exponents and footnotes.
Use  for chemical formulas and scientific notation.

Frequently Asked Questions (FAQs)

1. What is the difference between `` and ``?

 only makes text bold for visual appearance.

 makes text bold and tells browsers and screen readers that the content is important.

Example:

<p>This is <strong>important</strong> information.</p>

2. What is the difference between `` and ``?

 displays text in italic for styling.

 displays italic text with emphasis, making it meaningful for accessibility tools.

Example:

<p>Please <em>read carefully</em>.</p>

3. Why should a webpage have only one `<h1>` tag?

A single <h1> represents the main topic of the webpage.

Using one <h1> helps:

Improve SEO
Maintain proper document structure
Improve accessibility

4. When should the ` ` tag be used?

The   tag should be used only when a line break is needed without starting a new paragraph.

Common examples:

Addresses
Poems
Song lyrics
Contact details

5. What is the purpose of the `` tag?

The  tag highlights important text.

Example:

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

It is useful for:

Search results
Notes
Important keywords

6. Where is the `` tag commonly used?

The  tag is commonly used for:

Copyright notices
Legal disclaimers
Terms and conditions
Footnotes

7. When should `` and `` be used?

Use:

 for mathematical powers and footnotes.
 for chemical formulas and scientific notation.

Example:

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

<p>H<sub>2</sub>O</p>

8. Are HTML formatting tags important for SEO?

Yes.

Using proper headings (<h1>–<h6>), semantic tags (, ), and a well-structured document improves:

SEO
Accessibility
Readability
User Experience

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

Rishabh Kumar

Why Learn HTML Text Formatting?

Basic Example

1. Display All Heading Tags (h1 to h6)

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

2. Create Multiple Paragraphs

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

3. Use Line Break (<br>) to Display Text on Multiple Lines

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

4. Display a Horizontal Line Using <hr>

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

5. Display Bold Text Using <b>

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

6. Display Important Text Using <strong>

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

7. Display Italic Text Using <i>

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

8. Display Emphasized Text Using <em>

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

Difference Between <b> and <strong>

Difference Between <i> and <em>

9. Underline Text Using <u>

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

10. Highlight Text Using <mark>

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

11. Display Smaller Text Using <small>

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

12. Display Superscript Using <sup>

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

13. Display Subscript Using <sub>

Problem Statement

HTML Solution

Expected Output

3. Use Line Break (`<br>`) to Display Text on Multiple Lines

4. Display a Horizontal Line Using `<hr>`

5. Display Bold Text Using `<b>`

6. Display Important Text Using `<strong>`

7. Display Italic Text Using `<i>`

8. Display Emphasized Text Using `<em>`

Difference Between `<b>` and `<strong>`

Difference Between `<i>` and `<em>`

9. Underline Text Using `<u>`

10. Highlight Text Using `<mark>`

11. Display Smaller Text Using `<small>`

12. Display Superscript Using `<sup>`

13. Display Subscript Using `<sub>`

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

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

3. Why should a webpage have only one `<h1>` tag?

4. When should the `<br>` tag be used?

5. What is the purpose of the `<mark>` tag?

6. Where is the `<small>` tag commonly used?

7. When should `<sup>` and `<sub>` be used?