The importance of headings

As we launch more and more sites, we've noticed that people are struggling with the use of headings. We know this is a foreign concept to many of the new ambassadors, but it is extremely important. So, we thought we'd share a bit of info here to explain how and why they are used.

So, what's a heading?

Headings are used to hierarchically organize the design and the content of a Web page. Heading structure is important not only to present a clear structure on your page, but also in consideration of those using text readers and the search engines. 

There are six heading tags available: h1, h2, h3, h4, h5, and h6. These tags determine the importance of information and are used to change the style so that it stands out more.

Your title is immediately set as h1, the king of all headings. If heading tags were members of the Starfleet Command, h1 would be Captain Kirk or Jean Luke Picard. The h1 tag is in charge. It helps pull your page into search results and sets the tone for the rest of the information.

It's important to use a heading tag and not just bold your text. Though bold text may stand out, it doesn't allow for screen readers to pick up the information, and doesn't elevate the content in searches. You may have noticed that Amy and I changed your bold text to headings in some instances. I promise that we're not trying to be Big Brother—we're just ensuring that your pages meet Web accessibility standards.

So, how do I use them?

Headings work the same way on the Web as they do in print. People visiting your site are typically in a hurry and, because it's the Web, will have a short attention span. They will scan the page by headings to see if they want to stop and take the time to read the whole page. The heading hierarchy helps them find what they are looking for—quickly.

The first heading you use should be an h2 since h1 is already spoken for by your page title. Move on to h3, h4, etc. if your content requires that much formating. Heading levels must not be skipped. For example, do not jump directly from h1 to h3. This ensures that they are properly nested.

Only use heading tags for format text that is a heading. They aren't meant to style fonts and phrases. This messes up the heading hierarchy for the search engines and those who use technology to read Web pages to them.

Once you start using heading tags properly, your site's searchability will be improved and it will be more accessible to users with disabilities.

Want to see how important your headings are in action? Here's a screen reader in action. http://www.youtube.com/watch?v=mqVMM5_GB6E