HTML Text Formatting

Subject: html

HTML Text Formatting

HTML provides several elements specifically designed to apply stylistic and semantic meaning to text. These formatting elements help structure content visually and contextually, making web pages more accessible and readable.

📌 Overview of HTML Text Formatting Tags

HTML formatting tags are used to define how specific portions of text should appear or be interpreted by browsers and assistive technologies. Some tags affect only visual presentation, while others carry semantic importance.

🔸 Bold and Important Text

1. <b> – Bold Text (Visual Only)

🚀 Try it in Compiler
  • Applies bold styling visually, but without semantic importance.

2. <strong> – Strong Importance

🚀 Try it in Compiler
  • Both bolds the text and indicates it has strong importance (semantic emphasis).

🔸 Italic and Emphasized Text

1. <i> – Italic Text (Visual Only)

🚀 Try it in Compiler
  • Used for stylistic purposes like technical terms or foreign words.

2. <em> – Emphasized Text

🚀 Try it in Compiler
  • Italicizes text and signals emphasis to screen readers.

🔸 Smaller Text

<small> – Small Text

🚀 Try it in Compiler
  • Displays content in a reduced font size.

🔸 Highlighted Text

<mark> – Highlighted or Marked Text

🚀 Try it in Compiler
  • Highlights text (typically with a yellow background).

🔸 Deleted and Inserted Text

1. <del> – Deleted Content

🚀 Try it in Compiler
  • Renders text with a strikethrough to indicate removal.

2. <ins> – Inserted Content

🚀 Try it in Compiler
  • Underlines the new text and marks it as inserted.

🔸 Subscript and Superscript

1. <sub> – Subscript Text

🚀 Try it in Compiler
  • Renders text slightly below the normal baseline (e.g., H₂O).

2. <sup> – Superscript Text

🚀 Try it in Compiler
  • Renders text slightly above the normal line (e.g., x²).

✅ Key Takeaways

  • Use <strong> and <em> for content that carries semantic importance.
  • Use <b> and <i> for purely visual styling when no semantic meaning is intended.
  • Combine tags for clarity:
🚀 Try it in Compiler
  • Avoid using formatting tags for layout or styling only—use CSS for visual presentation where possible.

Proper use of these tags helps ensure your website is accessible, readable, and optimized for search engines.

Next: HTML Pre Tag