Chapter 5: Text Formatting & Typography
Words carry nuance, tone, and intent. In this module, discover the precise semantics of every inline text formatting element in HTML5 — from vocal emphasis and editorial revisions to scientific notation and accessible abbreviations.
📖 The Mental Model: The Typographer's Toolbox
Imagine an ancient printing press workshop. The master typographer didn’t just choose letters; they selected specific typefaces to convey distinct meanings: italics for foreign phrases and stressed speech, heavy weights for critical warnings, strikethroughs for retracted claims, and raised marks for mathematical powers.
HTML5 elevates typography beyond mere visual styling. Every formatting tag informs search engines, automated indexers, and assistive screen readers why a word looks different. Mastering these 10 lessons ensures your web documents communicate with precision, elegance, and universal accessibility.
Chapter Lessons
-
5.1
The <p> Paragraph Element
The fundamental unit of written thought, user-agent vertical margins, optimal 65ch line lengths, and parser auto-closing behavior.
-
5.2
Bold Text: <b> vs <strong>
Stylistic visual highlighting vs semantic importance and urgency, screen reader vocal inflections, and CSS font-weight alternatives.
-
5.3
Italic Text: <i> vs <em>
Alternate voice, foreign loan words, and technical terms vs linguistic stress emphasis that alters sentence meaning, plus <cite> for titles.
-
5.4
Underline: <u> and <ins>
Unarticulated annotations, proper names, and avoiding link underline confusion vs legal & editorial additions with cite and datetime.
-
5.5
Strikethrough: <s>, <del>, and <strike>
Outdated promotional prices vs editorial document deletions, why <strike> is obsolete, and screen-reader accessible discount badges.
-
5.6
Superscript <sup> and Subscript <sub>
Mathematical exponents, chemical molecular formulas, ordinal numbers, and solving the browser vertical-align line-height glitch.
-
5.7
Small Text with <small>
Legal fine print, copyright colophons, terms of service disclaimers, side comments, and distinguishing semantics from CSS font-size.
-
5.8
Highlighting Text with <mark>
Search query matching, contextual relevance highlights, user-agent defaults, and WCAG high-contrast styling in light and dark themes.
-
5.9
Abbreviations with <abbr>
Acronyms and initialisms, title attribute expansions, screen reader pronunciation strategies, and replacing the obsolete <acronym> tag.
-
5.10
The <wbr> Word Break Opportunity Element
Preventing mobile horizontal overflow on long URLs and compounds, contrasting <wbr> with soft hyphens (­) and CSS break-word.