🔑 **Info:** Text formatting tags are used to display text in a special type of format. These tags mainly focus on **semantics** (the meaning of the content), although they also change the visual style.
Common Text Formatting Tags
These elements help structure and present text content in an easily readable and meaningful way:
| Tag | Description | Visual Example |
|---|---|---|
| <b> | Bold text (presentational). | **b** |
| <strong> | Important text (semantic, bold style). | **strong** |
| <i> | Italic text (presentational). | *i* |
| <em> | Emphasized text (semantic, italic style). | *em* |
| <mark> | Highlighted text. | |
| <small> | Smaller text. | |
| <del> | Deleted (strikethrough) text. | ~~del~~ |
| <ins> | Inserted (underlined) text. | ins |
| <sub> | Subscripted text. | Xsub |
| <sup> | Superscripted text. | Ysup |
Why choose <strong> vs <b>?
This is a common question. While both tags make text visually **bold**, they have different **semantic** meanings:
- <strong>: Indicates the content is of **strong importance** or seriousness. Search engines and screen readers pay attention to this.
- <b>: Used to attract attention to text without conveying extra importance, like keywords in a review. It is purely for **style** where **strong** is not appropriate.
The same rule applies to <em> (emphasis/semantic importance) versus <i> (alternate voice/style).
Code Example:
<p>This is <b>bold</b> text.</p>
<p>This is <strong>strongly important</strong> text.</p>
<p>This is <i>italic</i> text.</p>
<p>This is <em>emphasized</em> text.</p>
<p>This is <mark>highlighted</mark> text.</p>
<p>This is <del>deleted</del> text and <ins>inserted</ins> text.</p>
<p>H<sub>2</sub>O is a common chemical formula.</p>
<p>E=MC<sup>2</sup> is Einstein's famous equation.</p>
Output:
