Headings and the structure of a page

Module 3: The technical basics of a page · Reading time: 11 minutes

Learning objective: After this lesson you can build a page with a clear main heading and logical subheadings, explain what Google and screen readers do with headings, and write good alt text and file names for images.

Key concepts: heading (<h1> to <h6>), main heading, subheading, skipping a level, semantic HTML, screen reader, styled text that is not a heading, alt text, empty alt="" for decoration, file name, text in images

Headings are the table of contents of your page

Nobody enjoys reading a long text without subheadings. Online this is even more true: visitors scan a page first and only start reading once they see the answer is there. Headings help with that. But headings are more than big, bold letters. In HTML they are separate elements with a level:

<h1>Bruidsboeketten op maat</h1>
  <h2>Zo werken we</h2>
    <h3>De kennismaking</h3>
    <h3>Het proefboeket</h3>
  <h2>Voorbeelden</h2>
  <h2>Veelgestelde vragen</h2>

The <h1> is the main heading: what is this page about? The <h2>s are the chapters, the <h3>s the sections within them, and so on down to <h6>. (The example is a Dutch page about made-to-measure bridal bouquets.) The indentation above is only there to show the structure; in real HTML it makes no difference.

Two groups really read that structure:

People using a screen reader. A blind or partially sighted visitor often has the screen reader list all the headings first, then jumps to the part they are looking for. Without real headings the page is one long wall of text.
Search engines. Google uses headings to understand what the different parts of a page are about.

What Google says about headings

There are plenty of myths about headings. This is what Google itself says:

Google's SEO Starter Guide says the order of headings doesn't matter for Google Search, and that there is no magic number of headings a page should have. Headings in a logical order are very helpful for screen readers, though.
John Mueller of Google said in a video (2019) that Google's systems have no problem with multiple <h1> headings on a page. Google tries to work with the HTML as it is: one <h1>, several, or just styled text without real headings.
In its documentation on title links (lesson 3.1), Google does mention one situation that can go wrong: no clear main title. If there are several large, prominent headings at the top and it isn't clear which one is the main title, Google may struggle to choose a good title link. Google recommends making the main heading stand out clearly, for example as the first visible <h1>.

The conclusion of this course: one clear <h1> per page is a good habit, not because Google will otherwise penalise you, but because the page then tells everyone clearly what it is about. Readers, screen readers and Google can't miss it. That's why the check in exercise A3.2 shows green for exactly one non-empty <h1>, orange for more than one and red if there is none.

Common mistakes

Mistake	Why it's a problem
The logo or business name is the `<h1>` on every page	Every page then has the same main heading; the real page title is an `<h2>` or plain text
Headings chosen for their font size	An `<h4>` because it's "nice and small", or an `<h2>` for a slogan. Styling belongs in the design (CSS), the level in the HTML
Text that looks like a heading but isn't one	A bold, large piece of text in a `<div>` or `<p>`: a screen reader sees no heading
Skipping levels	An `<h4>` straight after an `<h2>`. Google doesn't mind, but the W3C accessibility guidelines advise against it because it's confusing
Empty headings	An `<h1></h1>` containing only an image without alt text. For a screen reader and for Google that heading is empty

Building a page that gives answers

A good order for almost any page:

A main heading (<h1>) that says what the visitor will find here. It's often similar to the title from lesson 3.1, but it doesn't have to be identical. The title appears in the search results, the main heading on the page itself.
A short introduction that gives the most important answer straight away.
Subheadings (<h2>) for each subtopic, written as something the reader is looking for: "What does a bridal bouquet cost?" says more than "Prices".
Where needed, an <h3> under an <h2>, never on its own.

Lesson 7.3 goes deeper into the writing itself. Here it's about the skeleton.

Images: alt text and file name

A search engine doesn't "see" a photo the way you do. Google uses computer vision, but gets a lot from the text around the image. Google itself names the most important source: the alt text.

<img src="/beelden/bruidsboeket-pioenrozen-wit.jpg"
     alt="Bruidsboeket met witte pioenrozen en eucalyptus">

The alt text (alternative text) has two jobs:

Accessibility: a screen reader reads it aloud to anyone who can't see the image. If the image fails to load, the browser shows the alt text instead of the photo.
Understanding: Google uses the alt text, together with computer vision, to understand what is in the image. This helps especially in Google Images.

How to write good alt text:

Describe what can be seen and why it's on this page, in one short sentence.
Only use keywords if they fit naturally. Google warns that alt text stuffed with keywords gives a poor experience and may be seen as spam.
An image that is purely decoration (a line, a background pattern) gets an empty alt: alt="". A screen reader then skips it. A missing alt attribute is something else: a screen reader may then read out the file name.
If the image contains important text (opening hours, a price, a flyer), put that text on the page as well. Text in a picture is hard for a screen reader and a search engine to read.

The file name helps a little too. Google recommends short, descriptive names and gives image1.jpg or pic.gif as examples of what to avoid. bruidsboeket-pioenrozen-wit.jpg (bridal bouquet, white peonies) tells more than IMG_4032.jpg.

Image speed and dimensions are covered in lesson 4.3.

In practice: headings in website builders

In the WebOké AI Builder the first heading on a page automatically becomes the <h1> and all following headings become <h2>. That way every page has exactly one main heading. You can add a description to every photo; that becomes the alt text. The SEO check warns you about photos without a description.
In WordPress you choose the level (H1 to H6) in the Heading block of the block editor. The theme usually already makes the page title itself the <h1>; in that case use H2 and lower in your text. You fill in the alt text for the image in the Media Library or in the block.

Other website builders work in a similar way. If in doubt, look at the source code (Ctrl+U) or search with Ctrl+F for <h1.

Summary

Headings (<h1> to <h6>) are the table of contents of your page, for readers, screen readers and search engines.
Google has no problem with multiple <h1>s or a different order, but does recommend a clear main title. One clear <h1> is a good habit.
Choose the level based on the structure, not on font size; preferably don't skip levels.
Good alt text briefly describes what can be seen; decoration gets alt=""; no keyword stuffing.
Important text belongs on the page, not only in an image.

Quiz

Exercise

Exercise A3.2: One main heading and a logical structure. Enter the address of a page on your own site. The program fetches the page, counts the <h1> headings and shows the heading structure as a table of contents. You'll see whether there is exactly one non-empty main heading, whether levels are skipped and how many images have no alt attribute. Before you start, fill in how many <h1>s you think there are. No site of your own? Use www.rijksoverheid.nl.

Cookies at WebOké

Cookie settings

Necessary

Marketing