HTML Text Formatting: Semantic vs Stylistic Tags, Revisions & A11y
HTML provides a rich palette of inline tags to format words and phrases. A foundational principle of modern HTML5 is distinguishing between purely stylistic formatting (visual decoration) and semantic formatting (communicating structural urgency, grammatical stress, and editorial changes to screen readers and search bots).
1. The Semantics vs Presentation Dichotomy
Stylistic Tags (Visual Offset)
<b>, <i>, <u>, <s>
Alter typographical presentation without implying higher importance. Screen readers read these with standard flat intonation.
Semantic Tags (Structural Meaning)
<strong>, <em>, <mark>, <del>, <ins>
Communicate urgency, vocal stress, document amendments, or search highlights directly to assistive technology.
2. Comprehensive Text Formatting Reference Table
| Tag | Default Visual Rendering | Semantic Purpose & Screen Reader Behavior | Production Code Example |
|---|---|---|---|
<strong> | Bold typeface | Conveys high importance, seriousness, or urgency. | <strong>Warning:</strong> Session expiring. |
<b> | Bold typeface | Draws visual attention to keywords without extra importance. | The <b>MacBook Pro</b> features 32GB RAM. |
<em> | Italic typeface | Conveys grammatical stress emphasis (changes vocal tone). | I <em>really</em> enjoyed that conference. |
<i> | Italic typeface | Alternate voice: foreign phrases, technical terms, taxonomy. | The Latin name is <i>Homo sapiens</i>. |
<mark> | Yellow background highlight | Highlights text for relevance in search queries or study guides. | Search match: <mark>React 19</mark> release notes. |
<small> | Smaller font size (80%) | Represents side-comments, disclaimers, or copyright fine print. | <small>© 2026 Terms apply.</small> |
<del> | Represents content deleted during document revisions. | Price: <del>$99</del> <ins>$79</ins> | |
<ins> | Underlined text | Represents newly inserted content in legal or wiki revisions. | <ins datetime="2026-03-01">Amended section</ins> |
<sub> | H2O (Lower baseline) | Subscript: chemical formulas and mathematical coordinates. | Carbon dioxide: CO<sub>2</sub> |
<sup> | x2 (Upper baseline) | Superscript: exponents, footnotes, and ordinal indicators. | Theorem: E = mc<sup>2</sup> |
3. Editorial Revision Tracking with <del> and <ins>
For law firms, wikis, and version-controlled editorial platforms, the <del> and <ins> tags provide built-in audit trails:
<p> The project milestone is scheduled for <del datetime="2026-04-01T12:00:00Z" cite="/revisions/commit-45a">April 1st</del> <ins datetime="2026-04-15T12:00:00Z" cite="/revisions/commit-45a">April 15th</ins>. </p>
This markup is machine-readable, allowing document comparison tools to generate automated redline diffs without proprietary third-party software.
