Understanding headings on the web

Understanding headings on the web - a little bit of HTML

In the lesson Do not waste people's time we saw the importance of the hierarchy of headings. Here we're going to look more at the technical requirements of getting the headings right.

We saw a little bit of HTML (Hyper Text Markup Language) in the last lesson: <title>

You don't need to learn how to write in HTML, but a little understanding of how the language works will help you write better pages for the Local Offer.

Headings are a very important part of a webpage. They tell you what's important and in what order.

In HTML there are 6 levels of <heading> from <h1> to <h6>. Most of this will be controlled by your system, but it's useful to know a little about how things work.

Example

<h1> Early years special needs settings

<h2> Special early years provision

<h2> Specialist nursery provision

<h3> Rainbow nursery
<h3> Little Acorns nursery

<h2> Applying to specialist nursery provision

<h2> Appealing a decision by the local authority

<h1> is the main heading of the page. There should only ever be one <h1> on a page.

Size and font of the headings on the page can show the importance of the content to users. Here the <h3> is smaller than the <h1> and it is indented to show that it belongs to the <h2> above it. Scanning the page, it is easy to know what it is about.

If you Local Offer does not display this clear hierarchy, please talk to your CMS provider. Ask them to look again at the design of the headings.

For people with visual impairments, screen readers users can use the H key command to listen to all the headings as a list. This way they can check what the whole page is about.

As they go through a full page, the screen reader will announce "Heading Level 1" before reading the heading.

Note I have never seen a webpage that uses all 6 levels of headings <h1> to <h6>. Imagine how much information would be on that page! Remember, each page should be about one thing.

Just to recap

• Only one <h1> on each page
• Keep the other headings in a logical order
• Make sure headings are visually different too, usually by size, maybe by font

 📝  Do you get any snippets on Google when people search for information that's on your Local Offer? Share the search terms in the discussion for people to see.