Text Formatting

Learn how HTML elements are used to emphasize, highlight, style, and give meaning to different parts of text.

What is Text Formatting?

HTML provides several elements that can change the presentation or meaning of text.

Some elements are mainly presentational, while others communicate semantic meaning such as importance or emphasis.

Common Formatting Elements:

, , , , , , , , <del>, <ins>

Basic Example

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

Output

This is important text.

Common Text Formatting Elements

Element	Purpose	Example
`<b>`	Draws attention to text without adding special importance.	Bold text
`<strong>`	Indicates strong importance.	Important text
`<i>`	Represents text in an alternate voice or mood.	Italic text
`<em>`	Adds emphasis to text.	Emphasized text
`<mark>`	Highlights text.	Highlighted text
`<small>`	Represents smaller side comments or print.	Small text
`<del>`	Represents deleted content.	~~Old text~~
`<ins>`	Represents inserted content.	New text

Bold Text

The  element is used to draw the reader's attention to text without adding extra importance.

<p>
    Learn <b>HTML</b> today.
</p>

Learn HTML today.

Strong Text

The  element indicates that the content has strong importance.

<p>
    <strong>Important:</strong>
    Save your work regularly.
</p>

Important: Save your work regularly.

Italic Text

The  element represents text in an alternate voice or mood.

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

This is italic text.

Emphasized Text

The  element adds emphasis to text and also carries semantic meaning.

<p>
    You <em>must</em> practice HTML.
</p>

You must practice HTML.

Highlighted Text

The  element highlights text to make it stand out.

<p>
    Learn <mark>HTML</mark> step-by-step.
</p>

Learn HTML step-by-step.

Small Text

The  element represents smaller side comments or fine print.

<p>
    HTML Course
    <small>Terms and conditions apply.</small>
</p>

HTML Course Terms and conditions apply.

Deleted Text

The <del> element represents content that has been deleted from a document.

<p>
    Original Price:
    <del>₹5000</del>
</p>

Original Price: ~~₹5000~~

Inserted Text

The <ins> element represents content that has been inserted into a document.

<p>
    Updated Price:
    <ins>₹4500</ins>
</p>

Updated Price: ₹4500

Subscript and Superscript Preview

HTML also provides elements for displaying text below or above the normal text line.

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

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

H₂O

x²

Presentational vs Semantic Formatting

Some formatting elements primarily affect presentation, while others communicate meaning.

Element	Category	Meaning
`<b>`	Presentational	Draws attention to text.
`<strong>`	Semantic	Indicates strong importance.
`<i>`	Alternate voice or mood	Represents text in an alternate voice.
`<em>`	Semantic	Adds emphasis.

Combining Formatting Elements

HTML formatting elements can be combined when appropriate.

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

This is very important information.

Complete Example

<!DOCTYPE html>

<html>

<head>

    <title>
        Text Formatting Example
    </title>

</head>

<body>

    <h1>
        HTML Text Formatting
    </h1>

    <p>
        Learn <strong>HTML</strong>
        and <em>web development</em>.
    </p>

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

    <p>
        Old Price:
        <del>₹5000</del>
    </p>

    <p>
        New Price:
        <ins>₹4500</ins>
    </p>

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

    <p>
        Equation: x<sup>2</sup>
    </p>

</body>

</html>

Important Points

Use  when text has strong importance.
Use  when text needs emphasis.
Use  to highlight relevant text.
Use <del> for deleted content.
Use <ins> for inserted content.
Use  and  for subscript and superscript.
Use semantic elements when you need to communicate meaning, not only visual appearance.

Practice Exercise

Create a paragraph containing bold text.
Add an emphasized word.
Highlight an important word.
Show an old price using <del>.
Show a new price using <ins>.
Write H₂O using HTML.
Write x² using HTML.

Summary

HTML provides several text formatting elements such as , , , , , , <del>, and <ins>. Semantic elements should be preferred when the meaning of the text is important.

← Previous: HTML Tags Next: Text Formatting Details →