Learn HTML Text Formatting: Bold, Italic, Subscript, Superscript, and More

Introduction

HTML provides several elements for defining text with special meaning, allowing you to create bold, italicized, subscripted, superscripted, and other formatted text easily. This article explains each of these formatting elements and shows practical examples to help you understand how they work.

HTML Formatting Elements

HTML provides a variety of formatting elements to display text in different styles:

• <b> - Defines bold text
• <strong> - Defines important (bold) text
• <i> - Defines italic text
• <em> - Defines emphasized (italic) text
• <mark> - Defines highlighted text
• <small> - Defines smaller text
• <del> - Defines deleted (strikethrough) text
• <ins> - Defines inserted (underlined) text
• <sub> - Defines subscripted text
• <sup> - Defines superscripted text

1. Bold and Important Text

The <b> element makes text bold, while the <strong> element adds extra importance and also displays bold text.

<b>This text is bold</b>
<strong>This text is important!</strong>

Output:

This text is bold
This text is important!

2. Italic and Emphasized Text

The <i> element italicizes text, while the <em> element adds emphasis, usually pronounced with extra stress by screen readers.

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

Output:

This text is italic
This text is emphasized

3. Smaller and Marked Text

The <small> element reduces the font size, while the <mark> element highlights or marks text.

<small>This is some smaller text.</small>
<p>Do not forget to buy <mark>milk</mark> today.</p>

Output:

This is some smaller text.

Do not forget to buy milk today.

4. Deleted and Inserted Text

The <del> element strikes through text, showing that it has been deleted, while the <ins> element underlines inserted text.

<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

Output:

My favorite color is blue red.

5. Subscript and Superscript Text

The <sub> element creates subscript text, often used in chemical formulas, while the <sup> element creates superscript text, often used for footnotes.

<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>

Output:

This is _subscripted text.

This is ^{superscripted} text.

Quick Reference for HTML Text Formatting Elements

Tag	Description
<b>	Defines bold text
<strong>	Defines important (bold) text
<i>	Defines italic text
<em>	Defines emphasized (italic) text
<mark>	Defines marked/highlighted text
<small>	Defines smaller text
<del>	Defines deleted (strikethrough) text
<ins>	Defines inserted (underlined) text
<sub>	Defines subscript text
<sup>	Defines superscript text

Previous Article:

Learn HTML Styles: How to Use HTML Style Attribute for Inline CSS with Visual Examples

Next Article:

Learn HTML Quotation and Citation Elements: Blockquote, Q, Abbr, Cite, Address, BDO | HTML Tutorial

Ashraf Learn Modern HTML