Effective use of headings in web publishing

Making text look larger, and bolder, is not the same as making a heading.

ByBaylee Woodley
The Louvre in Paris at night. It is a rectangular stone building, and there are warm lights in the windows. A glass pyramid sits in front of it glowing with light and reflecting in the water of a large fountain.

Headings are like a table of contents in your pages and posts. They provide both visual and behind the scenes structure to your content. To provide this meaningful structure, though, your headings need to be properly employed.

Which headings when

Headings on the web are made by using HTML heading tags: h1, h2, h3, h4, etc.

Your post title in WordPress will automatically be Heading 1 (h1). This should be the only time h1 appears in your post. When you start to add subheadings you will want them to be Heading 2. From there, if you have sections nested within your h2 sections you will want to use H3 and so on.

Example of a heading structure

So, for example, a heading structure in a given post or page could look something like this (this happens to be the heading structure of this very article):

h1
– h2
– – h3
– h2
– h2
– h2

Visual display of headings

When displayed, headings recede in visual size and weight. This visual design employs the technique of hierarchical scale. In following the model that size indicates prominence or importance we are calling upon an ancient part of visual language.

It will be second nature for your viewers to intuit the meaning of your heading size because humans have been communicating this way for thousands of years.

Behind the scenes, markup matters

The hierarchy of headings is also embedded in the underlying code, or markup. It will automatically be structured using proper heading tags when you set your headings using HTML, or a visual editor in a CMS like WordPress. The key point here is that simply making some text large and bold does not make it a heading. Heading tags make text a heading.

Markup matters.1

Benefits of a good heading structure

Using headers, and using them properly, will improve the readability and scannability of your text, improve accessibility (screen readers and other devices distinguish headings from other text, if they are marked up properly), and make your copy more powerful. It will also improve your SEO. Readers like to scan, but so do search engines. Search engines will look at the text in your headings as part of the evaluation of your content.

Notes

  1. HTML is a Markup Language.