Headings Used for Size Rather Than Structure

What headings actually are

A description of how a document is organised, in levels.

The main heading says what the page is about. The next level marks its major sections. The level below marks subsections within those.

Browsers render each level at a default size, which is where the confusion begins, because a size is visible and a structure is not.

So people choose a heading level by looking at how large it renders, which produces a page that looks correct and describes itself incorrectly.

Why the structure matters

Because a substantial number of people navigate by it.

Screen readers can list every heading on a page and jump between them, which is how somebody skims when they cannot see the layout.

A page with correct headings can be skimmed in seconds. A page with none, or with headings in a nonsensical order, has to be read from the top.

Which is the difference between glancing at a page and committing to reading it, and sighted readers do the first constantly without ever noticing that they do.

Search engines also use the heading structure to understand what a page covers, which is a genuine secondary benefit rather than the reason for doing it.

The common failures

• No main heading at all on the page.
• Several main headings, because each section looked important.
• Levels skipped, jumping from the top level to the third.
• A heading used for styling, applied to a line that is not a heading.
• Bold text used as a heading, which looks the part and carries no structure.
• Headings inside the design, such as a slogan or a footer column title.

The fifth is the most common on sites built by hand, and the fourth on sites built with a visual editor.

A worked example

A service page whose heading list, read as a screen reader would present it, ran: the business name, a slogan, the page title, a testimonial, a section heading, and the footer column titles.

Somebody navigating by heading would have found the page's actual subject in third place, among items that were not headings of anything.

Restructuring took an hour: the page title became the single main heading, the sections became second-level headings, the slogan and testimonial became ordinary styled text, and the footer titles moved to a lower level.

Visually nothing changed, because the sizes were set separately.

The heading list became a summary of the page, which is what it is supposed to be, and the page became skimmable.

Separating size from level

The technical point that resolves the whole problem.

Heading levels and text sizes are independent. A third-level heading can be rendered large and a top-level one modestly, purely through styling.

Which means there is never a reason to choose a level for its appearance, because the appearance can be whatever the design requires.

Most site builders make this harder than it should be, offering heading choices that look like size options.

Where a builder offers separate controls for level and size, use them. Where it does not, choosing the correct level and adjusting the size in the theme is the right order.

How many main headings

One per page, in almost every case.

It should say what the page is about, and it is frequently the same as or close to the page title.

A common mistake is putting the business name or logo in the main heading on every page, which makes every page announce itself identically.

The logo belongs in the header as an image with alt text, not as the page's structural heading.

Modern specifications permit multiple top-level headings in certain structures, and for an ordinary business page the single-heading rule is simpler and produces better results.

The heading nobody sees

A useful technique for sections that need a heading structurally and not visually.

A navigation region, a sidebar, or a group of related links frequently needs a heading so somebody navigating by structure knows what it is.

Visually it is obvious from position and design, so a heading would look redundant.

The answer is a heading hidden visually but present in the code, which assistive technology announces and nobody else sees.

That is a legitimate technique rather than a trick, and it is distinct from hiding text for other reasons, which is not.

The counter-case

Where the rules are looser.

A long article with genuinely nested subsections may need four levels, which is fine as long as they descend in order.

A landing page with a single message may have very few headings, and forcing them in adds nothing.

And a homepage is frequently a set of parallel sections rather than a hierarchy, where several second-level headings under one main heading is the correct shape.

What is never acceptable is skipping levels entirely, or applying headings to text that is not introducing a section of the page.

Landmarks, which do the same job for regions

A related mechanism worth knowing about, since it works alongside headings.

A page can identify its regions: the header, the main content, the navigation, the footer.

Assistive technology uses those to jump directly to the content, skipping the navigation entirely, which is the same benefit a skip link provides and more reliable.

Modern page elements do this automatically when the correct ones are used, which is another reason to build a page from proper elements rather than from generic containers with styling.

A site built entirely from unlabelled containers has no landmarks, no structure, and nothing for anybody to navigate by, however good it looks.

Most current themes handle this correctly, and it is worth checking once rather than assuming.

Checking yours

Faster than it sounds, and there are two ways.

Browser developer tools include an accessibility view that lists the heading structure of a page.

Several free extensions display the outline directly, showing levels as an indented list.

Read that list on its own. It should read as a sensible table of contents for the page, and if it does not, the structure is wrong regardless of how the page looks.

That test takes about a minute per page and is genuinely the whole of what is needed here.

What to do

1. View the heading outline of your main pages.
2. Check there is exactly one main heading.
3. Check no levels are skipped.
4. Remove headings from anything that is not a section.
5. Convert bold pseudo-headings into real ones.
6. Adjust sizes in the styling, not by changing levels.

The sixth is the habit that prevents this recurring, and it is the one that needs saying out loud to whoever edits the site day to day.

The related question of link text is covered in telling Google your pages exist.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.