Introduction
Text formatting plays a crucial role in emphasizing important information, improving readability, and guiding the reader's attention across your webpage.
In HTML, you have various tags specifically designed to format text without relying on CSS initially.
In this blog, we’ll explore how to make text bold, italic, underlined, and introduce other formatting tags realistically used in modern web development.
1. Why Formatting Matters in HTML
- Emphasizes Key Points: Important phrases or actions stand out.
- Enhances Readability: Well-formatted content is easier to scan.
- Improves Accessibility: Screen readers can identify emphasized text when proper semantic tags are used.
- Adds Semantic Meaning: Helps search engines understand the significance of content.
2. Common Text Formatting Tags in HTMLa
| Tag | Purpose | Example Use Case |
|---|---|---|
<b> |
Bold text (visual only) | Highlight keywords |
<strong> |
Important text (semantic bold) | Emphasizing critical warnings |
<i> |
Italic text (visual only) | Styling foreign words |
<em> |
Emphasized text (semantic italic) | Emphasizing an important phrase |
<u> |
Underlined text | Denoting links or special text |
<mark> |
Highlighted text | Highlight search terms |
<small> |
Smaller text size | Fine print or disclaimers |
<del> |
Deleted text (strikethrough) | Show old price in pricing tables |
<ins> |
Inserted text (underlined) | Track changes or edits |
<sub> |
Subscript text | Chemical formulas |
<sup> |
Superscript text | Footnotes, exponents |
3. Detailed Breakdown: With Syntax and Example
3.1 Bold Text
Syntax using <b>:
<p>This is a <b>bold</b> word in a sentence.</p>
- Purely visual. No semantic importance.
Syntax using <strong>:
<p>This is a <strong>very important</strong> announcement.</p>
- Has semantic meaning: Screen readers announce this more strongly.
3.2 Italic Text
Syntax using <i>:
<p>He said it was a <i>fait accompli</i>.</p>
- Pure styling, usually for foreign words or phrases.
Syntax using <em>:
<p>You <em>must</em> complete the project on time.</p>
- Has semantic meaning: Emphasis on "must".