HTML 47 min

HTML Text Formatting

Mark emphasis, importance, quotations, and code correctly.

HTML can mark importance, emphasis, quotations, code, keyboard input, edits, and scientific notation. These elements carry meaning that can survive visual redesign and be communicated by tools. Use CSS for purely decorative bold, italic, color, or size changes.

Mark meaning inside prose

Use strong for warnings or important decisions, em for verbal emphasis, mark for text relevant to the current context, small for side comments, and sub or sup for notation. Read the sentence aloud to decide whether emphasis changes its meaning.

<p><strong>Save your recovery codes.</strong> You may need them if you lose access to your device.</p>
<p>I said to test the <em>keyboard</em> flow, not only the pointer flow.</p>
<p>Search result: <mark>semantic HTML</mark></p>
<p>Water is H<sub>2</sub>O. The area is 5 m<sup>2</sup>.</p>

Use strong for importance.
Use em for stress emphasis.
Use mark for contextual relevance.
Use small for side comments, not every small visual label.
Use sub and sup for real notation.

Annotated HTML element showing an opening tag, attribute, text content, and closing tag — Reading an element as a set of meaningful parts makes unfamiliar markup easier to understand.

Represent quotations, code, and edits

Use blockquote for a quoted section and q for a short inline quotation. cite identifies the title of a creative work, not the quoted person. code marks computer code, kbd marks user input, and del/ins identify edits.

<article> <h1>Workshop files updated</h1> <p>Updated <time datetime="2026-09-04">4 September 2026</time>.</p> <p><strong>Keep a backup before replacing your files.</strong></p> <p>Open <code>index.html</code> and press <kbd>Enter</kbd>.</p> <p>The meeting begins at <del>09:00</del> <ins>10:00</ins>.</p> </article>

<figure> <blockquote cite="https://example.com/report"> <p>A quoted passage goes here.</p> </blockquote> <figcaption>From <a href="https://example.com/report"><cite>Example report</cite></a>.</figcaption> </figure>

HTML Getting Started

HTML Core

Links, Media & Data

Page Structure

Quality & Reference

HTML Text Formatting

Mark meaning inside prose

Represent quotations, code, and edits

Mistakes to avoid

Guided practice

Lesson recap

Understand it. Build it. Explain it.

What you should be able to do

Similar appearance can hide different meanings

Machine-readable details complement visible wording

A release note with precise text roles

Code

Result

Why this example works

An attribution nobody can follow

Mark up a change announcement

Your build plan

Review your result

Can you explain the decision?

Format a useful release note

Code

Result

Quote a source

Code

Result

Test what you learned

Test what you learned

Test what you learned

Check your understanding