Heading Hierarchy
Web Page Mistakes

Heading hierarchy on a web page is little hard for some to understand. In this article, we’ll try to clear up the confusion by comparing heading hierarchy in a web document with how you use headings in a printed document.

In web page coding there are heading tags H1 through H6 available to format the headings in the web page. H1 is the largest, H6 is the smallest. Just like an article printed on a piece of paper, the default size of the heading represents the importance of the heading. These sets of HTML tags are meant to define headings in the page, not to format just any text on the page.

Let’s take a different approach to understanding the heading hierarchy in a web page. People usually use a book as an example, but we’ll use a one or two page document you are writing for, say, a school assignment or a report at work.

Web Heading Hierarchy vs Print Heading Hierarchy

If you open up Word and start a new document you will see that the default blank document has some formatting already in place. Click the arrow beside where it says Normal in the toolbar and you will see some heading formatting already set up. Notice how the font size gets smaller as you move from heading 1 to heading 2 to heading 3. This creates a heading hierarchy within the Word document. The heading tags on a web page also decend in size by default, H1 is the largest, H6 is the smallest.

Heading 1

Because we are writing an article, the title of the article would use heading 1.

Heading 2

Each main section of the article would use heading 2.

Heading 3

Now if you had sub sections within the main sections the first one would be heading 3.

Heading 4, 5 and 6

If your sub section required further headings, then the first one after heading 3 would be heading 4. The next heading within this sub section would be heading 5. The next would be heading 6.

Headings in Descending Order of Importance

When you write an article to be printed on paper, the reader expects some kind of organization (hierarchy) of headings to break up the article and show how the headings relate to one another.

If all the headings look the same by giving them the same heading formatting, wouldn’t you find it confusing where one section of discussion ends and another starts and how each section relates to another?

It would be much easier to read an article that has definite heading differences showing how they relate to the heading above.

Courses which teach you how to study better tell you to look at the headings in the table of contents and within each chapter of your textbook to get a feel for what each chapter is about.

It is ok to mix up heading levels, as long as they show the hierarchy of the document. One main section may just have heading 2, the next main section might need heading 2, 3 and 4 to clarify the subsections. That’s ok.

What makes it difficult to read something is when you go from heading 2 and it’s subsection uses heading 4. The reader will wonder what happened to heading 3.

If you were to take out all the words and just leave the headings, does the resulting table of contents type layout make sense? This is the goal of using heading hierarchy properly. When you take the words away, can the reader get a sense of what is covered.

Heading Hierarchy on the Web

Heading hierarchy works the same way on the web as it does in print. Web users are generally in a hurry so they look for headings to see if they want to stop and take the time to read the whole web page. Web users also skim in search of what they specifically are looking for. Having a heading hierarchy will help them find what it is they are looking for.

The heading tags available in HTML should not be used as a means to format something that is not a heading. This messes up the heading hierarchy for the search engines and those who use technology to read web pages to them.

The default format of heading tags might not match the style of your web page. This can be altered by using the heading selector in your stylesheet and setting the formatting to match the look of your web page. Using a class (e.g. .heading1) in the stylesheet does not set the heading hierarchy correctly. You need to format the actual heading selector (h1 for example) in the stylesheet to retain the web page heading hierarchy.

Proper Heading Hierarchy

Using the proper heading heirarchy on your web pages adds to the legibility of the web page, improves your search engine optimization and adds to the accessibility of the page.

According to a survey by WebAIM of over 1100 screen reader users, 52% navigate by using the headings.

From the WebAIM survey:

The responses to this question provided one of the greatest surprises to us. It is clear that providing a heading structure is important to screen reader users with 76% always or often navigating by headings when they are available. Use of heading navigation increased with screen reader proficiency with them being used always or often by 90.7% of expert users, 79.3% of advanced users, 69.9% of intermediate users, and 55.4% of beginners.

From SEO by the Sea:

When you use a heading element, whether <h1>, or <h2>, or so on down the line, you aren’t just impacting the look and feel of the text within that element, but you are also defining a semantic relationship between those words and the words that follow them. You’re telling visitors, and search engines that the utterings on the page that follow are related to the terms in your heading in a meaningful way, even if you don’t quite understand that, and don’t quite do that right. And many people don’t.

When you use a top level heading, or an <h1>, you’re setting up a semantic relationship between that heading and the remainder of the content on a page, describing what it is about. If you then use a second <h1> on the same page, you’re creating some potential confusion, because someone, or a search engine might see that as the ending of the semantic relationship between the content after the first <h1> and the start of this new <h1>. If instead you use a second level heading element, or an <h2>, you’re continuing the semantic relationship between the top level heading above with that content, but defining an included semantic relationship with the content headed by the second level heading.

Heading Elements and the Folly of SEO Expert Ranking Lists

Further Reading on Heading Heirarchy

Video: Importance of HTML Headings for Accessibility – from a blind person’s point of view.

Heading Structure – Heading Tag

Copyright © 2005 - 2024 Web Page Mistakes. All rights reserved.

What's next?

Follow our new articles via RSS, follow us on Twitter and submit to your favourite social networking site:

This entry was last modified January 6, 2013 at 12:22 pm and is filed under Legibility . You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.