When building a webpage, not all text should look the same. Sometimes you want to make important words bold, emphasize certain phrases, highlight key information, or display deleted text. HTML provides several text formatting elements that help make content more readable and meaningful.

Text formatting is important because it helps users quickly identify important information and improves the overall reading experience.

What Is Text Formatting in HTML?

Text formatting refers to changing the appearance or meaning of text using special HTML elements.

For example, in a blog article, you might want to:

• Highlight important instructions.
• Emphasize warnings.
• Display technical terms.
• Show updated or removed content.

HTML provides specific tags for each purpose.

Bold and Important Text

The <strong> Element

The strong element is used for important content.

<p>Please <strong>save your work</strong> before closing the application.</p>

Browsers usually display the text in bold, but the main purpose is to indicate importance.

The <b> Element

The b element makes text bold without adding special meaning.

<p>This product is <b>50% OFF</b>.</p>

Use b mainly for visual emphasis.

Italic and Emphasized Text

The <em> Element

The em element is used to emphasize text.

<p>You should <em>always</em> read the instructions first.</p>

Browsers usually display emphasized text in italics.

The <i> Element

The i element displays text in italics for styling purposes.

<p>The scientific name is <i>Homo sapiens</i>.</p>

Unlike em, it does not indicate emphasis.

Highlighting Text

The <mark> Element

The mark element highlights text.

<p>The exam will cover <mark>HTML attributes</mark>.</p>

This is useful when drawing attention to important information.

Smaller Text

The <small> Element

The small element displays text in a smaller size.

<p>Price: ₹999 <small>Terms and conditions apply.</small></p>

It is often used for notes, disclaimers, or copyright information.

Deleted and Inserted Text

The <del> Element

Shows text that has been removed.

<p>Old Price: <del>₹2,000</del></p>

The <ins> Element

Shows newly added content.

<p>New Price: <ins>₹1,500</ins></p>

These elements are commonly used in e-commerce websites and document revisions.

Real-World Example

Imagine an online shopping product page:

<h2>Wireless Headphones</h2>

<p>
    <strong>Special Offer:</strong>
    <del>₹5,000</del>
    <ins>₹3,999</ins>
</p>

<p>
    <mark>Free delivery available today.</mark>
</p>

Here:

• The strong element highlights the offer.
• The del element shows the old price.
• The ins element shows the new price.
• The mark element highlights important information.

Best Practices

When formatting text:

• Use strong for important content.
• Use em for emphasis.
• Use mark only when highlighting is necessary.
• Avoid excessive formatting that can make content harder to read.
• Choose elements based on meaning, not just appearance.

Summary

HTML text formatting elements help make content clearer, more organized, and easier to understand. Elements such as strong, em, mark, small, del, and ins allow you to emphasize important information, highlight key details, and improve readability. Using the correct formatting elements helps create professional and user-friendly webpages.