Headings and paragraphs

HTML has six heading levels, h1 to h6, and screen reader users often jump from heading to heading to find their way around a page.

An outline made of headings

Think of a recipe book. The book has a title, each recipe has a name, and each recipe has smaller parts such as Ingredients and Method. HTML expresses the same outline with six heading elements, <h1> through <h6>. <h1> is the top level, usually the title of the page. <h2> marks the main sections, <h3> the parts inside a section, and so on. Most pages never need more than three or four levels.

<h1>Weekend Baking</h1>
<p>Three simple breads you can make at home.</p>

<h2>Soda bread</h2>
<h3>Ingredients</h3>
<p>Flour, baking soda, salt and buttermilk.</p>
<h3>Method</h3>
<p>Mix, shape into a round and bake for 40 minutes.</p>

<h2>Flatbread</h2>
<p>Ready in 20 minutes, no oven needed.</p>

Pick the level by structure, not by size

Browsers draw <h1> large and <h6> small, and it is tempting to choose a heading because of its size. Resist that. The level tells software how the page is organised. Screen readers can list every heading on a page and let the user jump straight to one, much like a table of contents. Search engines also use headings to understand what a page covers. If you want an h2 to look smaller, keep it an h2 and change its size with CSS.

Two habits keep the outline clean. First, use one <h1> per page for its main title; MDN recommends this, and it is what most users expect. Second, do not skip levels on the way down: after an h2 comes an h3, not an h5. Going back up is fine, so an h3 can be followed by a new h2 when the next section starts.

Paragraphs

Running text goes in <p> elements, one per paragraph. Because HTML collapses white space, pressing Enter twice in your file does not create a new paragraph on screen; only a new <p> does. Browsers add a gap above and below each paragraph by default, which CSS can change. A paragraph cannot contain another paragraph or a heading, so if you forget a closing </p>, the browser closes it for you as soon as the next block element starts.

Sometimes the line breaks themselves are part of the content, as in a postal address or a poem. For those, use <br> at the end of each line inside one paragraph or <address>. Do not use a pile of <br> elements to make vertical space; that is a job for CSS margins. To mark a change of topic inside a section, such as a scene change in a story, use <hr>, the thematic break, which browsers draw as a horizontal line.

Quotations

A longer quotation from another source goes in <blockquote>, which browsers indent. Put the quoted paragraphs inside it, and you can give the source address in its cite attribute. A short quotation inside a sentence uses <q>, and the browser adds quotation marks for you. The <cite> element marks the title of a work, such as a book or a film.