Text Formatting Tags
1. Introduction
HTML provides a rich set of inline elements for formatting text — marking up importance, emphasis, subscripts, abbreviations, and more. Unlike CSS, which handles visual styling, these elements carry semantic meaning that screen readers and search engines understand. In this lesson you will learn which formatting tags to use and — just as importantly — which ones to avoid.
2. Concept
Semantic vs Presentational Formatting
HTML5 distinguishes between elements that carry meaning and those that are purely visual. Semantic elements like <strong> and <em> communicate significance to assistive technologies. The old presentational elements <b> and <i> still exist in HTML5 but with redefined, narrower use cases.
Common Text Formatting Elements
| Element | Semantic Meaning | Default Appearance |
|---|---|---|
<strong> |
Strong importance | Bold |
<em> |
Stress emphasis | Italic |
<mark> |
Highlighted / relevant text | Yellow background |
<del> |
Deleted text | Strikethrough |
<ins> |
Inserted text | Underline |
<code> |
Inline code fragment | Monospace font |
<abbr> |
Abbreviation / acronym | Dotted underline |
<sup> / <sub> |
Superscript / Subscript | Raised / lowered small text |
<strong> content with added vocal stress. <b> is rendered bold but receives no special announcement. Use the one that matches the actual intent.<abbr title="HyperText Markup Language">HTML</abbr> to provide tooltip expansions for abbreviations — great for accessibility and SEO.<font>, <center>, and <strike>. They were removed in HTML5. Use CSS instead.3. Basic Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Formatting</title>
</head>
<body>
<p>
This is <strong>critically important</strong> information.
Please read it <em>very carefully</em>.
</p>
<p>
The term <i>dolor sit amet</i> is from Latin.
Use <code>console.log()</code> to debug JavaScript.
</p>
<p>
Water is H<sub>2</sub>O. Speed of light is ~3x10<sup>8</sup> m/s.
</p>
<p>
Old price: <del>$49.99</del> — New: <ins>$29.99</ins>
</p>
<p>
Search results for <mark>HTML tutorial</mark> — 2,300 results.
</p>
<p>
<abbr title="Cascading Style Sheets">CSS</abbr> controls visual styling.
</p>
</body>
</html>
4. How It Works
Step 1 — Strong and Em Communicate Semantics
Screen readers may change tone or stress for <strong> and <em> content. Search engines also weight these terms slightly higher.
Step 2 — Sub and Sup for Scientific Text
<sub> lowers text below the baseline — ideal for chemical formulas. <sup> raises text above — ideal for exponents and footnote markers.
Step 3 — Del and Ins for Change Tracking
These elements semantically describe content that was removed or added to a document. Common in pricing displays and revision histories.
Step 4 — Mark for Highlighted Relevance
<mark> indicates text relevant to a current search or context. Unlike <strong>, it does not imply importance — just relevance.
5. Real-World Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Release Notes v2.0</title>
</head>
<body>
<h1>Release Notes — Version 2.0</h1>
<h2>What's New</h2>
<p>
Version 2.0 introduces <strong>real-time collaboration</strong>,
a <em>completely redesigned</em> dashboard, and a new
<abbr title="Application Programming Interface">API</abbr>.
</p>
<h2>Performance Improvements</h2>
<p>
Load time improved from <del>4.2s</del> to <ins>1.1s</ins>
through optimised rendering and <code>lazy-loading</code>.
</p>
<h2>Breaking Changes</h2>
<p>
<strong>Warning:</strong> The <code>getUserData()</code> method
has been <del>removed</del>. Use <ins><code>fetchUser()</code></ins> instead.
</p>
<h2>System Requirements</h2>
<p>
Minimum <abbr title="Random Access Memory">RAM</abbr>: 8 <abbr title="Gigabytes">GB</abbr>.
Available in <mark>early access</mark> from 1 March 2025.
</p>
</body>
</html>
6. Common Mistakes
❌ Using <b> for importance
<p><b>Warning: Do not click this button.</b></p>✓ Use <strong> when content is critically important
<p><strong>Warning: Do not click this button.</strong></p>❌ Using deprecated <font> for styling
<font color="red" size="4">Error message</font>✓ Use CSS for all visual styling
<span class="error">Error message</span>7. Try It Yourself
8. Quick Reference
| Element | Use When… | Screen Reader Effect |
|---|---|---|
<strong> |
Content is of strong importance | May add vocal stress |
<em> |
Text needs stress emphasis | May add stress intonation |
<mark> |
Highlighting search relevance | Announced as highlighted |
<code> |
Inline code or technical strings | Read as code |
<abbr title=""> |
Abbreviations needing expansion | Title tooltip accessible |
<del> / <ins> |
Documenting edits | Announced as deleted/inserted |
<sub> / <sup> |
Scientific notation, footnotes | Read inline |