Headings—the simplest HTML element to learn. If you work in WYSIWYGs, you use them. If you work in code, you use them. If you design websites, you use them. Headings, big whoop! Well I’m here to tell you, chances are you may be using them all wrong!
The wrong way to use headings
HTML Headings play an important role in adding structure to the content on your site. Visually, well designed heading styles help users make sense of information and its relative importance on the page. But to the machines that must search, index, reference, or parse your page, it’s the HTML that matters most. When search engines like Google crawl your site, or when screen readers translate your content, they don’t see typefaces, font-weights, and colors—they see your underlying document structure.
Content authors: Stop using Headings as a stylistic formatting tool.
It’s tempting for content authors to look at heading styles as being their visual text formatting toolbox. Much like one might art direct a flyer or postcard, the author mixes and matches headings in an attempt to create aesthetic balance, or to emphasize (or de-emphasize) information accordingly.
The consequence of this is that it totally screws with the underlying structure of the information on the page. When we talk about document structure, what we are really talking about is the outline that’s formed. That’s right, an actual outline outline, like you may have had to use to organize your ideas in writing class. The outline indicates relationships between one topic (and its sub-topics) and another.
Designers: Stop establishing Headings as stylistic formatting tools.
It’s easy to point the finger at content authors and accuse them of using headings in ways that don’t conform to the intended typographic standards. Yet it’s the site designers who are responsible for setting the stage for this, and they are most likely among the biggest offenders!
Let me explain: headings on a website are usually based on a typographic scale. The typographic scale defines the different font sizes and line heights used on a site. Common practice is to set a base font size, and then scale up in measured increments, until reaching the upper limit—a.k.a the biggest font in play.
Because headings are often thought of as the primary tool for assigning visual priority to text (rather than forming the document outline), it’s natural to map your Headings to the typographic scale.
(h1) is the biggest and boldest, (h2) the second in command, and so on. Sounds absolutely great in theory—unfortunately, it’s rarely indicative of the natural way we want to use styles.
Examples like this demonstrate how, rather than establishing underlying order and structured relationships to elements on a page, headings are often misused as a purely visual design element. There’s got to be a better way to do both!
A better way to use headings
Visually, our goal with headings is to establish typographic hierarchy. Behind the scenes, in HTML, our goal with headings is to establish information hierarchy. The good news is the two objectives work delightfully hand in hand. It just requires a small shift in how we approach our Headings.
Use Headings to establish your document outline.
First and foremost, it’s important to assign headings based on the intended document model. If you want to your content to be accessible, understandable, and able to be ported to the unknowable army of information-consuming systems and devices out there, this is a must.
Styles come and styles go, but content structure is a constant.
Content structure is not dependent on context.
The challenge is to divorce ourselves from the idea that content structure and page structure are one and the same. How we arrange elements on a screen is a matter of design—a matter of page composition. A page may be based around a single piece of main content with it’s own outline and it’s own hierarchy. Many pages have both a main piece of content as well as references to other unique pieces of content, each with their own independent information outlines. And still other pages have no main content, but are instead just aggregate content listings—for example, a blog landing page that lists recent blog entries.
The key is recognizing that a single page may include content (or references to content) from more than one source. Each unique piece of content will have it’s own unique structure and outline. The content structure, not the page layout should determine the proper heading.
To take this a step further: if the title of a piece of content represents the top of the content outline, then it should be marked up in HTML using an H1—regardless of where that content block is displayed: center column, sidebar, or other. If there are multiple blocks of content on your page, this may mean using multiple H1s. That’s right:
Using multiple H1s can actually be a great idea.
Contrary to popular belief, using multiple H1s on a page is not detrimental to SEO. So long as you are using headings properly, to reflect the content outline, it will improve your overall document structure.
Style is not dependent on content structure.
Multiple H1s you say?! That would look totally ridiculous! Indeed it would, assuming every instance of an H1 on a site uses the biggest and boldest font in your typographic arsenal. But there’s no reason why style must be dependent on content structure. It’s totally acceptable to allow an object’s context to dictate its typographic style.
A top level heading (h1) for a related article in the sidebar need not display the same as a top level heading for the featured piece of content on a page. And that top level heading need not use the same visual style as the top level heading used in a hero or section banner.
HTML elements are meant to add structure. CSS is meant to dictate style.
Create formatting styles that are not bound to elements.
So, what does this mean for how we format text? We still want to impose typographic order on our websites, so working off a typographic scale still makes sense. However, consider the following:
- When defining your heading styles, you might may want to take some liberties with the order in which you assign size and weight. It’s okay for an h2 to be smaller than a h3 for example, so long as it does the appropriate job of both: indicating the proper content structure, creating the proper visual effect.
- You can create CSS classes in order to apply visual emphasis to text without unduly disrupting the natural content outline by using headings. For example, there is no “subtitle” HTML element. But if you wanted a tagline after a page title, an H2 would be an inappropriate element to use. In this instance, it would be better to apply a CSS class of subtitle and let that dictate formatting.
Messy Business
If you’ve been using headings primarily as formatting tool, hopefully this will shed some light on why that might not be the best approach. But shifting your approach and using headings to properly define your content outline can also be a bit messy. It may mean redefining your CSS rules, and certainly seems a bit counter-intuitive at first.
In the end, the goals are simple though: make your content easy for humans to read. Make your content easy for machines to read. Instill structure so as to be future friendly.
