Headings Best Practice: A Straightforward Guide to Structuring Your Pages

What good heading structure actually means

HTML headings are labels for sections of a page, not a font-size system. A well-structured page normally has one clear <h1> for its main subject, followed by <h2> headings for major sections and <h3> headings for subsections within them.

The aim is to create an outline that still makes sense when someone scans only the headings. That helps sighted readers find the right section, allows many screen-reader users to move between headings, and gives search systems clearer prominent text to interpret.

This is not a ranking trick. A second <h1> is not automatically invalid, and neither a second H1 nor a skipped level is evidence of a Google penalty. Equally, correcting heading tags does not guarantee more traffic or better engagement. ScanMySEO can surface patterns such as missing H1s, multiple H1s, and heading-level jumps; the important next step is deciding whether each warning reflects a real structural problem.

Heading decisions in 60 seconds

• Give the page one obvious main topic. For a normal article, product page, service page, or landing page, one clear <h1> is the most dependable convention.
• Use levels to show relationships. Use <h2> for sibling sections, <h3> for a subsection of the preceding <h2>, and continue only as deeply as the content requires.
• Do not choose a level because of its default size. Use CSS to make text larger or smaller.
• Avoid jumping down more than one level. Moving from <h2> to <h4> is usually a warning; moving from <h4> back to <h2> can be completely correct because it closes the nested subsection.
• Describe the content that follows. A heading can be a statement, instruction, or question. Clarity matters more than forcing keywords or a particular punctuation style.
• Keep the H1 and title element aligned in meaning. They do not need to be identical.
• Treat automated findings as review signals. A crawler can count tags and detect patterns; it cannot always understand the intended content hierarchy.

Why headings matter—and what they do not do

They help people navigate and understand the page

Clear headings let readers preview the page, locate a specific answer, and understand how one section relates to another. This matters particularly on long articles, support pages, policy documents, and service pages where readers may arrive with a narrow task.

For accessibility, the wording and the markup both matter. The W3C’s explanation of WCAG 2.4.6 says headings and labels should describe their topic or purpose. When headings are also marked up correctly, assistive technology can present them as a list or let users jump between them.

They provide prominent context for Google Search

Google Search Essentials recommends placing the words people use for a topic in prominent locations such as the page title and main heading. Google also lists heading elements and the main visual title among the sources it may use when generating a search-result title link.

That makes clarity and consistency useful, but headings are not a standalone ranking system. They do not make an inaccessible URL crawlable, repair weak content, replace the HTML <title> element, or guarantee that Google will display your preferred wording.

They make template problems easier to control

A single incorrect heading in a reusable product card, navigation component, or page template can be repeated across hundreds of URLs. A logical heading policy gives editors, developers, and SEO teams a shared rule for fixing the source rather than correcting pages one by one.

Heading rules: requirements, recommendations, and judgement

Use heading levels to represent nested sections

The HTML Standard defines <h1> as a top-level heading, <h2> as a subsection, <h3> as a subsection within that, and so on. Choose the level from the content relationship, not from the visual design.

Several <h2> headings in succession are valid when they introduce sections of equal importance. Add an <h3> only when its section belongs inside the preceding <h2>.

Prefer one clear H1 on ordinary pages

Multiple <h1> elements can exist in conforming HTML, so “more than one H1” is not automatically proof of broken markup. Nevertheless, MDN recommends one H1 that describes the page, and that convention gives users, templates, and search systems an unambiguous main title.

For a standard content page, product page, or service page, use one H1 unless there is a deliberate, tested reason not to. Older advice that every nested <section> or <article> should restart at <h1> should not be used as a default pattern.

Avoid downward skips, but allow the outline to move back up

The W3C heading tutorial advises avoiding skipped ranks where possible. An <h2> followed immediately by an <h4> usually suggests that an intermediate section is missing or the wrong tag was chosen.

The reverse is different. An <h4> followed by an <h2> can be correct because the new H2 closes the H4’s parent subsection and begins a new major section. Fixed regions such as sidebars may also need consistent levels across templates rather than levels that change with each article’s deepest heading.

Write headings that predict the content below them

“How to validate the fix” tells the reader more than “Next steps”. “Why the page has two H1s” is more useful than “Other considerations”. A heading does not need to include every target phrase; it needs to set an accurate expectation.

Sentence case is a sensible ScanMySEO house style because it is easy to read, but it is not an HTML or Google SEO requirement. Questions, colons, brackets, and other punctuation are acceptable when they make the heading clearer. Avoid all-capital headings and decorative symbols when they make scanning harder.

Align the H1 and title element without forcing an exact match

The browser-tab title is supplied by the <title> element in the document head, and Google may use that element as one source for a search-result title link. The H1 is the visible main heading inside the page. They should describe the same content, but the title may need a brand name or extra context that would feel repetitive in the H1.

Google’s title-link guidance recommends making the main visual title distinctive and notes that Google may use the <title>, the main visual title, headings, and other prominent text when generating a result. A large mismatch is therefore worth reviewing; a small, purposeful difference is normal.

Use real heading elements, then style them with CSS

Text that looks like a heading but is coded as a generic <div> or bold paragraph may not be exposed as a heading to assistive technology. Conversely, a heading element used only to obtain large text creates structure where no real section exists. Use <h1> to <h6> for meaning and CSS for appearance.

Reject fixed length and keyword formulas

There is no universal 50–60 character limit for an H1, no required number of subheadings, and no rule that each heading must contain an exact-match keyword. Keep headings concise enough to scan and complete enough to identify the section. Natural topic language is useful; repetition added purely for SEO is not.

How to audit and fix heading structure

1. Write the intended outline before changing tags.
   • State the page’s main purpose in one sentence. That normally becomes, or closely informs, the H1.
   • List the major questions or stages as H2 sections.
   • Indent only the topics that genuinely belong inside a preceding section; those become H3 or deeper levels.
2. Inspect the rendered page, not only the editor or source file.
   • Open the browser’s developer tools and inspect the Elements or Inspector panel. This shows the rendered Document Object Model (DOM), including headings added or changed by JavaScript. MDN’s guide to inspecting rendered HTML explains the distinction.
   • On an important JavaScript-rendered page, also check the rendered HTML available through Google Search Console’s URL Inspection tool.

   For a quick inventory, run this in the browser console:

   [...document.querySelectorAll('h1,h2,h3,h4,h5,h6')].map((heading) => ({
     level: heading.tagName,
     text: heading.textContent.trim()
   }));

3. Prioritise problems by user impact and scale.
   • Fix first: no semantic main heading, empty headings, text styled as a heading without heading markup, or a site-wide template that produces a misleading hierarchy.
   • Review next: multiple H1s, downward level skips, vague labels, and large H1/title mismatches.
   • Polish later: casing, punctuation, and small wording differences that do not change meaning or navigation.
4. Fix the problem at the correct layer.
   • A content editor should correct wording, section order, and page-specific levels.
   • A developer or CMS owner should fix reusable templates, components, and styles that generate the wrong tags.
   • An SEO or accessibility reviewer should test representative page types and confirm that the resulting outline matches the visible page.
5. Validate the result in context.
   • Read only the headings from top to bottom. The page’s subject and section relationships should still be understandable.
   • Confirm that the visible main title is coded as the intended H1 and that visual headings are represented semantically.
   • Use heading navigation in a screen reader or accessibility testing tool where available.
   • Re-crawl a representative sample—or the full site after a template change—to find regressions on other page types.

How to interpret common heading audit warnings

• “Multiple H1s”: Review the page rather than assuming a penalty. Check whether one title is visibly and semantically dominant, whether a reusable component introduced the extra H1, and whether changing it to H2 or plain text would make the outline clearer.
• “Skipped heading level”: A downward jump such as H2 to H4 deserves investigation. A return from H4 to H2 is normally just the end of a nested subsection and should not be “fixed” by forcing extra headings into the page.
• “Missing H1”: Check whether the page has a visible main title coded as a generic element. Changing that element to H1 may be the correct fix; inserting a hidden, keyword-heavy H1 while leaving the visible title untouched usually does not solve the underlying clarity problem.
• “Duplicate H1 across pages”: This is different from multiple H1s on one page. Repeated headings may be expected for paginated or closely related pages, but they can also reveal copied templates or pages that do not have distinct purposes. Review the page set, not the string alone.
• “Heading too long”: Treat length thresholds as heuristics. Rewrite when the heading is difficult to scan or tries to summarise an entire paragraph, not because it crosses an arbitrary character count.
• “No heading found in source”: On JavaScript sites, verify the rendered DOM. The source response and the final browser-rendered page can contain different elements.

A crawler is good at counting headings, recording their order, detecting empty text, and finding repeated patterns. Human review is still needed to judge whether the labels accurately describe the content and whether the hierarchy reflects the page’s intended meaning.

Before and after: fixing the outline without overcorrecting

Before

<title>Website Migration Checklist | Example Co</title>
<h1>Website migration checklist</h1>
<div class="section-title">Before launch</div>
<h1>Redirects</h1>
<h4>Test priority URLs</h4>
<h2>After launch</h2>

The visible “Before launch” label is not marked up as a heading. “Redirects” has been promoted to a second H1 even though it belongs inside that section, and “Test priority URLs” jumps directly to H4 without an H3 parent. The title element and H1 are consistent in meaning; the brand suffix in the title is not a problem.

After

<title>Website Migration Checklist | Example Co</title>
<h1>Website migration checklist</h1>
<h2>Before launch</h2>
<h3>Redirects</h3>
<h4>Test priority URLs</h4>
<h2>After launch</h2>

The revised markup has one clear page heading, a major “Before launch” section, and two genuinely nested subsections. Returning from H4 to H2 is correct here: it closes the redirect subsection and starts the next major stage.

What to fix first

Prioritise heading work that changes meaning, navigation, or a large number of pages. A missing semantic main heading, visual headings coded as plain text, empty labels, and template-wide hierarchy errors deserve attention before stylistic preferences.

Review multiple H1s and skipped levels carefully, but do not create unnecessary headings merely to satisfy a crawler. Once the structure is sound, improve the wording around it: our guide to making content easy to read covers paragraph clarity, scanning, and plain-language improvements that heading tags alone cannot solve.

After changing a shared template, test several real page types rather than one ideal example. Product pages, articles, category pages, navigation components, and embedded widgets may all inherit the same code differently.

Quick reference checklist

• Is there one clearly identifiable main subject and, for a normal page, one clear <h1>?
• Do H2 headings introduce sections of equal importance?
• Does each H3 or deeper heading genuinely belong inside the preceding higher-level section?
• Have you avoided downward level jumps such as H2 to H4?
• Have you left legitimate returns such as H4 to H2 alone?
• Do headings accurately describe the content that follows?
• Are visual headings coded with native heading elements rather than generic styled text?
• Are heading levels independent of font size and other visual styling?
• Do the H1 and <title> describe the same page without being forced to match word for word?
• Have you inspected the rendered DOM and tested representative templates after the change?

Use a ScanMySEO crawl to surface heading patterns across the site, then apply this checklist to distinguish high-impact structural problems from harmless or low-priority warnings.