Text formatting in HTML helps style and emphasize content, making it easier to read and more visually appealing. HTML provides several tags for text formatting. Let’s explore each one in detail with examples.

1. Bold Text

The <b> tag makes text bold, but it does not add extra importance or meaning. It is used for styling purposes only.

<p>This is a <b>bold</b> word.</p>

Output

This is a bold word.

When to use?

  • Highlight keywords, product names, or technical terms in content.
  • Use it when the emphasis is purely visual.

2. Important Text

The <strong> tag makes text bold, but it also conveys importance or urgency. Search engines and screen readers recognize this tag and give the text higher priority.

<p><strong>Warning:</strong> Do not share your password with anyone.</p>

Output

Warning: Do not share your password with anyone.

When to use?

  • To highlight warnings, alerts, or crucial instructions.
  • For SEO-friendly emphasis on important words.

3. Italic Text

The <i> tag makes text italic, but it does not add any special emphasis. It is mainly used for styling of text.

<p>This book is called <i>The Great Gatsby</i>.</p>

Output

This book is called The Great Gatsby.

When to use?

  • To format book titles, technical terms, or foreign words.
  • When the emphasis is purely visual.

4. Emphasized Text

The <em> tag makes text italic and adds emphasis to it. Screen readers read it with a stronger voice, making it more meaningful for accessibility.

<p>You <em>must</em> finish the project by tomorrow.</p>

Output

You must finish the project by tomorrow.

When to use?

  • To add real emphasis in sentences.
  • When accessibility and meaning are important.

5. Marked Text

The <mark> tag highlights text with a background color (usually yellow by default). It is used to draw attention to specific words or phrases.

<p>Our top-selling product is the <mark>Smartphone X</mark>.</p>

Output

Our top-selling product is the Smartphone X.

When to use?

  • To highlight important information in a paragraph.
  • For search result highlights or study notes.

6. Smaller Text

The <small> tag reduces the font size of text. It is commonly used for footnotes, disclaimers, or secondary information.

<p>© 2025 Company Name. <small>All rights reserved.</small></p>

Output

© 2025 Company Name. All rights reserved.

When to use?

  • For legal disclaimers, copyright text, or fine print.
  • To make less important text visually smaller.

7. Inserted Text

The <ins> tag underlines text, indicating that it has been added or updated.

<p>The price is now <ins>$40</ins>.</p>

Output

The price is now $40.

When to use?

  • To show newly added text.
  • To highlight modifications in documents.

8. Deleted Text

The <del> tag strikes through text, indicating that it has been removed or is no longer valid. It is often used alongside the <ins> tag, which highlights the newly inserted text that replaces the deleted content.

<p>The most popular programming language is <del>Java</del> <ins>JavaScript</ins>.</p>

Output

The most popular programming language is Java JavaScript.

When to use?

  • Used in document revisions, version tracking, or edits in legal contracts.
  • To indicate changes in content history.

9. Strikethrough (Obsolete Text)

The <s> tag is used to represent text that is no longer accurate or relevant but still exists for reference, such as outdated prices or incorrect information. Unlike <del>, it does not indicate that content was removed in a document revision; it just shows that the text is no longer valid.

<p>The old price was <s>$50</s>, but now it's only $30!</p>

Output

The old price was $50, but now it’s only $30!

When to use?

  • Helps users see past vs. present values in pricing or information.
  • Use <s> for discounts to keep the old price visible as a reference.

10. Subscript Text

The <sub> tag makes text smaller and moves it below the normal line, useful for writing chemical formulas or mathematical expressions.

<p>The chemical formula of water is H<sub>2</sub>O.</p>

Output

The chemical formula of water is H2O.

When to use?

  • For chemical formulas (H₂O, CO₂).
  • For mathematical notations (x₁, y₂).

11. Superscript Text

The <sup> tag makes text smaller and moves it above the normal line, useful for exponents and ordinal numbers.

<p>The formula for area is A = πr<sup>2</sup>.</p>

Output

The formula for area is A = πr2.

When to use?

  • For mathematical exponents (x², 10³).
  • For ordinal numbers (1ˢᵗ, 2ⁿᵈ).

Run these code snippets in an online HTML playground to see how it works!

Conclusion

HTML provides a variety of text formatting tags to style, emphasize, and structure content effectively. The right choice depends on whether you need a visual change, semantic meaning, or both.

  • Use <strong> and <em> for SEO and accessibility.
  • Use <b> and <i> for purely visual styling.
  • Use <mark>, <del>, <ins>, and <s> to track changes.
  • Use <sub> and <sup> for scientific and mathematical text.

With these formatting techniques, you can create clear, structured, and visually appealing web content! 🚀

❮ Previous
Next ❯