HTML Text Formatting Tags


What Are HTML Text Formatting Tags?

HTML provides special tags to format text — like making it bold, italic, or underlined. These tags help you emphasize content and make web pages more readable and styled.


Common HTML Text Formatting Tags

Tag Purpose Example Text
<b> Bold (non-important) Bold
<strong> Bold (important) Strong emphasis
<i> Italic (non-important) Italic
<em> Italic (important) Emphasis
<u> Underline <u>Underline</u>
<mark> Highlight <mark>Marked</mark>
<small> Smaller text <small>Small</small>
<del> Deleted (strikethrough) <del>Deleted</del>
<ins> Inserted (underline) <ins>Inserted</ins>
<sub> Subscript H<sub>2</sub>O
<sup> Superscript x<sup>2</sup>

Example 1: Bold Text Using <b> and <strong></strong>

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

Example 2: Italic Text Using <i> and <em></em>

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

Example 3: Underline Text

<p>This is <u>underlined text</u>.</p>

Example 4: Highlighted Text Using <mark>

<p>This is a <mark>highlighted word</mark>.</p>

Example 5: Strikethrough Using <del>, Insertion Using <ins></ins>

<p>This item was <del>$20</del> now <ins>$10</ins>.</p>

Example 6: Subscript and Superscript

<p>Water formula: H<sub>2</sub>O</p>
<p>Math: x<sup>2</sup> + y<sup>2</sup></p>

Summary of HTML Text Formatting Tags

Tag Meaning Visual Effect
<b> Bold (no extra meaning) Bold
<strong> Bold (semantic) Bold + importance
<i> Italic (no extra meaning) Italic
<em> Emphasized (semantic) Italic + importance
<u> Underlined Underline
<mark> Highlight Highlight (yellow)
<del> Deleted/Strikethrough Strikethrough
<ins> Inserted (often underlined) Underline (semantic)
<sub> Subscript Lowered text (e.g., H₂O)
<sup> Superscript Raised text (e.g., x²)