Coding web page headings

There are scores of content management system (CMS) brands, but despite the diversity on the market, they all share one aspect: structured content. The administration (admin) panel in any CMS will break out text areas meant for different kinds of text. Usually there will be a single text field for the main headline. When published, the text in that field will get the h1 tag applied in the web page…or it should, if the site theme was set up that way. My current theme is applying an h2 tag to a blog post header.

Heading Content

What about the rest of the page? Is the content chunked into manageable paragraphs and headings? How do you know when to make something just bold or when to make it an h2 or h3? For more information on this, I recommend “Letting Go of the Words: Writing Web Content That Works” by Ginny Redish. She goes in-depth about how to write inviting and useful headings.

The heading is like a door. The front door of a house is like an h1, and the interior doors in the house are like h2. The type of door announces that  a different area is coming.

Coding Headings

For both SEO and accessibility, you must tag headings properly: h1, h2, and so on. Bigger, bolder text that is not tagged won’t be seen as a heading by either search engines or accessibility software.
~Ginny Redish, p. 166

If you aren’t confident in going under the hood and using the text or code view of your CMS, then be sure to check if your headers are just bolded paragraphs or actual headers by using the paragraph style drop-down in your wysiwyg editor.

One reason people don’t use headers properly is that they don’t like the look of the pre-styled header. It’s the wrong size, or wrong color, etc. If your CMS has a space for custom CSS rules, that is where you go to define new sizes and colors for your headers. Please don’t delete the header tag just because you don’t like how it looks.

Semantic Headings

The hierarchy of headings should be clear and logical. Each web page starts with an h1. The next-most important heading should be an h2, and if that heading has sub-sections, those headings should be an h3.

I have been receiving content from content managers for five years. This area is the most commonly forgotten detail about their instructions to the coder. If you are working in a cross-functional team and you’re providing content to a coder, please remember to indicate the hierarchy of the headers on the page. I don’t have time to read the content when I’m backlogged with tasks. I expect h2 and h3 levels to be clearly marked in the instructional Word document, and if they aren’t, then I have to guess. Please don’t make your coders guess! It’s ok to spell out the details of your page; we won’t be insulted.