HTML Headings H1–H6: Structure for SEO and Accessibility

Most websites are built like a book. They have a title, chapters, sub-chapters and ordinary paragraphs. In the page's code, that structure is marked up with six levels of headings, from H1 to H6, and with the paragraph tag p, which holds the text itself. When the structure is right, search engines understand faster what the page is about, screen readers let people with visual impairments move around it, and every visitor finds what they came for without scrolling blindly.

The trouble is that in website builders such as Webflow, WordPress and Wix it is very easy to pick a heading for its size rather than its role. That is how you end up with pages that have three H1s, a jump from H2 straight to H5, or ordinary text marked as a heading just because it needed to stand out.

In this guide we cover:

• what H1–H6 headings are and the difference between meaning and styling;
• how to build a correct heading hierarchy, and the most common mistakes;
• what you need to know about H1 and SEO, including AI-powered search;
• how to use the paragraph tag p properly;
• why heading structure matters for accessibility and what the standards expect;
• how to set up headings in Webflow, WordPress and Wix, and how to audit the structure.

What H1–H6 headings are and why they matter

HTML headings are six tags, from H1 to H6, that mark the titles of the sections on a page. The level of a heading tells you how important it is and where it sits in the document's hierarchy:

• H1 is the main heading of the page. It describes the topic of the whole page or its central idea;
• H2 headings title the major sections of the page;
• H3 headings title the subsections inside an H2;
• H4, H5 and H6 are further levels of nesting. The higher the number, the lower the heading's "rank".

The tag describes meaning, not appearance

By default, browsers show H1 large and bold and H6 very small, so it is tempting to use headings to make text bigger. That is a mistake. The heading level tells search engines and screen readers where the text sits in the structure, not how it looks. Size, weight, colour and spacing belong in CSS or in your website builder's style classes, separately from the tag.

This is what makes it possible for an H2 on the home page to look huge and an H2 on the blog to look modest, while both remain structurally correct.

How many levels you actually need

You don't have to use all six levels. On most pages three are enough: H1, H2 and H3. Long guides and technical documentation sometimes go down to H4. Beyond that, readers start to get lost in the hierarchy, and it is usually a sign that the content should be split across several pages.

Heading hierarchy done right: the rules

When you choose a heading, the goal is not to choose a font size. The goal is to build a logical page structure, one that helps both visitors and search engines understand the content faster.

Headings follow a logical order

The first rule: headings step down gradually, from the higher level to the lower one. After H1 comes H2, inside it H3, and so on. Don't skip levels on the way down: an H4 should not follow an H2 just because it is smaller. On the way back up, jumping is fine: after an H4 you can return straight to an H2 when a new section begins.

Here is a sound structure for a service page:

• H1: Website design for small businesses
• H2: What the service includes
• H3: Design and UX
• H3: Development and integrations
• H2: How the project runs
• H3: Step 1: Discovery call
• H3: Step 2: Scope and wireframes
• H2: Frequently asked questions

And here is a problematic one: an H1 on the logo, another H1 on the banner heading, then an H4 because "it is the right size", and finally an H2 in the footer reading "Contact us". A screen reader will present a list of headings that makes no sense, and a search engine will struggle to work out what the main topic is.

How many H1s a page can have

The practical recommendation: one H1 per page, describing its topic. Older versions of the HTML5 specification suggested you could place a separate H1 inside every section or article and the outline would be calculated automatically. In practice, browsers and screen readers never implemented that outline algorithm, and it has since been removed from the HTML standard. So several H1s on one page give a screen reader user several "main topics" instead of one.

Google has said in the past that multiple H1s on a page won't cause indexing problems. In other words, this is mainly a question of clarity and accessibility, not a penalty. But when there is a single, clear H1, everyone benefits.

Why it matters

• Search engines use the heading structure to understand what the page is about and what each section covers;
• Screen readers let users jump from heading to heading, and if the order is broken, it is hard to find your way;
• An automatic table of contents, like the one next to this article, is built from H2 and H3 headings. A broken structure produces a broken table of contents.

The H1 heading and SEO: what you need to know

The H1 is the main heading of the page, and search engines treat it as an important signal about the topic. It is not a magic ranking button, but when it is missing, vague or identical across every page, it is harder for the algorithm to understand what the page is about and how it relates to the rest of the site.

H1 is not the title tag

It is important to separate two things. The title tag appears in the browser tab and usually as the blue headline in search results. The H1 is the heading the visitor sees at the top of the page itself. They can be identical or different. According to Google's documentation, when it decides which title link to show in results, it can also draw on the main visual title on the page and on the heading elements. So your H1 and title should describe the same topic, even if the wording differs. We explain the title and description shown in search results in more depth in our guide to search snippets and how to improve them.

Wording and length

There is no official length for an H1, but a good one describes the page in one short sentence, usually somewhere between 30 and 70 characters. It should answer the question "what will I find here?". "Welcome" or "Our services" are headings that tell neither the visitor nor the search engine anything.

Keywords without stuffing

Use the phrase people actually search for in your H1, but naturally. A heading like "Accountant for small businesses in Limassol – free first call" works far better than "Accountant Limassol accountant small business accountant tax Limassol". Keyword stuffing hurts readability and can look like manipulation. Spread related phrases across your H2 and H3 headings instead, where each one describes its own section.

Headings and AI-powered search

Systems such as Google's AI Overviews, ChatGPT and Perplexity pull passages from a page that answer a specific question. A section with a clear heading, especially a heading phrased as a question, followed by a direct answer in the first paragraph, is easier to identify and quote. That is why an FAQ block with H3 headings phrased as questions and a short answer under each one is one of the most useful structures today. We cover optimisation for AI search in detail in our guide GEO: how to appear in AI answers.

The paragraph tag p: structuring text properly

The p tag (short for paragraph) creates a paragraph: a complete block of text that usually expresses a single idea. On most websites text is the main part of the content, so p is one of the most common tags in the code.

What you can put inside a paragraph

HTML elements are broadly divided into inline and block elements. Inline elements sit within the line and don't break the flow of the text. Block elements always start on a new line and take up the full width of their container.

Inside a p you can place ordinary text and inline elements:

• a – a link;
• span – a marker for styling part of the text;
• em – emphasis, usually shown in italics;
• strong – important text, usually shown in bold;
• img – an image within the text;
• br – a line break inside the paragraph.

You cannot place another paragraph, headings, lists (ul, ol), tables, forms or a div inside a p. If a block element appears inside a paragraph, the browser closes the paragraph before it on its own. The result is invalid structure and unpredictable rendering, especially when your styling depends on that structure.

Why br is not a substitute for paragraphs

Sometimes, instead of several paragraphs, you get one long paragraph with lots of line breaks. This happens a lot when text is pasted from Word or Google Docs into the website editor. The result looks like separate paragraphs, but as far as the code is concerned it is one:

• a screen reader reads it all as a single block, with no pauses between ideas;
• it is hard to control the spacing between the "paragraphs" in CSS;
• on mobile the text can break in unexpected places.

The fix is simple: one idea, one paragraph. In visual editors that means pressing Enter, not Shift+Enter, between paragraphs.

p or div: what's the difference

• p is a paragraph of text. It says: "here is a complete idea";
• div is a container with no meaning of its own, a wrapper for other elements. You use it to group parts of the interface or to apply styling to them.

A product card in an online shop is a good example: a div wraps the whole card, and inside it there is a heading with the product name, a paragraph with a short description and a button. When there is no more suitable semantic tag, such as section, article, nav or footer, you use a div. But text that is read as a paragraph should be a p.

Headings and accessibility: what screen reader users hear

For people with visual impairments, headings are the signposts of a page. Screen readers such as NVDA, JAWS and VoiceOver let users:

• jump from heading to heading and quickly find the section they need (in NVDA, for example, with the H key);
• jump to headings of a specific level, for example only the H2s;
• open a list of every heading on the page and understand its structure without reading it all;
• hear the text paragraph by paragraph, with natural pauses, when the text is split into p elements rather than lines separated by br.

What the accessibility standards expect

The common reference point for web accessibility is the Web Content Accessibility Guidelines (WCAG), usually at level AA. In the European Union, the Web Accessibility Directive covers public-sector websites, and the European Accessibility Act, which has applied since June 2025, extends accessibility requirements to a range of private-sector services, including many online shops and other consumer-facing digital services. The harmonised European standard EN 301 549 is built on WCAG. Which rules apply to your business depends on your sector, size and country, so treat this as general orientation, not legal advice.

Two WCAG success criteria relate directly to our topic: 1.3.1 (Info and Relationships), which requires the structure you see on screen to be marked up in the code as well, and 2.4.6 (Headings and Labels), which requires headings to describe their topic. Text that looks like a heading but is marked up as a paragraph, or ordinary text marked up as a heading, is exactly what accessibility auditors look for.

Visually hidden headings for structure

Sometimes the design has no visible heading for a section, for example a product gallery or a grid of client logos. In that case you can add a heading that is hidden visually using a CSS class such as visually-hidden. It doesn't appear on screen, but screen readers and search engines recognise it. One important caveat: don't hide text this way purely for search engines. That counts as hidden content and damages the site's credibility.

For a broader look at website accessibility, including what the requirements are and how to test, see our guide to website accessibility for businesses.

Setting up headings in Webflow, WordPress and Wix

All the major website builders let you choose the heading level separately from its styling. The catch is that the defaults aren't always right, and ready-made templates sometimes ship with a broken structure.

Webflow

On a Heading element you choose the level (H1–H6) in the settings panel and control its appearance with classes. In the Client-First methodology we use, there are dedicated classes for this, such as heading-style-h2, so an H3 can look like an H2 without breaking the structure. On CMS template pages, such as a blog post, the H1 is usually bound to the item's name field, and headings inside the Rich Text field start from H2. It is also worth checking components that repeat across pages: a heading set as H1 inside a component will appear as an H1 on every page that uses it. Want a Webflow site with a clean structure from the ground up? Read about our Webflow development service.

WordPress

In the block editor (Gutenberg), the Heading block has a level selector, and on posts the post title usually acts as the H1, so headings inside the content should start from H2. In Elementor, the Heading widget has an HTML Tag setting that is separate from its styling. Check your theme as well: some themes mark the site name or logo as an H1 on every page, and footer and sidebar widgets often come with H2–H4 headings. We walk through building a WordPress site from scratch in our guide to creating a WordPress website.

Wix

In Wix and Wix Studio, the text style (theme) and the HTML tag are two separate settings. You can give text the look of a large heading and separately assign it the appropriate tag, or set it as a paragraph. It is worth going through every page and checking that no extra H1s are left over from the original template.

How to audit your site's heading structure

You can't see heading structure with the naked eye, so you need tools to check it. Most of them are free.

Tools for checking

• Lighthouse in Chrome DevTools: the accessibility report includes a check that flags headings that are not in sequentially descending order;
• Browser extensions such as WAVE or HeadingsMap show every heading on the page as a tree, including skipped levels;
• The W3C Markup Validation Service (validator.w3.org) finds nesting errors, such as block elements inside a paragraph and unclosed tags;
• Screaming Frog SEO Spider crawls the whole site and shows pages with no H1, pages with multiple H1s and pages with duplicate H1s;
• A manual check: turn on your computer's built-in screen reader (VoiceOver on a Mac, Narrator or NVDA on Windows) and try to navigate the page using headings only.

A five-step action plan

• Step 1: plan the structure before the design: for each page, write down the H1 and the H2–H3 headings, like a table of contents;
• Step 2: in your website builder, set up style classes that are separate from the tags, so you never have to "break" a heading to get the right size;
• Step 3: review repeating elements: header, footer, sidebar, components and CMS templates;
• Step 4: run Lighthouse and a heading-checker extension on your key pages, then crawl the whole site;
• Step 5: check again after every major update to a template or the home page.

Common heading structure mistakes

Choosing a heading by its size

The most common mistake of all: "this text needs to be small, so let's make it an H5". The fix: choose the tag by its place in the structure, and change the size in the styling.

The logo or tagline marked as H1 on every page

Then every page on the site has the same H1, and the page's real heading becomes secondary. The logo should be a link to the home page with alt text, not a heading.

Headings in the footer and sidebar

"Quick links", "Contact us" and "Follow us" as H2s or H4s show up in the heading list of every page. If they genuinely title regions of the page, that is fine, but in most cases styled text or properly marked-up navigation is enough.

The main heading inside an image

A banner with text "baked" into the image can look great, but search engines and screen readers don't read it as a heading. Write the H1 as real text above or next to the image.

Empty or duplicate headings

Empty headings are sometimes left over from a template, and then the screen reader announces a "heading" with nothing in it. Duplicate headings, such as ten sections all called "More details", don't help anyone find their way. Every heading should describe its own section.

Bold text instead of a heading

The reverse happens too: a bold line that works as a section heading but is marked up as a paragraph. To the eye it looks like a heading, but to a screen reader and a search engine it is just text. A sound heading structure also works hand in hand with internal linking: when sections are clearly marked, it is easier to link to them and build a table of contents from them.

How RJL Studio builds websites with the right structure

At RJL Studio we plan the heading structure as early as the scoping and wireframe stage, and we build websites in Webflow, WordPress and Wix with a complete separation between tags and styling. That way, the editors on your side can add content without breaking the structure. On existing sites we run a technical SEO and accessibility audit: we find duplicate headings, skipped levels, broken paragraphs and repeating components with the wrong tags, and we fix them in the templates rather than on a single page.

Want to check the structure of your own site? Read about our SEO services or get in touch and we will get back to you.

Frequently asked questions

Can a page have more than one H1?

Technically yes, and Google doesn't penalise it. But for clarity and accessibility it is better to have one H1 that describes the main topic, and an H2 for each major section.

Do I need to use all six heading levels?

No. On most pages H1, H2 and H3 are enough. Lower levels suit long, complex documents, and if you find you need them a lot, it is worth considering splitting the page.

What is the difference between the H1 and the title tag?

The title appears in the browser tab and usually in search results, while the H1 is the heading you see on the page itself. They can be worded differently, but both should describe the same topic.

Do headings affect Google rankings?

Headings help the search engine understand what the page is about and what each section covers. They don't guarantee rankings on their own, but a clear structure, together with high-quality content and fast loading, improves your chances of appearing in search results and in the answers of AI systems.

How do I check the heading structure of an existing site?

The quickest way is a browser extension such as HeadingsMap or WAVE, plus the Lighthouse accessibility audit. For a whole site, use a crawler such as Screaming Frog, which shows pages with no H1 or with several.