Developers can create accessible and maintainable websites by separating style from structure when implementing heading systems.
Hi developers, I am one of you. Over the years, I’ve noticed a few common mistakes that can cause problems once a design moves from mockup to code. This isn’t about pointing fingers (I have an article for designers, too.) It’s about helping you build typography systems that are accessible, flexible, and true to the design.
Separate Heading Styles from Heading Structure
We’ve all seen this scenario. You have a series of heading classes that convey some sort of hierarchy:
.heading-one { font-size: 3rem; font-weight: 700; }
.heading-two { font-size: 2.25rem; font-weight: 600; }
.heading-three { font-size: 1.75rem; font-weight: 600; }Then, in the design, you might see a large heading at the top of the page that serves as the main title, followed by several content sections, each with its own heading styled in a similar way. At the bottom of the page, there’s a footer area with a smaller heading that fits the visual hierarchy of that section. The design also includes annotations showing when to use each of the heading classes we created earlier.
Your code might end up looking something like this:
<header>
<h1 class="heading-one">Welcome Home</h1>
</header>
<main>
<h2 class="heading-two">Our Services</h2>
<h2 class="heading-two">Why Choose Us</h2>
</main>
<footer>
<h3 class="heading-three">Newsletter</h3>
</footer>On the surface this looks fine but when looking at the generated hierarchy of the page the footer <h3> ends up being nested under the “Why Choose Us” <h2> heading. Really, the footer heading should be an <h2> (since it introduces a new top-level section of the page) but styled with the .heading-three class to visually match the smaller footer design. Our corrected code should look something like this:
<header>
<h1 class="heading-one">Welcome Home</h1>
</header>
<main>
<h2 class="heading-two">Our Services</h2>
<h2 class="heading-two">Why Choose Us</h2>
</main>
<footer>
<h2 class="heading-three">Newsletter</h2>
</footer>
Keep Visual and Semantic Hierarchies Separate
This happens all the time: headings are named to match the <h1> through <h6> element structure, but that doesn’t always translate well depending on the needs of the design. Different page sections will often use different heading styles to differentiate themselves from other page sections. As developers, our job is to know when to prioritize semantic hierarchy over visual hierarchy and to use the right heading level, regardless of how it looks.
Browser default styling of <h1> through <h6> elements did kind of a disservice to developers. It taught us that bigger means higher priority. But, the importance of a heading isn’t determined by its size, it’s determined by its role in the content structure. A smaller heading could still represent a top-level section if it introduces a major topic, while a larger heading could be purely decorative.
Your logo isn’t an <h1>
One last thing, please don’t wrap the logo in your header in an <h1>. The <h1> element on a page should represent the main content of a specific page. If every page has the <h1> of “Our Company Name” you’re not helping users (or search engines) understand what each page is actually about. And while we’re on the topic, this also goes for your <title> tag. The <h1> and <title> tags for each page need to be unique and specific to the content on the page.
Wrapping Up
Headings can seem like a small detail in the grand scheme of a website’s build, but they carry a lot of weight for both accessibility and design fidelity. By separating style from structure and using heading levels that reflect the actual content hierarchy, you’ll make life easier for your designers and ensure that the final product matches the intent of the design. Most importantly, you’ll be helping create a web experience that’s accessible to everyone.
