Headings, paragraphs and text
How to structure text so it reads well, ranks well, and works for screen readers — including the heading levels everyone gets wrong.
Headings form an outline
There are six heading levels, <h1> through <h6>. Think of them as a document outline, not as font sizes. Skip levels and the outline breaks for anyone navigating by structure.
- Use exactly one
<h1>per page — it is the page's title. - Move to
<h2>for top sections,<h3>for subsections. - Never pick a heading level because it 'looks right'; style with CSS instead.
💡
Screen reader users commonly jump heading to heading. A clean outline is the single cheapest accessibility win available.
Paragraphs and inline meaning
<h2>Getting started</h2>
<p>HTML describes <strong>structure</strong>, and CSS <em>appearance</em>.</p>
<p>Some terms need care: <code><div></code> has no meaning,
while <abbr title="HyperText Markup Language">HTML</abbr> does.</p>| Element | Meaning | Use for |
|---|---|---|
<p> | Paragraph | Blocks of prose |
<strong> | Strong importance | Genuine emphasis — not just bold |
<em> | Stress emphasis | Changing the meaning of a sentence |
<code> | Fragment of code | Identifiers, snippets |
<pre> | Preformatted block | Multi-line code; preserves whitespace |
<abbr> | Abbreviation | Expansions in the title |
<blockquote> | Quoted passage | Block-level citation |
<br> | Line break | Addresses and poems only — never spacing |
Escaping special characters
Three characters need care because they belong to the markup itself. To display them literally, use entities.
| Character | Entity | Why |
|---|---|---|
< | < | Otherwise starts a tag |
> | > | Optional, but consistent practice |
& | & | Otherwise starts an entity |
Inside most quoted attribute values only & and the quote character itself are problematic. Whitespace in normal text collapses to a single space — that is why multi-line code belongs in <pre>.
FAQ
Why does my line break not show up?
HTML collapses whitespace. Use two separate block elements, or CSS margins.
<br> is for genuine line breaks inside a block (poetry, addresses).strong vs b, em vs i?
strong/em carry meaning (importance, stress); b/i historically meant 'draw attention' without semantics. Prefer the meaningful pair.Related
Elements and attributes Semantic layout
Last refreshed 2026-09-17.