Text Formatting Elements
| Tag | Description | Example |
|---|---|---|
<b> | Bold text | This is bold |
<strong> | Important text | This is strong |
<i> | Italic text | This is italic |
<em> | Emphasized text | This is emphasized |
<mark> | Marked/highlighted text | This is marked |
<small> | Smaller text | This is small |
<del> | Deleted text | |
<ins> | Inserted text | This is inserted |
<sub> | Subscript text | H2O |
<sup> | Superscript text | E=mc2 |
Code Example
<p>This is <b>bold</b> and this is <strong>strong</strong>.</p>
<p>This is <i>italic</i> and this is <em>emphasized</em>.</p>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
<p>This is <sub>subscript</sub> and this is <sup>superscript</sup>.</p>Best Practices
- Use
<strong>instead of<b>for semantic importance - Use
<em>instead of<i>for semantic emphasis - Avoid using formatting tags for layout purposes (use CSS instead)
- Combine formatting tags carefully (avoid excessive nesting)
- Remember that some tags have semantic meaning beyond visual appearance
Accessibility
- Screen readers may announce
<strong>and<em>differently - Don't rely solely on formatting to convey meaning
- Ensure proper color contrast for
<mark>elements - Use
<del>and<ins>for document edits/changes
