Headings and paragraphs

Headings give a page its outline, and paragraphs hold the text. Together they are most of what people read on the web, and getting them right is the single biggest step towards an accessible, well-structured page.

The six heading levels

HTML has six heading elements, from h1 (most important) to h6 (least important):

<h1>Baking bread at home</h1>
<h2>Ingredients</h2>
<h2>Method</h2>
<h3>Mixing the dough</h3>
<h3>Proving</h3>
<h2>Troubleshooting</h2>

The levels form an outline, like the contents page of a book:

Baking bread at home
  Ingredients
  Method
    Mixing the dough
    Proving
  Troubleshooting

Each heading introduces the content that follows it, up to the next heading of the same or a higher level.

Why heading levels matter

Headings are not just big bold text. They carry structure that other software uses:

• Screen reader users often jump from heading to heading to scan a page, the way sighted readers skim. Many screen readers can list all headings, or jump straight to the next h2. A clear outline makes a long page usable.
• Search engines use headings to understand the topics on a page and how they relate.
• Browser and editor tools, such as reader modes and document outlines, build navigation from them.
• Everyone benefits from scannable text. Most readers skim headings before deciding what to read.

Rules for a good outline

1. One h1 per page that describes the page's main topic. It usually matches or closely resembles the title.
2. Do not skip levels on the way down. After an h2, the next level is h3, not h4. Skipping makes listeners wonder whether they missed a section.
3. You may jump back up any number of levels. An h4 can be followed by an h2 when a new major section starts.
4. Headings describe what follows. "Ingredients" is useful; "Section 2" is not.

Choose headings for meaning, not size

The most common heading mistake is picking a level because of how it looks:

<!-- Wrong: h4 chosen because it is small -->
<h1>Our menu</h1>
<h4>Prices include VAT</h4>

<!-- Wrong: bold paragraph pretending to be a heading -->
<p><b>Breads</b></p>

The first example creates a confusing outline. The second looks like a heading to sighted users but is invisible to anyone navigating by headings.

The fix is to use the right element and control the look with CSS:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Our menu</title>
  <style>
    .small-print { font-size: 0.875rem; font-weight: normal; }
  </style>
</head>
<body>
  <h1>Our menu</h1>
  <p class="small-print">Prices include VAT.</p>
  <h2>Breads</h2>
  <p>White, wholemeal and rye, baked every morning.</p>
</body>
</html>

"Prices include VAT" is not a heading at all; it does not introduce a section. "Breads" is, so it becomes a real h2.

Paragraphs

The p element holds a paragraph of text:

<p>Our sourdough takes 36 hours from start to finish. Most of that time the dough is resting.</p>
<p>We use a starter that has been fed every day since the bakery opened.</p>

Browsers collapse whitespace in HTML. Extra spaces, tabs and line breaks in your source become a single space on the page:

<p>This     text
   appears on     one line.</p>

To start a new paragraph, close the p and open a new one. Do not use empty paragraphs or repeated br elements to add space; use CSS margin instead.

Line breaks and thematic breaks

br inserts a line break inside a block of text. Use it only where the line break is part of the content, such as an address or a poem:

<p>
  Riverside Bakery<br>
  12 Mill Lane<br>
  Bristol BS1 4AB
</p>

hr marks a thematic break: a change of topic between paragraphs, such as a scene change in a story. It draws a line by default, but its purpose is meaning, not decoration. For a decorative line, use a CSS border.

Preformatted text

pre keeps whitespace exactly as written. It is useful for code, ASCII diagrams and text where spacing matters:

<pre>
Name      Qty
Baguette    2
Croissant   6
</pre>

Lesson 7 shows how to combine pre with code for code samples.

Check your outline

To see a page's heading structure, use the Accessibility panel or tree in your browser's DevTools, or a browser extension that lists headings. Read the list on its own: it should make sense as a contents page.

Summary

• h1 to h6 create an outline. Use one h1 per page, describe what follows, and do not skip levels going down.
• Pick heading levels for structure, then style them with CSS.
• Wrap text in p. Browsers collapse whitespace, so use CSS for spacing.
• Use br only for meaningful line breaks and hr for a change of topic.
• pre preserves whitespace for code and aligned text.