Text and meaning

Headings are an outline, not sizes

<h1> to <h6> describe the structure of the document. Screen readers list them so a blind reader can skim; search engines read them as the shape of the page.

Use one <h1> per page: the subject of the document. Do not skip levels to get a smaller size — that is CSS's job.

an outline that makes sense

<h1>Making bread</h1>
  <h2>Ingredients</h2>
  <h2>Method</h2>
    <h3>Mixing</h3>
    <h3>Proving</h3>
  <h2>Storage</h2>

Paragraphs

<p> is a paragraph. It cannot contain a heading, a list, or another paragraph — those are block-level and will break out of it.

Do not use empty paragraphs for spacing. Margins belong in CSS.

Emphasis means emphasis

If the word matters, use <strong> or <em>. If it only needs to look different, use <b>/<i> or, better, a class and CSS.

Element	Meaning	Read aloud as
`<em>`	Stress emphasis — the sentence changes meaning	A change in tone
`<strong>`	Strong importance, seriousness, urgency	A change in tone
`<b>`	Bold with no extra importance — a keyword, a product name	Nothing
`<i>`	A different voice: a term, a taxonomic name, a thought	Nothing
`<mark>`	Highlighted for the reader's current task	Usually nothing

Quotes

<blockquote> is a quoted block and takes a cite attribute with the source URL. <q> is an inline quotation; the browser adds the quotation marks. <cite> marks the title of a work, not the person.

a quotation with its source

<figure>
  <blockquote cite="https://example.com/essay">
    <p>Programs must be written for people to read.</p>
  </blockquote>
  <figcaption>Abelson and Sussman, <cite>Structure and Interpretation of Computer Programs</cite></figcaption>
</figure>

Code, output and keys

<code> — a fragment of code, inline or inside <pre>.
<pre> — preformatted: whitespace and newlines are kept exactly.
<kbd> — a key the reader should press.
<samp> — output from a program.
<var> — a variable name.

Blocks of code

A code block is <pre><code>…</code></pre>. <pre> preserves the formatting; <code> says what the content is. Inside it, < must be written as < or the browser will read it as a tag.

Breaks and separators

<br> is a line break inside a block where the break is part of the content — an address, a line of a poem. It is not a way to create space between paragraphs.

<hr> is a thematic break: a change of subject. It is not a decorative line; use a CSS border for that.

Characters the browser would misread

Four characters have to be escaped in HTML text, because otherwise they mean something: < for <, > for >, & for &, and " for a double quote inside an attribute.

Time, abbreviations and small print

<time datetime="…"> lets a machine read the date while the reader sees whatever wording you chose. <abbr title> gives the expansion on hover and to assistive technology.

machine-readable detail

<p>Published <time datetime="2026-09-21">21 September 2026</time>.</p>
<p><abbr title="Cascading Style Sheets">CSS</abbr> arrived in 1996.</p>
<p><small>Prices exclude VAT.</small></p>