The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Text Formatting Tags

Next ►
►

In this section, we will explore various HTML tags used to format text. These tags help you emphasize, highlight, and structure text content on your web pages. Understanding these tags is crucial for creating well-structured and visually appealing web content.

Key Concepts

  1. Bold Text (<b> and <strong>):

    • <b>: Makes text bold without implying any extra importance.
    • <strong>: Makes text bold and indicates that the text is of strong importance.

  2. Italic Text (<i> and <em>):

    • <i>: Italicizes text without implying any extra emphasis.
    • <em>: Italicizes text and indicates that the text should be emphasized.

  3. Underlined Text (<u>):

    • <u>: Underlines text, often used for stylistic purposes.

  4. Strikethrough Text (<s> and <del>):

    • <s>: Strikes through text, indicating that it is no longer accurate or relevant.
    • <del>: Strikes through text, indicating that it has been deleted.

  5. Subscript and Superscript (<sub> and <sup>):

    • <sub>: Displays text as subscript, typically used for chemical formulas or mathematical expressions.
    • <sup>: Displays text as superscript, often used for exponents or footnotes.

  6. Small Text (<small>):

    • <small>: Reduces the font size of the text, often used for fine print or disclaimers.

  7. Inserted Text (<ins>):

    • <ins>: Underlines text to indicate that it has been inserted.

  8. Marked Text (<mark>):

    • <mark>: Highlights text, indicating that it is important or relevant.

Practical Examples

Bold and Strong Text

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

Explanation:

  • <b> makes the word "bold" bold.
  • <strong> makes the word "strong" bold and indicates importance.

Italic and Emphasized Text

<p>This is an <i>italic</i> text.</p>
<p>This is an <em>emphasized</em> text.</p>

Explanation:

  • <i> italicizes the word "italic".
  • <em> italicizes the word "emphasized" and indicates emphasis.

Underlined Text

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

Explanation:

  • <u> underlines the word "underlined".

Strikethrough Text

<p>This is a <s>strikethrough</s> text.</p>
<p>This is a <del>deleted</del> text.</p>

Explanation:

  • <s> strikes through the word "strikethrough".
  • <del> strikes through the word "deleted", indicating it has been removed.

Subscript and Superscript

<p>H<sub>2</sub>O is the chemical formula for water.</p>
<p>E = mc<sup>2</sup> is Einstein's mass-energy equivalence formula.</p>

Explanation:

  • <sub> makes "2" subscript.
  • <sup> makes "2" superscript.

Small Text

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

Explanation:

  • <small> reduces the font size of the word "small".

Inserted Text

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

Explanation:

  • <ins> underlines the word "inserted", indicating it has been added.

Marked Text

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

Explanation:

  • <mark> highlights the word "highlighted".

Practical Exercise

Exercise: Create an HTML page that uses each of the text formatting tags discussed above.

Solution:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Formatting Tags</title>
</head>
<body>
    <p>This is a <b>bold</b> text.</p>
    <p>This is a <strong>strong</strong> text.</p>
    <p>This is an <i>italic</i> text.</p>
    <p>This is an <em>emphasized</em> text.</p>
    <p>This is an <u>underlined</u> text.</p>
    <p>This is a <s>strikethrough</s> text.</p>
    <p>This is a <del>deleted</del> text.</p>
    <p>H<sub>2</sub>O is the chemical formula for water.</p>
    <p>E = mc<sup>2</sup> is Einstein's mass-energy equivalence formula.</p>
    <p>This is a <small>small</small> text.</p>
    <p>This is an <ins>inserted</ins> text.</p>
    <p>This is a <mark>highlighted</mark> text.</p>
</body>
</html>

Common Mistakes and Tips

  • Misusing <b> and <strong>: Use <strong> when the text is of strong importance, not just for styling.
  • Confusing <i> and <em>: Use <em> to emphasize text, not just for styling.
  • Overusing <u>: Underlining is often reserved for links, so use it sparingly to avoid confusion.
  • Forgetting to close tags: Always ensure that you close your tags properly to avoid rendering issues.

Conclusion

In this section, we covered various HTML text formatting tags that help you style and emphasize text on your web pages. Understanding these tags is essential for creating well-structured and visually appealing content. In the next section, we will explore how to create lists using HTML.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved