HTML Text Formatting

HTML Tutorial

HTML Text Formatting

HTML text formatting tags are used to change the appearance and emphasis of text on a web page.

1. Bold Text

<b> – Bold (visual only)

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

<strong> – Important text (semantic)

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

2. Italic Text

<i> – Italic (visual)

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

<em> – Emphasized text (semantic)

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

3. Underlined Text

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

4. Marked / Highlighted Text

<p>This is <mark>highlighted</mark> text.</p>

5. Small Text

<p>This is <small>small</small> text.</p>

6. Deleted and Inserted Text

Deleted text

<p>This is <del>deleted</del> text.</p>

Inserted text

<p>This is <ins>inserted</ins> text.</p>

7. Subscript and Superscript

Subscript

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

Superscript

<p>10<sup>2</sup></p>

8. Monospace / Code Text

<code>

<p>Use <code>printf()</code> to print output.</p>

<pre> (preformatted text)

9. Quotation Tags

Short Quote <q>

<p>He said, <q>Practice makes perfect</q>.</p>

Block Quote <blockquote>

10. Abbreviation

<p><abbr title="HyperText Markup Language">HTML</abbr> is easy.</p>

Comparison Table (Quick View)

TagPurpose
<b>Bold (visual)
<strong>Important text
<i>Italic
<em>Emphasized
<u>Underline
<mark>Highlight
<small>Smaller text
<del>Deleted text
<ins>Inserted text
<sub>Subscript
<sup>Superscript

Best Practice Tip

  •  Prefer semantic tags like <strong> and <em>
  •  Avoid using formatting tags for design → use CSS instead

You may also like...