HTML Formatting

Use semantic inline tags for emphasis, code, and meaning.

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.

HTML
<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.

HTML
<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.

HTML
<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.

HTML
<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.

HTML
<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.

HTML
<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.

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

The <ins> Element

Shows newly added content.

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

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

Superscript and Subscript Text

The <sup> Element

The sup element displays text slightly above the normal line. It is commonly used for exponents, ordinal indicators, and references.

HTML
<p>10<sup>2</sup> = 100</p>
<p>Read the 1<sup>st</sup> note.</p>

The <sub> Element

The sub element displays text slightly below the normal line. It is useful in chemical formulas and mathematical notation.

HTML
<p>Water is H<sub>2</sub>O.</p>
<p>Carbon dioxide is CO<sub>2</sub>.</p>

Use sup and sub when the raised or lowered position communicates meaning, not only for visual styling.

Best Practices

When formatting text:

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

Key Takeaways

  • Text Formatting is an important topic to understand.
  • Start with small examples and practice one step at a time.
  • Use the idea in simple projects so it becomes easier to remember.