HTML Text Formatting

By /

1. Introduction to Text Formatting in HTML

Text formatting in HTML is essential for improving readability, emphasis, and structure on a webpage. HTML provides various tags to style and highlight text, such as bold, italic, underline, strikethrough, superscript, and subscript.

These formatting tags do not affect the webpage’s structure but only modify the appearance of the text.

2. Basic Text Formatting Tags

TagDescriptionExample
<b>Makes text bold (without emphasis).<b>Bold text</b>
<strong>Makes text bold with importance.<strong>Important text</strong>
<i>Makes text italic (without emphasis).<i>Italic text</i>
<em>Makes text italic with emphasis.<em>Emphasized text</em>
<u>Underlines text.<u>Underlined text</u>
<mark>Highlights text with a background color.<mark>Highlighted text</mark>
<small>Displays smaller text.<small>Smaller text</small>
<del>Strikethrough (deleted text).<del>Deleted text</del>
<ins>Underlined (inserted text).<ins>Inserted text</ins>
<sub>Displays subscript text (lowered text).H<sub>2</sub>O
<sup>Displays superscript text (raised text).10<sup>2</sup>

3. Bold and Strong Text

3.1 Using the <b> Tag

The <b> tag makes text bold but does not give it semantic importance.

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

✅ Best for styling only, without adding meaning.

3.2 Using the <strong> Tag

The <strong> tag makes text bold and conveys importance.

<p><strong>Warning:</strong> This action cannot be undone.</p>

✅ Preferred for important text, especially for accessibility.

4. Italics and Emphasis

4.1 Using the <i> Tag

The <i> tag makes text italic but does not indicate emphasis.

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

✅ Used for foreign words, technical terms, or citations.

4.2 Using the <em> Tag

The <em> tag makes text italic and adds emphasis.

<p>He <em>really</em> wanted to win the match.</p>

✅ Preferred when stressing importance.

5. Underlining and Highlighting Text

5.1 Using the <u> Tag

The <u> tag underlines text.

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

🚨 Avoid using <u> for emphasis—it can be confused with links.

5.2 Using the <mark> Tag

The <mark> tag highlights text with a default yellow background.

<p>The most important keyword is <mark>SEO</mark>.</p>

✅ Great for highlighting search results.

6. Small, Deleted, and Inserted Text

6.1 Using the <small> Tag

The <small> tag makes text smaller.

<p><small>Terms and conditions apply.</small></p>

✅ Used for legal notices, disclaimers, and fine print.

6.2 Using the <del> and <ins> Tags

The <del> tag strikes through text, while <ins> underlines new content.

<p>Old price: <del>$50</del> New price: <ins>$30</ins></p>

✅ Used for tracking text changes.

7. Superscript and Subscript Text

7.1 Using the <sup> Tag (Superscript)

Used for mathematical equations, footnotes, etc.

<p>2<sup>3</sup> = 8</p>

✅ Used for exponents, ordinals, and footnotes.

7.2 Using the <sub> Tag (Subscript)

Used for chemical formulas and subscripts.

<p>Water formula: H<sub>2</sub>O</p>

✅ Used for chemical notations and mathematical expressions.

8. Blockquote, Code, and Preformatted Text

8.1 Using the <blockquote> Tag

The <blockquote> tag is used for long quotations.

<blockquote>
  "The only limit to our realization of tomorrow is our doubts of today."
</blockquote>

✅ Browsers typically indent blockquotes.

8.2 Using the <code> and <pre> Tags

The <code> tag is used for displaying code snippets, while <pre> preserves whitespace formatting.

<pre>
def greet():
    print("Hello, World!")
</pre>

✅ Used for displaying programming code.

9. Combining Multiple Formatting Tags

Text formatting tags can be combined for better styling.

<p><strong><em>This is bold and italic text.</em></strong></p>

✅ Creates bold and italicized text together.

10. Full Example: HTML Text Formatting

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Text Formatting</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <h1>HTML Text Formatting</h1>

    <p><strong>Bold Text:</strong> This text is <b>bold</b>.</p>
    <p><em>Italic Text:</em> This text is <i>italic</i>.</p>
    <p><u>Underlined Text:</u> This text is <u>underlined</u>.</p>
    <p><mark>Highlighted Text:</mark> This text is <mark>highlighted</mark>.</p>

    <p>Scientific notation: H<sub>2</sub>O</p>
    <p>Exponents: 10<sup>2</sup> = 100</p>

    <blockquote>
        "The journey of a thousand miles begins with one step."
    </blockquote>

    <pre>
        function hello() {
            console.log("Hello, World!");
        }
    </pre>

</body>
</html>

✅ This example demonstrates all formatting tags in action!

11. Best Practices for Text Formatting

  • ✅ Use <strong> and <em> instead of <b> and <i> for accessibility.
  • ✅ Avoid using <u> unless it’s for spelling errors or special cases.
  • ✅ Use <mark> sparingly to highlight important keywords.
  • ✅ Nest elements properly for best readability.

Conclusion

In this chapter, you learned:
✅ The difference between <b> vs. <strong> and <i> vs. <em>.
✅ How to underline, highlight, and strike through text.
✅ Using superscripts (<sup>) and subscripts (<sub>).
✅ How to format code snippets with <code> and <pre>.

Scroll to Top