Headings in the right way

Every book begins with a title. The main title. Have you ever seen a book with many titles? Usually you could find different titles for different sections, and for different chapters, and... you got it, right?

Headings outline your content basic structure. They have a simple but precise hierarchy and this should be respected when coding. This is important for those who use screen readers, for search engines and for all the devices that aim at understanding your document structure.

There are 6 heading levels: <h1>, <h2>, <h3>, <h4>, <h5>and <h6>.

It's easy to use headings correctly, just keep in mind the following simple guidelines:

• use only one h1 level header;

• main page content should begin with h1

• use the correct level heading without skipping levels: do not use h3 if on your page you haven't any h2;

• it's not mandatory to start with an h1: if you have your main menu before your main title, for example, you can have a structure like <h2>main menu</h2><h1>Main page title</h1><h2>Page secondary title</h2> and so on...;

• keep consistent heading levels for elements repeated on multiple pages;

• Make titles descriptive, short and meaningful of the content that follows: many people use them to get a glimpse of the content;

REALLY important note: don't use an heading level just because it “looks the perfect font size” and don't style normal text as headings to act like them.

Aria role="heading"

It's possible to define whatever element as a heading (and relative level) with the following attributes:

<div role=”heading” heading-level=”2”>I'm a div but also an heading!</div>

Honestly, I still have to find a reason to use it that is not a workaround of some sort... try to avoid that.

Heading groups

A heading group is that “title + subtitle” set. Screen readers don't support <hgroup> tags, and consequently, instead of providing a more semantic title, using that tag you end with a less semantic one. If you really need it, try adding aria attributes to maximize compatibility.

<hgroup role="group" aria-roledescription="Heading group">
    <h1>Your heading</h1>
    <p aria-roledescription="subtitle">Your subtitle or sub-heading</p>
</hgroup>

Accessibility

If you take a look at the WebAIM: Screen Reader User Survey #9 Results, 67.7% of those interviewed use headings to find information. So, don't underestimate their importance, derived from their correct usage!

Headings in components

I know, there are already a lot of things to take into consideration when coding reusable components, and heading levels should be one of them. If the component could be used in different sections with, possibly, different heading levels, consider using a default value but letting the developer (or content manager) have the possibility to change its level at will. C'mon, it's not that hard!

The site logo should not be wrapped in <h1>

A common pattern is to wrap the page logo inside the page <h1>. Is it a good idea? As often happens when dealing with accessibility and semantics, there isn't a streight and easy answer.

Many points tend towards the NO:

• search engines already know that the page they're crawling is in your company domain;

• since <h1> conveys the document's main topic, do you think that repeating your company name over and over adds some sort of value to the content?

• Your logo is not relevant information about the document content;

• in Google Webmasters Guidelines it's stated that you should “avoid embedding important text in images for elements like page headings and menu items … To ensure maximum accessibility of your important text-based content, keep it in regular HTML”. This refers to "alt" text...;

• If a crawler cannot elaborate images, you'll end up losing your “alt” text.

It makes perfect sense if you think about "Tables of Contents" in books. Usually, they don't contain the book title, since you already know the book title you're reading. Furthermore, it seems that "alt" text in an image has lesser SEO weight than pure text.

The only reason I can see, at this point, to use the company name as <h1> is to “somewhat forcing” search engines to give more importance to your business name when people search for it and it doesn't appear at the top of results.

In the end, what should I do with my <h1>?

This, all considered, is my take after all these considerations:

• don't wrap your company logo in <h1>, but use it as a link to return to the homepage (common pattern);

• use your best shot (remember, only one <h1>) for the page's main topic, not for your company logo.

Final considerations

Whoa, a long talk for such a small change! You're right but remember: a well-thought evaluation lets you apply your final decision coherently and consistently.