HTML Text Formatting means formatting your text so that it looks more emphasized, highlighted, or different.
Formatting tags make text bold, italic, underlined, small, marked, or strong.
HTML contains some special tags for text formatting, which tell the browser how to display the text.
HTML Text Formatting Tags
Here are some of the most commonly used HTML text formatting tags,
<b> - Bold text<strong> - Important text<i> - Italic text<em> - Emphasized text<mark> - Marked text<small> - Smaller text<del> - Deleted text<ins> - Inserted text<sub> - Subscript text<sup> - Superscript text
HTML Text Formatting Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Text Formatting Example</title>
</head>
<body>
<h2>HTML Text Formatting Example</h2>
<p><b>This text is bold.</b></p>
<p><strong>This text is strong (important).</strong></p>
<p><i>This text is italic.</i></p>
<p><em>This text is emphasized.</em></p>
<p><u>This text is underlined.</u></p>
<p><small>This text is small.</small></p>
<p><mark>This text is highlighted.</mark></p>
<p><del>This text is deleted.</del></p>
<p><ins>This text is inserted.</ins></p>
<p>Chemical Formula: H<sub>2</sub>O</p>
<p>Mathematical Power: X<sup>2</sup></p>
</body>
</html>Output:
Difference Between <b> and <strong>
Although both <b> and <strong> display bold text, the difference is:
- <b> – Used only for visual bolding, no special importance.
- <strong> – Indicates important text, helps in SEO and accessibility.
Example:
<p><b>Warning:</b> This is just bold text.</p>
<p><strong>Warning:</strong> This is important bold text.</p>Difference Between <i> and <em>
Both <i> and <em> make the text italic, but:
- <i> – Used for style purposes (like book titles or foreign words).
- <em> – Used for emphasis and carries meaning or importance.
Example:
<p><i>The book name is "HTML Guide".</i></p>
<p><em>Do not ignore this note!</em></p>Combining Formatting Tags
You can combine multiple formatting tags together.
Example:
<p><b><i><u>This text is bold, italic, and underlined.</u></i></b></p>Use of <sub> and <sup> Tags
- <sub> tag is used to display text slightly below the normal line (for formulas).
- <sup> tag is used to display text slightly above the normal line (for powers).
Example:
<p>Water Formula: H<sub>2</sub>O</p>
<p>Square Value: X<sup>2</sup></p>HTML Text Formatting with CSS
You can also apply text formatting using CSS inside the style attribute or stylesheet.
Example:
<p style="color:blue; font-size:18px; font-weight:bold; text-decoration:underline;">
This text is styled using CSS.
</p>