Making headings work with your visual design

Last week, I covered the basics of heading hierarchy: using an H1 tag for your page title, H2 tags for major sections, and H3 tags for subsections. Basically, don’t skip levels going down. But then you try to apply this to a real website. The sidebar has content that visually looks more important than some of the main content. A callout box screams for attention, but semantically it’s a subsection of a subsection.

Visual design and semantic structure don’t always align, and that’s where things get tricky.

Separating structure from style

You can skip levels going back up: You can’t skip levels going down (H2 to H4 is wrong). But you can skip levels going back up. An H2 can follow an H3 because you’re closing a subsection and starting a new major section. This is perfectly fine.

When visual importance conflicts with semantic hierarchy: A pullquote or callout box might be designed to look like the most important thing on the page. Large text, bold font weight, and eye-catching. But semantically, it’s part of a subsection. It should still be an H4 or H5 based on where it sits in the document outline, not how big it looks. Use CSS to make it look important, but keep the heading level semantically correct.

Sidebars and secondary content: Sidebar headings are tricky. Visually, they might look less important than the main content. However, they are typically not subsections of the main content. They’re separate sections. A sidebar heading should typically be H2 (assuming H1 is your page title), not H4 just because it looks smaller or less important.

<h1>Article Title</h1>
  <h2>Introduction</h2>
  <h2>Main Content</h2>
    <h3>Section Detail</h3>
<!-- Sidebar, visually smaller but semantically separate -->
<h2>Related Articles</h2>

When you need structure without visible headings: Sometimes a section needs a heading for structure, but showing it would clutter the design. In this case, use a visually hidden heading with the .screen-reader-text helper class. This gives screen reader users the structure they need without affecting the visual design.

The document outline matters more than visual design

Screen reader users experience the document outline, not the visual layout. Always choose heading levels based on content relationships, not visual positioning or aesthetic preferences. Pick the semantic level first, then style it with CSS.

Visual design and semantic structure serve different purposes. Headings define content relationships for screen readers. CSS handles visual presentation. Keeping them separate is key.

Stay tuned for Part 3, where we’ll look at headings versus bold text and common heading mistakes to avoid.