HTML Formatting

Bold, italic, and text formatting elements

✨ What is HTML Formatting?

HTML formatting elements are used to display special types of text like bold, italic, underlined, or highlighted text without using CSS.


<p>This is <b>bold</b> text.</p>
<p>This is <i>italic</i> text.</p>
<p>This is <u>underlined</u> text.</p>
<p>This is <mark>highlighted</mark> text.</p>
                                    

Output:

This is bold text.

This is italic text.

This is underlined text.

This is highlighted text.

Text Formatting Elements

🔤

<b> Bold

Makes text bold

<b>Bold text</b>
📝

<i> Italic

Makes text italic

<i>Italic text</i>
📏

<u> Underline

Underlines text

<u>Underlined text</u>
🖍️

<mark> Highlight

Highlights text

<mark>Highlighted text</mark>

🔹 Strong and Emphasis

Semantic formatting elements for importance and emphasis:

<p><strong>This text is important!</strong></p>
<p><em>This text is emphasized.</em></p>
<p>Normal text with <strong>important</strong> and <em>emphasized</em> words.</p>

Output:

This text is important!

This text is emphasized.

Normal text with important and emphasized words.

🔹 Small and Large Text

Change text size with formatting elements:

<p>Normal text size</p>
<p><small>This is smaller text</small></p>
<p><big>This is bigger text</big></p>
<p>You can <small>mix</small> different <big>sizes</big> in one paragraph.</p>

Output:

Normal text size

This is smaller text

This is bigger text

You can mix different sizes in one paragraph.

🔹 Subscript and Superscript

Create subscript and superscript text:

<p>Water formula: H<sub>2</sub>O</p>
<p>Einstein's equation: E = mc<sup>2</sup></p>
<p>Chemical formula: CO<sub>2</sub></p>
<p>Math: x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup></p>

Output:

Water formula: H 2 O

Einstein's equation: E = mc 2

Chemical formula: CO 2

Math: x 2 + y 2 = z 2

🔹 Deleted and Inserted Text

Show text changes with del and ins elements:

<p>The price is <del>$100</del> <ins>$80</ins></p>
<p><del>Old information</del> <ins>Updated information</ins></p>
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

Output:

The price is $100 $80

Old information Updated information

My favorite color is blue red .

🧠 Test Your Knowledge

Which HTML element is used to make text bold?