31.Oct.2018

Eric Castillo

How to Use Headings Effectively on the Web

How to Use Headings Effectively on the Web

See the big text above this paragraph? That’s a perfect example of a heading—a bit of text that precedes a section of content. You’ve probably seen them in books, newspapers, and magazines. They’re also a big part of writing for the web. If you’re not using headings properly, you’re missing out on having more readable and accessible content that’s ranked high by search engines. It’s easy to misuse headings, because there are more to them than meet the eye. Let’s start with—wait, I don’t have to tell you. Just read the next heading.

What Headings Really Are

On the web, headings are more than just text. In case you’re not familiar with how the Internet works, websites are first read by machines (like your computer) before they can be read by you. When your browser sees headings it can “understand” the structure of your content. It may not register that the article is about the Top 10 Cutest Kittens of All Time, but it knows how it is organized, and that’s important in today’s world where digital content has to adapt across so many devices.

In HTML, the language behind the web pages, there are six levels of headings, named H1 through H6. Their usages are like the outlines your teacher would make you do before writing a paper in grade school. Each indent is represented by a heading level. Take a look at this example of an article about caring for cats.

A guide that displays different sizes of headings

Each bullet in the outline on the left translates to a heading in a traditional article layout on the right.

The Impact of Headings

Readability

Take a look at the image below. Which article would you rather read?

Two side-by-side examples. The first example has no headings and the second example has headings.

Headings help guide you through the content. They give context to paragraphs. They stand out from the copy blocks and allow you to quickly scan them to get a good sense of what those paragraphs are about. While the same heading will look different between two websites, the H1 will usually be the largest and each subsequent level gets a bit smaller. This establishes a visual hierarchy that readers implicitly understand.

Accessibility

While most users may only care what a web page looks like in a browser, some users with disabilities rely on well-formatted HTML to read and navigate the web. A web page in its most basic form is just a bunch of text within HTML code, which structures the text. Screen-readers, a common tool for people with visual impairments, read the page according to the raw text, which is the same thing your browser reads before turning it into a beautiful webpage for you to view. Screen-readers let users read the headings of your page and even navigate to different headings quickly. Without utilizing HTML headings, a screen-reader user will be forced to read a page word-by-word until they get to the info they need, rather than being able to jump right to the appropriate section.

SEO

Putting keywords into your headings can help boost your SEO. Since the words in headings are inherently important by the mere fact that they were chosen to be in a heading, search engines weigh those words more than content within paragraphs. The weights vary between headings, with H1 being the greatest and H6 being the lowest.

The Rules for Headings

To get the most out of headings, follow these basic rules:

Always Start with H1

The most important heading is H1, and no web page should be without it. Typically, it is used as the page title. While it isn’t a requirement, you shouldn’t use multiple H1s in a single page. The H1 is the highest level and should encompass the entire body of content.

Never Skip Headings

After the H1 should come an H2. If you skip a heading level, like going from H1 to H3, for example, you break the organizational structure that headings provide. The reader may assume they accidentally skipped a section, especially when a using screen-reader to read the headings.

Don’t Use Headings for Style

Each heading level on a web page will most likely have their own styles. For example, an H1, being the page title, would probably be a larger font than the other heading levels. Each level would get progressively smaller and have less visual weight. While it may be tempting to use whichever heading has the style you think looks best, you will probably end up violating one of the above rules. There are ways to apply other styles to headings, like using CSS classes, in case you absolutely need to use a certain style.

Headings Should Group Related Content

Headings are all about the content. That’s the whole reason they exist. A heading should describe all the content beneath it until you reach another heading of the same or higher level. That means you might have to restructure some paragraphs or even other headings to make sure your content is grouped appropriately.

Examples of how to group h1 through h4 headings

Applying What You’ve Learned

Implementing headers into your web content doesn’t have to start at a developer level. If you’re a copywriter, tools like Microsoft Word and Google Docs have built-in heading styles you can use to format your document. If you’re a designer, ensure your layouts are structured around headings. If you’re a content editor, most CMS’s have heading options in their text fields. If you’re in any way involved in creating content for the web, properly using headings will make your content more readable, accessible, and optimized.

Now that you know how to structure your web writing, check out “Write to be Read” from senior writer, Drew Sottardi, which shows you how to write simply and concise.