Headings as an outline — Create Websites With Me

In the last lesson you gave your page a skeleton. This one is about the headings inside that skeleton, and it is shorter, because the idea is simple once you see it. Headings are not just large, bold text. They are the outline of your page, and software reads that outline to understand how your content is organised.

An outline you can hear

Imagine the table of contents of a book: a title, then chapters, then sections within each chapter. HTML headings work exactly that way. The levels run from <h1> down to <h6>, and together they describe a nested structure.

This matters because people who use a screen reader often navigate by heading. They can pull up a list of every heading on the page and jump straight to the part they want, the same way you would skim a page with your eyes. A clean heading outline is the difference between a page they can move through quickly and one they have to read top to bottom.

One h1 per page

The <h1> is the title of the whole page, and there should be just one. On your personal site, that is your name, since the page as a whole is about you.

<h1>Jordan Reese</h1>

Everything else is a level below that. A common mistake is reaching for a heading because of how big it looks, which leads to pages with three or four <h1> elements competing to be the title. Choose the level by where the content sits in the outline, and handle the size later with CSS.

Go in order, do not skip

Heading levels should step down one at a time. An <h1> can contain <h2> sections, and each <h2> can contain <h3> subsections, and so on. What you want to avoid is jumping a level, going straight from an <h2> to an <h4>, because that leaves a gap in the outline that makes the structure ambiguous to anyone reading it through software.

Here is the outline of your personal site so far. The page title is the <h1>, each section is an <h2>, and the small heading inside the about aside steps down to <h3> because it sits within that section.

<body>
<header>
  <a href="/">Jordan Reese</a>
</header>

<main>
  <h1>Jordan Reese</h1>

  <section id="work">
    <h2>Selected work</h2>
  </section>

  <section id="about">
    <h2>About</h2>
    <aside>
      <h3>Outside of work</h3>
    </aside>
  </section>

  <section id="contact">
    <h2>Contact</h2>
  </section>

</main>
</body>

Read just the headings in that example, top to bottom, and you get a clean outline: Jordan Reese, then Selected work, About, and Contact at the same level, with Outside of work nested one step under About. That is exactly the structure you want.

Naming a section by its heading

Back in the last lesson, each <section> had a heading but nothing formally connected the two. You can make that link explicit with aria-labelledby, which points a region at the id of its heading so the region takes its name from it.

<section id="work" aria-labelledby="work-heading">
  <h2 id="work-heading">Selected work</h2>
  <!-- ... -->
</section>

Now when someone using a screen reader lands on that section, it announces itself as “Selected work”. This is optional and you will not need it everywhere, but it is a tidy way to give your main sections clear names.

Where this leaves your site

Your personal site now has a real outline: one title, three sections at the same level, and a nested heading inside the about section. Someone could navigate the whole page by heading alone and understand how it is put together, before you have written a single line of CSS. In the next lesson we turn to the part of the page no visitor sees directly but everyone is affected by: the document head, and the titles and tags that decide how your site shows up in search and when it is shared.