Text Formatting in HTML
HTML gives you a handful of elements for changing how text looks or behaves inline: bold, italic, underline, small print, and strikethrough. Most of them come in two flavors — a presentational version that just changes appearance, and a semantic version that also tells browsers, search engines, and assistive technology something about the meaning of the text. Picking the right one matters more than it looks.
<b> vs <strong>
Both <b> and <strong> render as bold text by default, and visually they are identical in every browser. The difference is entirely semantic.
<b> (Bring Attention To) — stylistically offsets text without implying extra importance. Use it for things like keywords in a summary or product names.
<strong> — marks text as having strong importance, seriousness, or urgency. Screen readers may announce it with added emphasis.
b-vs-strong.html
<p>The parts of a car <b>engine</b> include the piston and crankshaft.</p> <p><strong>Warning:</strong> Disconnect the battery before servicing.</p>
<strong>. If it only changes the look, <b> is acceptable — though reaching for CSS (font-weight: bold) on a <span> is often even more correct for pure styling.<i> vs <em>
The same pattern repeats with italics. <i> and <em> both render in italic type by default.
<i> — Idiomatic text: technical terms, foreign-language phrases, ship/book titles, or a character's inner thoughts. Text that is set off in a different voice or mood, without added emphasis.
<em> — Stress emphasis. Changes the meaning of a sentence the way raising your voice would. Nested <em> increases the degree of emphasis.
i-vs-em.html
<p>The term <i>photosynthesis</i> describes how plants make food.</p> <p>I <em>never</em> said you took the money.</p> <p>I never said <em>you</em> took the money.</p>
<em> examples above out loud, stressing the emphasized word each time — notice how the meaning of the sentence shifts depending on which word carries the emphasis.<u> — Underline
<u> renders an underline, but it does not mean "important" or "emphasized." Its semantic meaning is closer to "non-textual annotation" — think proper nouns in Chinese text, or flagging a misspelled word.
underline.html
<p>The word <u>seperate</u> is misspelled; it should be <u>separate</u>.</p>
<u> for plain emphasis is a usability trap — visitors will click it and expect something to happen. Prefer <strong>/<em> or CSS for styling instead.<small> — Fine Print
<small> represents "side comments" — legal disclaimers, copyright notices, or fine print — and browsers render it in a smaller font size by default.
small.html
<p>Buy now for $19.99. <small>Offer valid while supplies last. Terms apply.</small></p> <p><small>© 2026 Let Codes. All rights reserved.</small></p>
<strike> / <s> — Strikethrough
<strike> is obsolete — it was deprecated in HTML4 and removed from the spec. Use <s> instead, which means the same thing: content that is no longer accurate or relevant (not to be confused with edits — see <del> in the mark/highlight tutorial).
strikethrough.html
<!-- Avoid: obsolete element --> <p><strike>$49.99</strike></p> <!-- Prefer --> <p><s>$49.99</s> Now $29.99!</p>
Presentational vs Semantic — Quick Comparison
Presentational | Semantic equivalent | Meaning conveyed |
|---|---|---|
<b> | <strong> | importance / urgency |
<i> | <em> | stress emphasis |
<u> | n/a (styling only) | no inherent meaning |
<strike> | <s> | no longer accurate |
Screen Reader Implications
Assistive technology treats semantic and presentational tags differently. Most screen readers will announce <strong> and <em> with vocal emphasis or a tonal change (behavior varies by reader and settings), while <b>, <i>, and <u> are typically passed through with no special announcement — they are visual cues only.
Use semantic tags when the meaning genuinely needs to reach non-visual users.
Use presentational tags (or better, CSS) when you only want a visual effect with no semantic weight.
Never rely on color, bold, or italics alone to convey critical information — always pair it with text.