Web page headings

Web page headings and sub-headings

Heading tags provide structure

Heading tags are concerned with the structure of a web page and are a prominent part of the page your visitor sees, unlike title tags.

By using the correct heading tags, search engines, screen readers, mobile phones and other PDAs, can interpret the structure of the page correctly.

• They help readers quickly skim down the page looking for sections that are relevant to their search
• They help search engines index the page accurately
• They help users with screen readers work out what the page is about
• They provide structure for the page

If it isn't clear what the page is about, either because there aren't heading, or there are "clever" page headings, visitors may well go elsewhere.

Types of heading tags

The purpose of heading tags is to provide the structure for the web page.

<h1> is the primary heading on a page and indicates the main topic for that page. It should clearly show anyone what the page is about so they can decide to carry on looking at the page, or move on to another page, possibly on another website.

As with other types of media, there is usually only one main heading on the page. Use your keywords for the page within the h1 tag.

For example the <h1> heading on this page is "Web page headings"

<h2> are the secondary headings on a page

<h3> are the sub-headings on a page

For example:

• <h1> Primary page heading
  • <h2> Secondary heading 1
    • <h3> Sub heading 1
    • <h3> Sub heading 2
  • <h2> Secondary heading 2
    • <h3> Sub heading 1
  • <h2> Secondary heading 3
    • <h3> Sub heading 3

You can also use h4, h5 and h6 tags, but if you need these, you may be better deciding to split the contents of the page into 2 or more pages, each with a different focus.

If you don't have access to the code for your pages, decide what headings you want to use and ask your website developer to add them for you.

Search engines and heading tags

Heading tags also help search engines categorise each page more effectively and therefore help towards your search results. Search engines aim to provide people with the most relevant pages for their search query, so they also use the heading tags to determine what the page is about.

If you're trying to optimise a web page for specific keywords, this is where that phrase should appear, particularly in the <h1> tag or main heading. This tells the search engine that these words are important - that this is what this page is about.

Headings used when skim reading

Try and make your pages easy to skim read. This is how most of us initially "read" a webpage - looking for headings and sub-headings, highlighted text, bullet points etc etc. Only if it looks like it might provide us with the information we are seeking, do we actually read the page.

So making sure your text "looks good" is very important - and headings and heading tags are part of that process.

Headings used by screen readers

After reading the page title a screen reader will often list the headings within the page to help the user find what they are looking for. If the headings only "look" like headings and haven't been coded with heading tags, this can't be done. It can also be extremely confusing if heading tags have been used inappropriately (e.g. simply for the purpose of the look of a part of the page).

Structure of heading tags

Headings need to be given the correct tags: it is not adequate to simple make headings "look" like headings.

They are added like this in the HTLM coding:

• <h1>Heading tag</h1>
  • <h2>Secondary heading tag</h2>
    • <h3>Sub-secondary-heading tag</h3>

....and styled in the CSS file.

If you don't have access to the code for your pages, decide what headings you want to use and ask you website developer to add them for you.

Note: The words "If you don't have access" in the paragraph above look very similar in style to the heading for the next section "Images used for headings". The latter is structurally a heading, the other isn't.

Images used for headings

Search engines and screen readers cannot "read" images. Nor can those whose eyesight isn't what it once was!

Images containing headings (or any other text) are simply not accessible - so search engine robots cannot work out the structure of the page and your page will loose some of its relevance to any search request.

Heading tags summary

• always use the correct heading tags - h1, h2 and h3
• use headings to structure the page
• h1 heading tag should match or include keywords from your title tag
• only use one h1 heading tag per page
• keep them short - make every word count
• make them understandable out of context - headings often appear in search engine results without the following paragraphs
• don't use the heading tags for other purposes just because you want the same "look" or think you can fool the search engines!

And even if you don't code your pages yourself, write your page content with the headings clearly marked for your website designer to add for you.

back to the top

If you have more questions or you need more help or advice, please contact us and we will endeavour to help you ~ without any obligation.