Get started with Structured Headings

What do we mean by structured headings? Well we tend to write in blocks of paragraphs made up of sentences, phrases and words. These blocks can be grouped by headings or sometimes referred as titles or sub-titles.

These headings can be further grouped into their level of importance and relevance to each other. Many people show this by using larger bolder text for headings with greater importance.

How do structured headings impact accessibility?

So why do structured headings effect web accessibility? Well this is because how people make sense of your content. People will want to skim through your content to find what is relevant and interesting to them.

Yes, so this is nothing new and you’ve been using headings in your content since high school. But what about using headings on a web page?

Semantic Headings

When using headings on a web page, it is important to use the correct HTML mark-up. This is the code behind your web page and is what can tell browsers and assistive technology what is being looked at.

It is not what determines the visual style of your content. This you can do separately through something called style sheets.

The HTML code or sometimes known as tags, are placed inside angled brackets. There are both a start tag and stop tag. Otherwise known as opening tag and closing tag. For example a paragraph can be shown as <p>This is a short paragraph.</p>.

Note the closing tag is the same as the opening tag except for the forward slash "/" just after the opening angle bracket.

In HTML there are six different heading levels from 1 to 6 and are wrote as <h1>, <h2>, <h3> and so on.

How to Structure Headings

In HTML4 standards, it treats all content on a single web page as one document. Therefore, you should only have one <h1> top level heading that proceeds any other heading. All other heading levels must be ordered in a hierarchy fassion. This meaning that you may not place a <h3> before you have placed a <h2>.

With HTML5, the standards have changed and a web page can be grouped into separate content areas. Each area being treated as a separate document in its own right. This allows multiple <h1> headings being used on a single web page. Although the same hierarchy structure of only one <h1> heading should be used within any single section of the web page. This I will cover in more detail in a later post.

Below I give examples of both good and bad structured headings using the HTML4 standards.

Bad Heading Structures

 <h2>Search Options</h2>
<h1>Main Heading</h1>
  <h3>Latest News</h3>
  <h3>News Item 1</h3>
   <h4>News Item 2</h4>
    <h5>News Item 3</h5>
     <h6>Copyright</h6>

Lest go through the above structure and see why it is wrong.

The first mistake, is the first heading is not a <h1>, so the <h1>Main Heading</h1> needs to be placed before the <h2>Search Options</h2>.

The second mistake is there is a <h3> following the <h1> without having a <h2> before it. To fix this we just change it to a <h2>.

The third mistake, is that the three news item headings directly relate to the Latest News heading but its not reflected in the structure. To address this, we change all three News Item headings to be one heading level below the Latest News heading. So as we previously changed this to a <h2> the three news item headings need to be set as <h3>.

The last mistake is the copyright heading is set to a <h6> which does not fit into the document structure. So to fix this, we look at what this content relates to. Which is the Main Heading, so we need to change it to a <h2>.

See the revised heading structure below for how it should be structured.

Good Heading Structures

<h1>Main Heading</h1>
 <h2>Search Options</h2>
 <h2>Latest News</h2>
  <h3>News Item 1</h3>
  <h3>News Item 2</h3>
  <h3>News Item 3</h3>
 <h2>Copyright</h2>

How do people benefit from structured headings?

Well everyone benefits as it helps search engines categorise your web page content. This helping people find and read your web page.

People with limited sight benefit, as they can use screen reader or screen magnification software to read your headings and help them find the content quickly.

People who use specialist input devices such as voice activation or eye tracking or Braille keyboards can also quickly move between your headings.

Plus people who are using touch screens, mobiles or specialised web enabled devices like a Braille Note Taker can also quickly skip between your headings.

Have your say

Let us know your thoughts about using structured headings. Do you make use of them yourself?