Text Formatting
📌 Covered in this chapter:
<strong> vs <b> · <em> vs <i> · <mark> Highlight · <sub> & <sup> · <blockquote> & <q> · <abbr> Abbreviations · <time> Date Formatting
Welcome to Phase 2 (Chapter 5): Text Formatting! HTML provides rich semantic text formatting tags to highlight important terms, emphasize phrases, annotate abbreviations, format quotations, and represent mathematical subscripts or dates. In this chapter, we master semantic vs visual formatting.
1Semantic Emphasis (<strong> & <em>) vs Visual (<b> & <i>)
| Semantic Tag | Visual Equivalent | Semantic Meaning & Screen Reader Effect |
|---|---|---|
<strong> | <b> | Indicates strong importance or urgency. Screen readers read with heightened inflection. |
<em> | <i> | Indicates stress emphasis on a word altering sentence meaning. Read with verbal emphasis. |
<mark> | — | Highlights text relevant to user's current context (like search match highlights). |
HTML — Emphasis & Highlight Showcase
▶ Run in HTML Editor
<p>Warning: Do <strong>NOT</strong> share your password!</p>
<p>I <em>really</em> love coding in HTML5.</p>
<p>Search results for <mark>HTML5 Masterclass</mark>:</p>2Subscripts (<sub>), Superscripts (<sup>) & Small Text (<small>)
Subscript (<sub>): Renders smaller text below baseline (used for chemical formulas like H2O).
Superscript (<sup>): Renders smaller text above baseline (used for mathematical exponents like E = mc2 or ordinal numbers like 1st).
Small (<small>): Renders fine print like copyright notices or disclaimers.
HTML — Subscripts & Superscripts
▶ Run in HTML Editor
<p>Chemical Formula of Water: H<sub>2</sub>O</p>
<p>Einstein's Mass-Energy Equivalence: E = mc<sup>2</sup></p>
<p><small>© 2026 Our Compiler. All rights reserved.</small></p>3Quotations (<blockquote> & <q>), Abbreviations (<abbr>) & Time (<time>)
HTML — Quotations, Abbr & Time
▶ Run in HTML Editor
<!-- Block Quote for Multi-line Quotes -->
<blockquote cite="https://www.w3.org">
"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."
</blockquote>
<!-- Inline Quote -->
<p>Tim Berners-Lee said <q>The Web is for everyone.</q></p>
<!-- Abbreviation with Hover Tooltip -->
<p>Learn <abbr title="HyperText Markup Language">HTML</abbr> today.</p>
<!-- Machine-Readable Time -->
<p>Published on <time datetime="2026-08-20">August 20, 2026</time>.</p>❓ Frequently Asked Questions (FAQ)
Q1: Why is the datetime attribute important on <time> tags?
The datetime="2026-08-20" attribute provides ISO standard machine-readable format for search engines, calendar apps, and web crawlers, regardless of how the date is formatted visually.