Practical Guide For Web Developers On How To Use Headings

If you think that headings are only for embellishment, you’re… heading for a fall. Heading tags, above all, give structure to a web page, their role being visual and technical at the same time. Simply put, they allow human users to see the content structure and machines to understand it.

Aside from providing visual consistency, they also enhance accessibility and usability and, just as important, keep the search engines’ crawlers happy – but ONLY if you use them properly.

Among web developers, confusions on this chapter are common and that’s why we’ve put together a short and practical guide on how to use headings. Read on and the next time you’ll feel the impulse to ask “What heading should I use here”, perhaps the answer will come to you just as natural.

Headings structure

General guidelines for headings

First of all, there are 6 types of headings, from <h1> to <h6>. Since they are particularly designed to convey a logical hierarchy, <h1> should always be used at the top of a sequence and <h6> at the bottom.

An example of structure would be:

General structure of headings

By looking into this example, you could grasp a few more or less obvious general rules. So here’s what you should consider:

1. Use only one <h1> on every page

This heading should define the topic of the page, the most important subject, which is why you really need to use a <h1> tag with every page of your website. On the homepage, however, if you really don’t have an obvious <h1> as a text, be sure you use it on the logo.

2. Always begin with a <h1>

After you’ve used this one, continue with all the others, but without skipping any level. You shouldn’t be using a <h3> without using at least one <h2> before it.

3. Use as many <h2> and <h3> as you need

The entire structure must be logical and coherent, so use these headings because you really need, not because they look good or help you style the text.

Headings appearance on pages

4. Think twice if you need the <h4> – <h6> tags

The more different headings you use, the more information you have on that page. So why not create another page, turning these headings into <h2> and <h3>, and making the text easier to digest? At times, a <h4> could be used for less important information, adding extra layers to a current structure, like with a sidebar, for instance.

5. Keep them short, unique, descriptive and on topic

In a nutshell, every heading should summarize what’s coming next, so:

• Add keywords in their structure, but without overusing them;
• Avoid repetitive constructions, sparing readers to go through the same words before getting to the point – no “Headings essentials – what are they”, “Headings essentials – classification”, “Headings essentials – best & worst practices” kind-of-headings.
• Be as specific as you can – instead of “How we work” use “How we do software development” or anything else that is representative for that sequence.

Headings worst practices

Overusing keywords, formulating repetitive constructions and placing headings that go lower into a page’s structure than a <h4> would risk upsetting your readers.

But when you make search engines’ crawlers misinterpret your page or suspect it of wrongful practices you risk a lot more. That’s why you should NOT:

• Use headings to style certain elements of a page, such as a phone number when wanting to make it more visible;
• Use headings to style an entire paragraph, to emphasize the text, like on a landing page or sales page;
• Use plain images instead of headlines to delimit blocks of text;

All these arguable practices stem from a natural desire to make a web page look more beautiful and bring certain messages upfront. Here’s how you can avoid these perils while getting what you want, as in:

The proper use of headings into a page structure

Using the right headings and still be happy with their appearance

You can have different headings that look the same if you:

1. Create different classes and combine them with the preferred headings

That way, you could have different text sequences that all look like a <h1>, for instance, but only one of them is actually a <h1> in the code structure. The others can be a <h2> stylized as a <h1> through that newly created class.

2. Play with your favorite heading features but in the CSS

This will allow you to style the text and the font of your headlines, modifying size, color, space, alignment and so on.

3. Use images as frontage for headings, with invisible texts behind them

If you want to make users happier with diverse, out-of-the-box headings that will catch their eye, you will also have to feed the crawls with some invisible text.

Crawls don’t really appreciate it since many people use invisible text and links to fill a page with keywords. So if you’re using this strategy too much, you risk being penalized, which is why you’ll have to proceed with caution!

The proper use of images as frontage for headings

Take away advice

Using heading tags instead of DIVs and styling is generally simpler because:

• Search engines like them better;
• It spares you from having to remember the classes you used for defining your headlines;
• It gives a stronger page outline;
• The page will keep its structure even if the styles are turned off.

However, there will be many times when you will still want to turn those big, bold ugly headings that all look the same, into stylish texts.
Go ahead; make that page look exactly how you want. But whatever you do, don’t forget that the code should still have the right headings, in the right order, as a backbone of your entire page structure!