What can come before an H1 in HTML? Complete SEO guide

One of the most common questions when reviewing a website’s architecture is what can come before an H1 in HTML. The answer is simple: structural and navigation elements can appear before the H1, but in articles, landing pages and service pages, we do not recommend having any H2 or H3 before the main H1.

At Ventia Group, we specialise in technical SEO and organic search visibility, and one of the first things we review in an audit is the heading hierarchy. A properly structured page should have a clearly identifiable main topic through its H1, before developing that content using H2s and H3s.

Why the H1 should be the first content heading

The H1 represents the main topic of a URL. It is the heading that summarises what the user will find and helps establish the document’s main subject.

The H1 defines the main topic

If a page is about “SEO Agency in Barcelona”, that concept should be clearly represented in the H1.

We can then develop different parts of the page with H2 headings such as “SEO Services”, “Technical SEO”, “Local SEO” or “How We Work”.

H2s depend on the H1

An H2 is a secondary section of the main content. From a semantic perspective, the main topic should come first, followed by its sections.

That is why at Ventia Group we always use this structure:

H1 → H2 → H3

H3s, in turn, develop content included within an H2.

We do not use H2s or H3s before the H1

In articles and pages designed to rank on Google, our recommendation is clear: there should be no H2 or H3 before the main content H1.

We are not saying that Google applies an automatic “penalty”, but rather that a clean, understandable and easy-to-interpret semantic architecture should be built.

So, what can appear before the H1?

When we talk about what can come before an H1 in HTML, we need to distinguish an SEO heading from other standard website elements.

Logo

The logo can appear before the H1 without any issue.

It is usually part of the website’s general header and does not constitute the URL’s specific editorial content.

Navigation menu

Home, services, about us, blog or contact can all appear before the H1.

The important thing is that they are structured as navigation, rather than artificially using H2 or H3 tags.

Breadcrumbs

Breadcrumbs can also appear before it.

For example:

Home → Blog → Technical SEO → H1 and headings

This helps users understand where they are within the website’s architecture.

Hero image

An image or visual block can also appear before the H1.

In fact, on many pages, the H1 itself is visually integrated into the hero section.

Notices or top bars

Promotional messages, information bars or notices can appear before the H1, provided they do not alter the content hierarchy.

What should not appear before the H1

This is where we find some of the most common issues during SEO audits.

An H2 before the H1

This is probably the most common case.

A designer may use an H2 because it has the visual size they want, without realising they are creating an incorrect semantic structure.

On an optimised page, we define the H1 first and then develop its H2s.

An H3 before the H1

The issue is even more obvious because an H3 conceptually represents a subsection of an H2.

If it appears before the main H1 even exists, the architecture loses its logic.

Visual titles using incorrect headings

A very common mistake is using H2, H3 or even H4 simply to achieve a particular font size.

Styles should be managed through CSS.

An HTML heading should be used for its semantic function, not its appearance.

Another main title competing with the H1

We should also avoid having a large piece of text above the H1 that visually appears to be the page’s actual title.

Users and search engines should be able to quickly identify the main topic.

The correct SEO structure for an article

In a blog article, the structure we recommend at Ventia Group is particularly simple.

H1: article title

It should represent the main search intent.

For example:

H1: What can come before an H1 in HTML without harming SEO

H2: major questions or sections

After the H1, we can create the main thematic blocks:

• What can appear before the H1.
• What should not appear.
• How to organise H2s and H3s.
• Common mistakes.

H3: developing each section

Within each H2, we use the H3s needed to develop more specific searches and make the article easier to read.

The correct SEO structure for a service page

The same principle applies to landing pages and commercial pages.

An H1 focused on the main keyword

For example:

SEO Agency in Barcelona

H2s for each relevant block

We could use:

• Our SEO agency services.
• How we approach search visibility.
• Technical SEO.
• Content SEO.
• Local SEO.
• Frequently asked questions.

H3s for specific services or concepts

Within “Our SEO agency services”, for example, we could use H3s for SEO audits, content strategy, link building or competitor analysis.

Why this hierarchy also helps GEO

Understanding what can come before an H1 in HTML is no longer relevant only for Google. Content structure also makes it easier for artificial intelligence systems to interpret and extract information from a page.

Each section answers an intent

A good H2 introduces a specific topic and the H3s break it down.

This makes it possible to create information snippets that are much easier to interpret.

It improves semantic clarity

The H1 → H2 → H3 relationship clearly communicates which concepts depend on others.

It enables more specific answers

When a section has a clear heading and a direct answer below it, it is easier for search engines and AI tools to understand its content.

Is it better to use just one H1?

At Ventia Group, we recommend one H1 per URL.

One main topic per page

From an SEO perspective, a URL should primarily address one search intent.

A single H1 helps reflect that intent unambiguously.

Other topics are developed with H2s and H3s

We do not need to create several H1s to give prominence to different concepts.

That is what the secondary heading hierarchy is for.

The structure is easier to audit

It also greatly simplifies the technical analysis of a website with hundreds or thousands of URLs.

Mistakes we commonly find at Ventia Group

When reviewing websites, we often find structures that look correct visually but are poorly organised semantically.

H2 in the top banner before the H1

It is one of the classic problems. The designer places a short claim as an H2 and the main title appears afterwards.

Our recommendation is to turn that claim into a standard text element, such as a <p> or <span>, and keep the H1 as the first heading.

H3s used purely for design

We also find cards or small upper blocks whose title is coded as an H3.

If they appear before the H1, their semantic tag should be changed.

The logo turned into an H1

Another outdated configuration is using the company name as an H1 in the header on every page.

This prevents the H1 from properly representing the specific intent of each URL.

Two H1s competing with each other

Although a page can technically render several H1s, our SEO methodology favours keeping a single main heading.

At Ventia Group, we specialise in identifying and fixing these types of technical issues before working on content, authority and organic growth.

How to check a page’s H1s, H2s and H3s

To review what can come before an H1 in HTML, we need to analyse the URL’s actual structure, not just its visual design.

Inspect the code

Check which is the first heading that appears within the content.

Use crawling tools

SEO tools can identify URLs without an H1, with multiple H1s or with heading structures that require review.

Review the rendered DOM

On some websites, JavaScript modifies the structure after the page loads. That is why it is also important to review the rendered HTML.

Do not limit yourself to checking tags

A professional SEO audit should also assess whether headings genuinely address the searches we want to rank for.

Ventia Group: technical SEO and search visibility specialists

At Ventia Group, we are SEO experts and work on search visibility projects for companies across Spain. Our strategy combines technical SEO, web architecture, content, search intent analysis, authority and continuous optimisation.

Heading structure is part of that analysis because small errors repeated across dozens or hundreds of URLs can make a website’s architecture far less clear than it appears.

That is why we do not simply check whether an H1 exists. We analyse whether it is the right one, whether it addresses the right keyword, how it relates to the H2s and H3s, and whether the entire page is built to target a specific search intent.

Conclusion

If you are wondering what can come before an H1 in HTML, remember this practical rule: navigation, design and structural elements can appear before the main title, but on articles and SEO pages we do not recommend placing an H2 or H3 before the H1.

The structure should be logical:

H1 → H2 → H3 → H4 where necessary.

It is not about obsessing over a single tag, but about building a page whose topic and organisation are immediately understandable.

And that is precisely one of the differences between simply publishing content and implementing a professional search visibility strategy.