Introduction

HTML provides several tags that allow developers to format text on a webpage. Text formatting helps highlight important words, emphasize content, and improve the readability of the page.

Using text formatting elements, you can make text bold, italic, underlined, highlighted, smaller, or emphasized. These formatting tags help organize information and make the content easier for users to understand.

In this lesson, you will learn how to use the most common HTML text formatting tags and understand when to use them correctly.

What You’ll Learn

In this tutorial, you will learn:

• What HTML text formatting is
• Common text formatting tags
• Difference between <b> and <strong>
• Difference between <i> and <em>
• How to highlight, underline, or strike text
• Best practices for text formatting in HTML

What is HTML Text Formatting?

HTML text formatting refers to the use of specific tags that change the appearance or importance of text.

These formatting tags help:

• Emphasize important words
• Improve readability
• Structure content visually
• Provide meaning for browsers and search engines

For example, you may want to highlight a warning message or emphasize a key term in an article. HTML formatting tags allow you to do this easily.

Common HTML Text Formatting Tags

HTML provides several tags for formatting text. Some of the most commonly used formatting tags include:

• <b> – Bold text
• <strong> – Important text
• <i> – Italic text
• <em> – Emphasized text
• <mark> – Highlighted text
• <small> – Smaller text
• <del> – Deleted text
• <ins> – Inserted text
• <sub> – Subscript text
• <sup> – Superscript text

Each tag has a specific purpose and helps present information more clearly.

1️⃣ Bold and Strong Text

The <b> tag is used to make text bold.

Example:

<p>This is <b>bold text</b>.</p>

The <strong> tag is used to indicate important text.

Example:

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

Difference Between <b> and <strong>

Both tags display bold text in browsers, but they have different meanings.

• <b> only changes the visual appearance of the text.
• <strong> indicates that the text is important.

Because <strong> adds meaning, it is often preferred for important content.

2️⃣ Italic and Emphasized Text

The <i> tag is used to display italic text.

Example:

<p>This is <i>italic text</i>.</p>

The <em> tag is used to emphasize text.

Example:

<p>This is <em>emphasized text</em>.</p>

Difference Between <i> and <em>

Both tags appear italic in most browsers, but they serve different purposes.

• <i> is used for styling text.
• <em> indicates that the text should be emphasized.

Search engines and screen readers can understand emphasis provided by <em>.

3️⃣ Underline Text

<u>This text is underlined</u>

⚠️ Use rarely (can confuse with links).

4️⃣ Small Text

The <small> tag is used to display smaller text.

Example:

<p>This is <small>smaller text</small>.</p>

This tag is often used for:

• Copyright information
• Notes
• Disclaimers

5️⃣ Highlighted Text

The <mark> tag is used to highlight text.

Example:

<p>This is <mark>highlighted text</mark>.</p>

The highlighted text usually appears with a yellow background in most browsers. It is useful for marking important information.

6️⃣ Line Break

Hello<br>
Welcome to Div PHP Tutorials

Creates a new line without starting a new paragraph.

7️⃣ Horizontal Line

<hr>

Creates a horizontal divider line.

Deleted and Inserted Text

HTML also provides tags to show text changes.

Deleted Text

The <del> tag represents text that has been removed.

Example:

<p>The price is <del>$50</del> $40.</p>

The deleted text appears with a strikethrough line.

Inserted Text

The <ins> tag represents newly added text.

Example:

<p>This is <ins>newly added text</ins>.</p>

Browsers usually display inserted text with an underline.

Subscript and Superscript

Subscript and superscript are used in mathematical or scientific expressions.

Subscript

The <sub> tag displays text slightly below the normal line.

Example:

<p>Water formula is H<sub>2</sub>O.</p>

Superscript

The <sup> tag displays text slightly above the normal line.

Example:

<p>10<sup>2</sup> = 100</p>

These tags are commonly used in:

• Mathematical formulas
• Chemical equations
• Footnotes

Complete Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML Text Formatting</title>
</head>
<body>

<p><strong>HTML</strong> is used to create <em>web pages</em>.</p>

<p>This is <b>bold</b> and this is <i>italic</i>.</p>

<p><mark>Practice daily</mark> to learn faster.</p>

<p>Line break example:<br>New line starts here.</p>

<hr>

<small>© 2026 Div PHP Tutorials</small>

</body>
</html>

Key Points to Remember

• Use <strong> instead of <b> for importance
• Use <em> instead of <i> for emphasis
• Formatting improves readability
• Don’t overuse formatting tags

In the next tutorial, we’ll learn about HTML Links.