Heading Tags (H1-H6): Structure for SEO and Accessibility

To someone skimming a page or using a screen reader, headings are the map of the page. Heading tags (H1 to H6) are the HTML elements that split content into sections and show how the sections relate; set up correctly, they help readers skim, screen reader users navigate and search systems understand the topic.

This guide treats heading structure as common ground between SEO and accessibility. It explains what each level does, the most frequent mistakes, and how to catch them in your own template or editor. The topic is structure, not wording; for how to shape a whole article, see our SEO article writing guide.

What Heading Tags Are and What They Do

HTML has six heading levels: H1 is the highest, H6 the lowest. The W3C Web Accessibility Initiative's headings tutorial (Opens in a new tab) explains that headings communicate the organization of the content on a page and that browsers, plug-ins and assistive technologies can use them for in-page navigation. Headings are the web's version of chapter and section titles.

Three groups benefit from the structure:

• Readers: They see which section matters to them without reading from the top.
• Assistive technology users: They jump between headings to outline the page.
• Search systems: They read more clearly which subtopics make up the page.

Expectations on the search side need calibrating. Google's SEO starter guide (Opens in a new tab) recommends headings to help users navigate a page, while saying you need not obsess over their order or number. Heading structure is therefore not a dial that lifts rankings by itself; it is the framework that carries readability and clarity.

Heading structure is also a different layer from Article or FAQ structured data, which our article schema markup guide covers separately.

The H1 Tag: The Main Heading of the Page

The H1 is the main heading and says what the whole page is about. On a blog post it is the post title, on a product page the product name, on a category page the category name.

Two questions come up repeatedly. The first is how many. In practice, one clear main heading per page is the most understandable setup and spares screen reader users confusion. The examples in the W3C tutorial each use a single H1, but the tutorial does not address multiple H1s directly. So an absolute claim such as "more than one H1 gets a page penalised" cannot be supported here; if a template outputs two, treat it as an inconsistency to fix rather than an emergency.

The second is how H1 relates to the title. The title shows in search results and the browser tab; the H1 shows on the page. Both should describe the same subject, though they need not be identical: a title can be short and close to the query while the H1 welcomes the reader. Title and meta description writing is its own topic, which we handle in the guide to writing SEO titles and meta descriptions.

Avoid making the site name the main heading. The W3C tutorial shows two layouts: one where the H1 is the first heading of the document, and one where the H1 is the content heading rather than the site name, so that the page's own title stays at level 1.

H2 and H3: Section and Subsection Logic

H2 marks the main sections of a page; H3 marks the subtopics inside an H2. The W3C tutorial asks that headings nest by rank: a heading of equal or higher rank starts a new section, while a lower-ranked one starts a subsection of the current section.

Think of a table of contents:

• H1: the subject of the page
• H2: the first main section (two H3s beneath it, the section's subtopics)
• H2: the second main section

A good set of H2s gives someone who reads only headings the skeleton of the story. Write the page's H2s one under another: if they read as a sequence, the structure is sound; if they are disconnected or repetitive, the problem lies in the content plan, not the tag.

H3s are optional. If an H2 has no real subtopic to separate, do not split the section artificially just to add one. There is no ideal number of headings; Google's guide makes the same point when it says that if you think a page has too many headings, it probably does.

For the reader, H3s are not placeholders but an extra aid to decisions. In a comparison section, for example, opening an H3 for each option lets users go straight to the one they want.

When H4 to H6 Are Actually Needed

Most blog posts and service pages are fully described by H1, H2 and H3. H4 to H6 are only for content that truly needs a fourth layer below the third: long technical documents, manuals, standards text and multi-level reference pages.

When the urge to go down to H4 appears, ask first:

• Should this section stay on one page, or be split into separate pages?
• Are the fourth-level headings real subtopics, or bold labels in disguise?
• Can a reader follow this depth while scrolling?

If the answers are unclear, the fix is often to simplify the page rather than add headings. Reaching level six is seldom a good sign; splitting a long page in two, or turning a section into a table, usually reads better.

Skipped Heading Level Mistakes

A skipped level means an intermediate step is missing, such as an H4 right after an H2. The W3C tutorial says it plainly: skipping heading ranks can be confusing and should be avoided where possible. It also shows an exception: when closing a subsection, an H2 may follow an H4 because the H2 ends the previous section.

So the rule is not "you can never go up", it is "you cannot skip a step on the way down":

• Valid: H2, H3, H3, H2, H3.
• Valid: H2, H3, H4, H2 (returning to a new section).
• Skip: H2, H4 (no H3).
• Skip: H1, H3 (no H2).

The cause is usually visual, not technical: an author likes the size of an H3 and drops it right under an H2.

To fix a skip, either lift the heading one level or add the missing intermediate heading. If the intermediate heading would be artificial, reorganising the section is the more honest fix.

The Mistake of Choosing a Level for Styling

The commonest error is picking a heading tag to adjust text size or weight. "H4 looks smaller, so it fits here" or "H2 is too big, I will use H3" trades meaning for appearance. A heading level is hierarchy information; appearance is CSS's job.

The reverse also happens: a line that looks like a heading but is tagged p or strong is ordinary text to a screen reader and never appears in its heading list.

The rule is simple:

1. Build the logical structure first: which heading sits under which?
2. Choose levels from that structure.
3. If the look must differ, adjust size and weight with a CSS class.

The W3C tutorial does not state this principle in so many words. It does say that in fixed regions such as sidebars, heading ranks should not change depending on the ranks in the content area, and that consistency matters; this fits the idea that levels express structure, not looks.

Imagine a team (an example scenario) that wants the "Related Posts" heading in a sidebar to look large, so it marks it up as H1. Every post now has two H1s, and for a screen reader user the real subject of the page gets lost. The fix is to keep an appropriate level and set the appearance in CSS.

Using Keywords in Heading Tags

Headings are short phrases that summarise what a section is about, so they naturally contain the terms of the topic. What matters is that those terms are natural.

A workable approach:

• H1: carries the main topic and the primary query in a natural phrase.
• H2: matches the sub-questions or concepts that divide the topic; some may include a variation of the primary term.
• H3: focuses on more specific terms, examples or steps.

Turning the question a reader truly asks into a heading serves both users and search systems. An H2 such as "How do you audit this on mobile?" names a query and a section at once, and it also provides suitable material for formats like featured snippets, which we cover in our guide on how to win featured snippets.

Patterns to avoid:

• Repeating the same phrase in every heading
• Headings that the content does not deliver on
• Empty label headings such as "Introduction", "Other" or "Details"
• Very long, sentence-length headings

The test: if someone reading the heading alone can tell what the section beneath it covers, the heading works. The keyword is the outcome of that test, not its goal.

Accessibility: Screen Readers and Heading Navigation

The most concrete payoff of heading structure is for screen reader users. Many of them move through a page by jumping between headings instead of listening from top to bottom. The W3C tutorial says browsers, plug-ins and assistive technologies can use headings for in-page navigation, and adds that visible headings make regions easy to identify for all users.

That makes a broken structure an invisible barrier. These cases affect users directly:

• No H1: the main subject is missing from the heading list.
• Skipped levels: a gap suggests a section is missing.
• Lines that look like headings but carry no tag: they never show up in navigation.
• Elements tagged as headings that are not headings: menu labels, date lines and ad slots clutter the list.

A plain principle is enough: if something is truly the heading of a section, mark it with a heading tag; if not, do not.

To test, listen to the page with a screen reader using heading navigation. If the heading list gives the subject and sections in a meaningful order, you have a solid foundation for both accessibility and content clarity.

Heading Errors Caused by Templates, Editors and Plugins

Even when an author builds the right structure, templates and plugins can break it. The real source is often the code around the text, not the text itself.

• Theme templates: Themes that output logo, menu or sidebar titles as H1 to H3 add extra headings to every page.
• Page builders: Visual editors offer a heading level menu to size a text block, making the styling mistake easy.
• Plugins: Table of contents, related posts and comment plugins insert their own heading tags.
• Rich text editor: Pasted content brings the heading levels of its source page along.
• Blog post templates: If the post title is an H1 in the template and the author types another H1 inside the body, the page ends up with two.

The remedy depends on where the fault sits. If the template causes it, fix the theme file or setting. In the editor, give authors a simple rule: no H1 in the body, sections start at H2, subsections are H3. Adding such a rule to your delivery process stops repeat errors; for a place to record it, see the content quality checklist before you publish.

Auditing Your Heading Structure

You do not need a heavy tool to audit headings. A three-layer method is enough for most sites:

1. One page, by hand: Search the source in browser developer tools for H1 to H6, or use a browser extension that lists headings. Check order, level and count.
2. One representative page per template: Inspect a sample of each template: home, category, product, blog post. A template-level fault fixed once repairs hundreds of pages.
3. Site-wide crawl: SEO crawlers list missing H1s, multiple H1s and skipped levels in bulk. Read the report as a list of candidates to review, not as an absolute list of errors.

At the end, ask the same questions of every page: Is there one clear main heading? Do the H2s read as a sequence on their own? Is any level skipped? Does a non-heading element carry a heading tag? Is any real heading left untagged?

To run these checks as part of a wider review, read how to run a content audit. Collecting heading findings in the same table as quality and intent findings makes it easier to set priorities.

Repair template-level faults first, then high-priority pages; small inconsistencies in single posts can wait for the next update.

Sample Template: Heading Hierarchy Audit Table

An audit table where you go through the heading list line by line and write a decision for each follows. The rows and findings are example values invented for a blog post template; replace them with the real heading list of your own page.

In this example scenario, the team finds two problems. First, "Water Temperature" was set as an H4 because its size looked right; the fix is to make it an H3 and adjust the size with CSS. Second, the sidebar prints "Related Posts" as an H1; the fix is to correct the template and move it to a suitable level.

In the Finding column, record the decision as well as the fault, so the next round does not re-analyse the same page.

Frequently Asked Questions

What is an H1 tag, and does every page need one?

An H1 is the top-level heading that names the main topic of a page, and giving each page one clear main heading is good practice. Browsers will display a page without one, but a single heading that states the subject at a glance is the clearest option for readers and for assistive technology.

Should the H1 and title tag be identical?

No, they do not have to match; they should be aligned but can differ. The title appears in search results and the browser tab, while the H1 is the main heading on the page. Google can draw on other headings besides the title element when building title links, so the two should never contradict each other.

How do you use H2 and H3 headings?

Use H2 for the main sections of a page and H3 for subtopics inside an H2. Headings nest like an outline, and levels are not skipped on the way down, so an H2 is never followed directly by an H4. Starting a new section with an H2 again is correct.

Can heading tags be used to make text bigger?

No, heading tags carry meaning and structure, not size. If you want larger or bolder text, set it with CSS. Choosing a heading tag for its size gives screen reader users, and tools that read your structure, fake headings that do not belong in the hierarchy.

How do headings affect accessibility?

Screen reader users often scan a page by moving between headings, so a correct hierarchy shows them where each section starts and ends. The W3C Web Accessibility Initiative notes that headings communicate the organization of content and can be used for in-page navigation. Skipped levels create confusion.

What tool checks the headings on a page?

Browser developer tools let you inspect the source, heading-listing browser extensions show one page at a glance, and SEO crawlers check a whole site. An extension is enough for a single page; a crawler reveals site-wide patterns such as missing H1s and skipped levels. Also try the page with a screen reader.

Conclusion and Next Step

Heading tags are the skeleton of content, not a styling control. The rules to remember are few: give each page a clear main heading, open sections with H2 and subsections with H3, never skip a level on the way down, and never choose a level for its size. This structure directly improves accessibility; for search systems it is a foundation that supports how clearly the page is understood, without promising a ranking on its own.

To have articles prepared with a clean heading structure from the start, use the article ordering page: choose the product, complete cart and payment, follow seller approval and the delivery notification, and fall back on the objection route if needed. Comparing the delivered text's heading list with this guide's audit table makes the job easier for you and the writer.