Headings are not just large text. They are the structure that helps search engines, screen readers and tools like UOPIX understand the page.

In this guide you will see a visual example with real issues: a main title built with a div, sections that start with h3 and headings used only for styling.

Use the Start guide button to walk through the issue, inspect the HTML with errors and compare the correct solution.

Guided tour

Walk through a mini website with real heading issues

Press start guide to follow the walkthrough. You will first see the mini site, then the marked issue and finally the code with the solution.

demo-headings.local

Error H1

SEO services for ecommerce

Visually it looks like a main title, but in the HTML it is a div. There is no semantic H1.

Hierarchy jump

Technical audit

This section starts at H3 without an H2 parent. It looks fine to the user, but the structure is incomplete.

Heading used as style

Pricing

Advanced plan

The level was chosen for appearance. The hierarchy should express the relationship between sections.

SEO impact

Less semantic clarity, weaker basic accessibility reading and more difficulty for the main content to be interpreted correctly.

Detected incident

Broken heading hierarchy

The page looks correct visually, but its semantic structure does not make the main topic or section order clear.

SEO impact

Search engines receive weak signals about the central topic of the URL. This can reduce semantic clarity and make important sections harder to interpret.

Accessibility impact

Screen readers and users who navigate by headings lose a reliable content map. The page becomes harder to explore.

Incident cause

The visible title is not a real H1.
A main section starts with H3 without an H2 parent.
Headings are used for appearance, not hierarchy.

Recommended fix

Keep one H1 for the main topic, use H2 for key blocks and reserve H3 for real subsections. Visual styling should be handled with CSS.

FAQ about H1, H2 and SEO

How many H1 tags should a page have?+

As a practical rule, one. HTML can allow more in some contexts, but for technical SEO and audits it is usually clearer to keep one main H1 per URL.

Does a duplicated H1 automatically lower rankings?+

Not always directly, but it reduces clarity, makes content interpretation harder and often points to a poorly structured template.

Can I change the H1 size with CSS?+

Yes. The tag defines semantic hierarchy; the visual appearance should be controlled with CSS. An H1 can be large, small or visually subtle.

What does UOPIX check in headings?+

It detects missing H1 tags, conflicting multiple H1 tags, hierarchy jumps and headings used unclearly inside the analyzed content.

Visual guide: how H1 and H2 errors affect SEO

Walk through a mini website with real heading issues

Technical audit

Pricing

Advanced plan