Heading Tags (H1–H6) and Hierarchy

What are heading tags?

Heading tags, ranging from H1 to H6, are HTML tags that define a page’s content hierarchy and section structure. H1 represents the top-level heading, H2 represents main sections, H3 represents subsections, and so on. Although these tags appear visually as larger or bolder text in the browser, their primary purpose is structural, not visual: much like a table of contents in a book, they form the logical skeleton of the page.

This hierarchy is not merely an order visible to the human eye; it is also a tree structure that browsers and assistive technologies (such as screen readers) can “understand” programmatically. A screen reader user typically navigates by jumping from heading to heading; therefore, if the hierarchy is disrupted, navigation is also disrupted.

Heading levels also make a page’s long content scannable: instead of reading the page line by line, users can scan the headings to find the section they’re looking for. This can positively impact both the user experience and the time spent on the page.

Why is this important?

The correct heading hierarchy not only makes it easier for search engines to understand the page’s overall topic and subtopics but also enables users who rely on screen readers to navigate the page. Google determines which section covers which subtopic on a long page based on the heading structure; this can help ensure the correct passage is selected, especially in rich results such as “featured snippets.”

An irregular or incomplete hierarchy leads to an unclear content structure and accessibility issues. For example, jumping directly from an H2 to an H4 can confuse a screen reader user, making them wonder, “Is there a missing intermediate level here, or has the section ended?”

In an extreme case, in single-page applications (SPAs) or multi-component template systems, different components may render their own H1 headings independently; this can inadvertently result in multiple H1 headings on a single page. In such technical architectures, it is important to manage heading levels from a central location.

How to fix it?

• There should be only one H1 on the page; this is typically the page’s main heading and should clearly summarize the page’s topic.
• Use headings in order: H1 → H2 → H3, without skipping levels.
• Use headings to define the content structure, not for visual styling; if you want large or bold text, use CSS—do not select the wrong heading level.
• Each H2/H3 should be a genuine section heading, not decorative text or a slogan.
• Use keywords naturally in headings; do not force keywords into every heading.
• On long pages, write headings in a consistent and predictable way so they form a table of contents; this helps both users and search engines.
• If you’re using a theme or component library, document which heading levels different components (header, hero, card, footer) use in a central style guide.
• When changing the page layout, periodically check whether the heading hierarchy has been disrupted using the browser’s developer tools (DOM tree).
• For blogs or news sites, establish a content management workflow that keeps the article title (H1) separate from the SEO title; do not link the two together.
• On multi-author sites, different editors may have different habits; therefore, documenting heading hierarchy rules in a style guide enhances consistency.

Example

<h1>SEO Guide</h1>
<h2>Technical SEO</h2>
<h3>Site Speed</h3>
<h2>Content SEO</h2>
<h3>Keyword Research</h3>

Bad example: <h1>Welcome</h1> followed directly by <h4>Our Products</h4> — H2 and H3 levels are skipped, breaking the hierarchy.

Common mistakes

• Using more than one H1 on a page (e.g., both in the logo area and in the content).
• Not using any H1 tags at all.
• Using heading tags solely to achieve a large/bold font, disregarding the hierarchy.
• Skipping levels by going directly from H2 to H4.
• When the Seoraporu.co report shows a warning for “multiple H1s” or “missing H1,” this must be corrected at the template/theme level, as it is typically a recurring issue across all pages.