Marking Words Up So They Mean Something
There are six heading levels and they are an outline, not six font sizes — using h3 because it looked right is a common HTML mistake. Learn what each text element claims, and which two look identical and are not.
Read first: Elements, Tags, and the Ones That Never Close
There are six heading levels and they are an outline, not six font sizes — using h3 because it looked right is a common HTML mistake. Learn what each text element claims, and which two look identical and are not.
Headings are an outline, not a size chart
h1 through h6 are section levels, exactly like the numbered headings in an essay. They happen to render at decreasing sizes, and that coincidence is responsible for most misuse of HTML anywhere.
<h1>Learning to Cook</h1> <h2>Equipment</h2> <h3>Knives</h3> <h3>Pans</h3> <h2>Techniques</h2> <h3>Heat control</h3> <h4>Searing</h4> <h3>Seasoning</h3>That structure is real and machine-readable. A screen reader can list every heading and jump between them — which is how blind users skim a page, the same way you skim it with your eyes. A search engine reads it as the shape of your content.
One h1 per page, and no skipped levels
Two conventions, both easy, both frequently broken.
One h1
It is the title of this page — what the page is about, not what the site is called. HTML5 technically permits several; screen reader users overwhelmingly expect one, and it is the first thing many of them jump to.
No skipping
h1 then h3 with no h2 between reads as a missing section. Go down one level at a time. Coming back up is fine and normal — h3 to h2 just means a new section started.
The site name belongs in a link inside the header, not in a heading — it is navigation, not the subject of this page. Then one h1 per page saying what THIS page is: How I Built a Desk. The reader already knows which site they are on; the h1 should tell them something they do not know.
Two h1 elements is not a validation error. It is a page whose outline says it is about two things.
A paragraph is a block, and whitespace is not
HTML collapses whitespace, and it surprises almost everyone on their first page: any run of spaces, tabs, and newlines becomes a single space.
<p>This has lots of space.</p>This has lots of space.So you cannot lay out a page by pressing Enter or Space. Blank lines in your source do nothing, and that is deliberate — it lets you indent your markup for readability without affecting the output.
The gap between paragraphs comes from <p> being a block element with a default margin, not from the newline you typed.
A paragraph. Block-level, with margin above and below. The workhorse of every page.
A line break WITHIN a paragraph — an address, a line of a poem. Not for spacing. A stack of <br> is CSS margin, written badly.
A thematic break: the subject changes. It renders as a line, and the meaning is the change of topic, not the line.
Preformatted. The one element where whitespace is preserved exactly. Renders in a monospace font, and is what wraps code blocks.
strong and em mean more than bold and italic
Four elements, two visual results, and a real distinction underneath.
<p><strong>Warning:</strong> this deletes everything.</p><p>I said <em>her</em> book, not his.</p> <p>The <b>Acme Corp</b> results are in.</p><p>The word <i>schadenfreude</i> has no English equivalent.</p>strong and em — meaning
strong is importance or urgency. em is stress emphasis — the word you would say louder, which can change the sentence's meaning. Screen readers may change tone for these.
b and i — convention
b draws attention with no added importance — a keyword, a product name. i marks something set apart: a foreign phrase, a ship's name, a technical term. Neither implies emphasis.
In practice: reach for strong and em. They are right far more often, and if you want bold text with no particular meaning, that is CSS ("font-weight: 600") rather than a tag.
A few more text elements, all of which say something a span would not:
<blockquote cite="https://example.com/post"> <p>A quotation long enough to stand on its own.</p></blockquote> <p>She said <q>this is a short inline quote</q> and left.</p><p>Run <code>npm install</code> to begin.</p><p>Published <time datetime="2026-08-09">9 August 2026</time>.</p><p><abbr title="Cascading Style Sheets">CSS</abbr> is the second half.</p><p>The price is <s>£40</s> £25.</p>Entities are for characters HTML would eat
Three characters are structural in HTML, so writing them literally is ambiguous at best. Write them as entities instead — an ampersand, a name, a semicolon.
A less-than sign. Written literally, the browser starts reading a tag. This one breaks things.
Greater-than. Less dangerous, but write it as an entity for symmetry.
An ampersand. It is how every entity starts, so a bare & followed by a word can be misread.
A non-breaking space: a space that will not wrap. For "10 km" or "Chapter 4", where a line break would read badly. Not for indentation, ever.
<p>Use the <p> element for paragraphs.</p> renders as: Use the <p> element for paragraphs.Everything else you can type directly, provided your <meta charset="utf-8"> is in place — em dashes, curly quotes, accented letters, emoji, every script on earth. The old lists of hundreds of named entities are a relic of the days before UTF-8 was universal.
Key takeaways
- h1–h6 are outline levels, not font sizes. Choosing one for its appearance breaks the outline for everyone who navigates by it.
- Screen reader users jump between headings to skim, the way you skim visually.
- One h1 per page, saying what this page is. The site name is navigation, not a heading.
- Do not skip levels going down. Coming back up is fine.
- HTML collapses all whitespace to a single space. Blank lines and repeated spaces do nothing.
- Spacing comes from block elements and CSS margin, never from <br> or pressing Enter.
- strong is importance, em is stress emphasis; b and i are conventional appearance with no added meaning.
- blockquote, q, code, time, abbr and s all say something a span would not.
- Write < > & as entities. With utf-8 everything else can be typed directly.
- Comments are ignored by the browser and fully visible in view source.
Before you move on
Quick check
Answer these to unlock the next chapter: 3 of 4 to pass. You can retake it anytime.
Make a free account to read on
Every chapter is free — an account lets your course progress follow you from your laptop to your phone. No payment, no trial.