Headings and Paragraphs

Headings describe the structure of a page. HTML provides six levels, from h1 through h6. Use them to create a hierarchy that reflects the content, not to choose a font size.

<main>
  <h1>Planning a first website</h1>
  <p>A small plan makes the first build easier to finish.</p>
  <h2>Choose the content</h2>
  <p>Write down the pages visitors need before building the navigation.</p>
  <h2>Sketch the page structure</h2>
  <p>Decide which information belongs together.</p>
</main>

A page will often have one main h1, followed by headings that divide major sections. A section within a section may use the next level. Do not jump from h2 to h5 just because the browser’s default h5 looks smaller. CSS controls presentation.

Paragraphs represent paragraphs. Do not use repeated br elements to create vertical gaps between blocks of text. Separate ideas into separate p elements and control spacing with CSS.

Do not rely on an automatic outline algorithm to repair heading choices. Authors are responsible for choosing a meaningful hierarchy. Read the page’s headings from top to bottom; they should form a useful table of contents.