Mapping a web page

By  
Jonathan Holden
Accessibility
Content Design
Inclusive design

Maps show you where to go

When you are visiting a new place, it’s good to have a map. But even without a map, you’d probably be able to find the pub, the church, the village shop and railway station.

You instinctively know where things are, because of your experience of visiting new places.

That’s what we do with web page design. We have

  • header
  • footer
  • nav bar
  • main content

We don’t put them in strange places, to make it hard for people to find.

The most important signposts are the headings.

Headings

signpost showing the way to  the train station, pub and shop
© Alla Varta


Headings, like signposts, give you a sense of direction. Try reading all the headings on your page out of context. Do you understand what the page is about? Is this the page you are looking for?

Headings have 6 levels, from <h1> to <h6>. You only need one <h1> on a page. It tells you where you are.

In telling the story, the <h1> on the home page is “Once upon a time there was a….”

After that, Headings should be in sequence.

In our story of the village, the <h1> is the "Welcome to Cottington". Let's look at other possible headings for this story.

village map showing shop, church, pub and train station
© Alla Varta

<h1> Welcome to Cottington

<h2> Cottington station

<h3> Ticket office

<h3> Waiting room

<h3> Platforms

<h4> Platform 1 to London

<h4> Platform 2 to Bournemouth

<h2> The Red Lion pub

<h3> Bar

<h3> Saloon

<h3> Snug

<h2>Village store


Giving your webpage a clear headings hierarchy helps people to know if they are in the right place, and to get exactly the information they need, right when they need it.