Formatting Text: strong, em, b, i, mark, and small
HTML distinguishes between semantic meaning and purely visual formatting. Modern developers use semantic tags so screen readers can adjust vocal inflections accordingly.
1. Semantic vs Visual Comparison
| Tag | Meaning | Default Visual | Screen Reader Effect |
|---|---|---|---|
<strong> |
Strong importance, seriousness, or urgency | Bold | Emphasized vocal tone |
<b> |
Stylistic offset without semantic importance | Bold | Normal voice |
<em> |
Stress emphasis changing sentence meaning | Italic | Inflected emphasis |
<i> |
Alternate voice, taxonomic name, foreign phrase | Italic | Normal voice |
<mark> |
Highlighted text for relevance | Yellow background | Announced as highlighted |
<small> |
Side comments, disclaimers, copyrights | Smaller text | Low priority voice |
2. Practical Examples
<!-- Urgent warning -->
<p><strong>Warning:</strong> Always backup your production database before running migrations.</p>
<!-- Emphasized statement -->
<p>You must <em>compile</em> the source code before deploying to staging.</p>
<!-- Search term highlighting -->
<p>Search results for "Django": Devify offers modern <mark>Django</mark> 5.1 tutorials.</p>
<!-- Fine print disclaimer -->
<p><small>© 2026 Devify. All source code is MIT licensed.</small></p>