HTML — Formatting

Formatting text in HTML

HTML ships with a full toolkit for marking up meaningful text formatting. Each tag does something visually and carries meaning:

Tag	Meaning	Default look
<b>	Bring attention (stylistic bold)	Bold
<strong>	Strong importance	Bold
<i>	Alternate voice / technical term	Italic
<em>	Emphasis	Italic
<mark>	Highlighted relevance	Yellow background
<small>	Fine print, side comments	Smaller
<del>	Removed/incorrect text	Strikethrough
<ins>	Inserted text	Underline
<sub>	Subscript	Lower, smaller
<sup>	Superscript	Higher, smaller
<u>	Non-textual annotation	Underline

The bold pair: <b> vs <strong>

Both render bold by default — but mean different things:

<p>This word is <b>visually</b> bold.</p>
<p><strong>Warning:</strong> this action cannot be undone.</p>

• <b> = "make this stand out" (keywords, product names) — pure style
• <strong> = "this content is important" — real emphasis

Screen readers may announce <strong> with more force; they ignore <b>. Rule of thumb: use <strong> unless you specifically want silent visual bold.

The italic pair: <i> vs <em>

Same idea, italics:

<p>The term <i>hypertext</i> was coined in 1965.</p>
<p>I <em>really</em> meant that.</p>

• <i> = alternate voice: foreign words, technical terms, ship names, thoughts
• <em> = stressed emphasis, changing sentence meaning

Compare how emphasis moves meaning:

<p>I never said she stole it.</p>          <!-- neutral -->
<p>I <em>never</em> said she stole it.</p> <!-- denies ever saying it -->
<p>I never said <em>she</em> stole it.</p> <!-- someone else said it -->

Same words, three different sentences. That's what <em> encodes.

Highlighting: <mark>

Yellow-marker effect for relevant passages:

<p>Search results show your query terms:
   learn <mark>HTML</mark> fast.</p>

What the browser displays

Search results show your query terms: learn ==HTML== fast.

(The word "HTML" appears on a yellow background, exactly like a highlighter pen.)

Edits: <del> and <ins>

Show document changes honestly:

<p>Meeting at <del>3 PM Friday</del> <ins>10 AM Monday</ins>.</p>

What the browser displays

3 PM Friday 10 AM Monday.

(Old text struck through, replacement underlined.)

Price-drop displays use this pattern constantly:

<p>Was <del>$499</del>, now <strong>$299</strong>!</p>

Fine print: <small>

For disclaimers, copyright, side remarks:

<p>Subscription: $9/month. <small>Billed annually. Cancel anytime.</small></p>

<small> means "less important", not just "smaller" — CSS can shrink any text.

Sub and superscript

Essential beyond chemistry class:

<p>H<sub>2</sub>O and CO<sub>2</sub></p>
<p>E = mc<sup>2</sup></p>
<p>Written on 21<sup>st</sup> June</p>
<p>x<sup>n</sup> + y<sup>n</sup> = z<sup>n</sup></p>

What the browser displays

H₂O and CO₂ E = mc² Written on 21ˢᵗ June

(Subscripts sit below the line, superscripts above — both smaller.)

Combining formats

Formatting elements nest like any others:

<p><strong><mark>Sale ends today</mark></strong> —
   prices were <del>wrongly listed</del> corrected this morning.</p>

Keep nesting shallow and meaningful. If you need heavy styling, CSS is the tool — these tags are for semantic text-level formatting.

Abbreviations bonus: <abbr>

<p><abbr title="HyperText Markup Language">HTML</abbr> is fun.</p>

Hovering shows a tooltip with the full term. Screen readers benefit too.

Mini Practice

Write review.html — a fake product review exercising everything:

1. A <strong> warning and an <em> emphasized opinion
2. A <mark> highlight over the verdict
3. A price change using <del> + <ins>
4. A disclaimer in <small>
5. The formula H₂O somewhere absurd
6. An <abbr> explaining any acronym you use

Read it back: every formatted piece should justify its tag's meaning, not just its look.

Next: colors →