Heading Structure for SEO and Accessibility: A Practical Guide

Heading elements name sections and show how ideas relate. They help readers scan, allow assistive technology to navigate, support tables of contents and give search systems clearer page signals. Their value comes from an honest document outline—not from repeating keywords or turning every bold line into a heading.

The quick answer: give every level one job

Headings describe structure, not font size

Choose a heading level from the relationship between sections. Use CSS to make an H2 visually small or a paragraph visually large. A bold sentence is not automatically a heading, and a large heading should still be semantically accurate.

W3C guidance recommends nesting headings by rank and avoiding skipped levels when opening a subsection. Moving from an H4 back to an H2 is valid when the deeper subsection has ended; opening an H4 directly beneath an H2 is usually confusing.

Why one H1 is the strongest operating convention

A single H1 makes the primary page title obvious across CMS templates, design systems, screen-reader heading lists and automated checks. It is a convention for clarity and maintainability—not a secret ranking factor.

If an existing page has multiple H1 elements, inspect why before changing them. A site name in the header, a modal, an embedded article or a repeated component may be producing them. Fix the component model and visual hierarchy; do not merely convert every extra H1 to H2 without checking relationships.

Align the title element, visual title and H1

The HTML <title> names the document in browser and search contexts; the H1 names the visible page. They can use different wording, but they should promise the same topic and task. The title may include concise branding or search context while the H1 stays natural on the page.

Google can use title elements, headings and other prominent text when generating a title link. If several large headings compete, Google may choose the first. Use the title tag workflow to keep the result and page aligned.

Build the outline before writing sections

Start with the page job, then list the questions or decisions a visitor needs. Group related items into H2 sections, and use H3 only when a section genuinely needs subdivisions. If the outline cannot be understood without the paragraphs, the headings may be vague or decorative.

Write headings that make sense out of context

Screen-reader users may open a list of headings or jump directly between them. A heading such as “Why it matters” can become meaningless when repeated. Name the actual topic, result or decision while keeping the wording concise.

WCAG 2.2 requires headings and labels, when provided, to describe topic or purpose. It does not require long headings. A few precise words can be more useful than a full promotional sentence.

Map headings to the page type

Cards need headings only when they create real sections

A card title can be a heading when the card is a meaningful subsection—such as a service, article or project with its own description. A statistic, badge, button or tiny feature label usually does not need a heading.

Repeated cards must inherit their level from the page. A service grid under an H2 will commonly use H3 card titles. If the same component appears directly beneath an H1 on another template, its API may need a configurable heading level rather than hard-coded H2s.

Handle accordions, tabs, modals and menus deliberately

Interactive controls need an accessible name, role and state. A heading can contain an accordion button when the question also serves as a section heading, but the button still needs correct expanded state and keyboard behaviour. Do not use heading markup as a substitute for component semantics.

Content hidden behind a tab or accordion should remain logically connected to its control. Modal and dialog headings label that dialog; they should not become a second page H1.

Keep fixed regions consistent across templates

Navigation, sidebar and footer sections can have their own headings and landmarks. W3C notes that fixed page regions should keep consistent heading ranks across pages rather than changing according to the deepest heading in the main article.

Use semantic landmarks such as <nav>, <main>, <aside> and <footer> where appropriate. A visible heading can label a region, but not every landmark needs one if its accessible purpose is already clear.

Use stable heading IDs for tables of contents

A table of contents improves navigation when a page is long enough to need one. Generate unique, stable IDs from editorially controlled slugs or stored identifiers. Changing the visible heading should not have to break every shared deep link.

When a sticky header covers the destination, use layout techniques such as scroll-margin-top. Keyboard focus, history, translated slugs and duplicate headings also need testing.

Localize meaning, not only heading text

Each language page needs a complete natural outline. Do not leave English headings inside Malay or Chinese content, and do not force identical word order when the language needs a clearer phrase. The hierarchy and page job should remain equivalent even when wording differs.

Google advises matching the language and writing system of prominent page text. Keep title, H1, headings, body and navigation coherent within each localized URL.

Prevent CMS and page-builder heading noise

Templates often create more heading problems than writers do. Logo widgets, reusable blocks, card components, hidden responsive duplicates and empty editor fields can produce headings across hundreds of URLs.

Fix the source component rather than editing every generated page. Before changing a shared template, sample several page types because the correct card level may depend on where the component is placed.

Combine crawl data with a manual outline review

A crawler can find missing, empty, duplicate and multiple H1s, or suspicious rank jumps. It cannot decide whether “Overview” is useful, whether two H2s should be merged, or whether the mobile reading order tells the correct story.

Use automated findings as a review queue. Inspect representative templates and the highest-impact pages, then fix shared causes first.

Run a page-to-template audit

Measure clarity without inventing a ranking claim

A heading cleanup may improve navigation and comprehension, but a ranking change cannot be attributed to heading order alone. Search performance also depends on intent, content, links, competition, technical eligibility and result presentation.

Measure the page task. For a guide, useful signals may include table-of-contents use, section engagement and completed next steps. For a service page, check qualified enquiries—not merely scroll depth.

Common heading mistakes

• Using heading levels to control font size.
• Turning every bold sentence or card label into a heading.
• Repeating the exact keyword in most headings.
• Using the brand logo as H1 on every page.
• Creating two equally prominent page titles.
• Skipping from H2 to H4 when opening a subsection.
• Converting every multiple-H1 warning without checking context.
• Hard-coding card headings without knowing the container level.
• Using vague repeated headings such as “Learn more”.
• Leaving empty heading elements from optional fields.
• Duplicating exposed headings in mobile and desktop markup.
• Assuming a perfect outline will rank weak or irrelevant content.

Frequently asked questions

Does every page need an H1?

Most meaningful indexable pages should have one clear visible H1 that names the page. Utility screens may have different interface needs, but they still require an accessible title or label.

Can a page have more than one H1?

Browsers and Google can process multiple H1s, so it is not an automatic penalty. One descriptive H1 is still the most reliable convention for ordinary web pages and template QA.

Must the title tag and H1 be identical?

No. They may differ for branding, length or on-page readability, but they should describe the same page purpose.

Can I skip from H2 to H4?

Avoid it when opening a subsection because the hierarchy becomes unclear. Returning from an H4 to a new H2 is fine when the previous nested section has ended.

Do headings need exact-match keywords?

No. Use the words readers need to understand the section. Natural topic terms may appear, but repetition is not a quality signal.

How many H2 headings should an article have?

There is no fixed number. Use as many major sections as the page task requires, and remove sections that add no useful decision or answer.

Should every card title be a heading?

Only when the card forms a meaningful section. Small labels, statistics and buttons usually need appropriate text or accessible names, not heading markup.

Should FAQ questions be H2 or H3?

It depends on the container. If “Frequently asked questions” is an H2, individual questions will commonly be H3.

Does heading structure affect rankings?

Headings help communicate content structure, but there is no guaranteed ranking gain from changing levels. Improve them for clarity, accessibility and maintainability, then measure the whole page.

Can an automated SEO tool fix the hierarchy?

It can find structural patterns, but a person must judge relationships, wording, component context and reading order.

Official references

• Google Search Essentials
• Google SEO Starter Guide
• Google Search Central: Influencing title links
• MDN: HTML heading elements
• W3C WAI: Headings
• W3C WAI: Headings and Labels
• W3C: Web Content Accessibility Guidelines 2.2
• W3C WAI: Easy heading checks
• WHATWG: HTML headings and sections
• Ahrefs: H1 tag best practices
• Semrush: Heading tags and SEO