H1–H6 Heading Hierarchy in Elementor: How to Structure a Page Correctly

What the H1–H6 Hierarchy Means

HTML headings have six levels, from H1 to H6. H1 identifies the main topic of the page, H2 marks the primary sections, H3 indicates subsections within an H2, and H4–H6 are used for deeper levels of nesting.

This structure is similar to the table of contents of a document. If a page explains how to create a website, its H1 might be “How to Create a WordPress Website,” while H2 headings could be “Choosing a Domain,” “Installing WordPress,” and “Configuring the Design.” H3 headings would then describe individual steps within those sections.

Headings should not be used only as decorative elements. Their purpose is to mark the beginning of a meaningful content block, not simply to make text bold or smaller.

• H1 — the main topic or title of the material.
• H2 — major logical sections of the page.
• H3 — subsections belonging to a specific H2.
• H4–H6 — additional levels for a complex, multi-level structure.

How to Set a Heading Level in Elementor

In Elementor, the heading level is set not through the font size, but through the HTML Tag option in the Heading widget. Open the required heading widget, go to its content settings, and select the appropriate tag: H1, H2, H3, or another available option.

Then open the style settings and select Typography. Here you can change the font size, weight, line height, letter case, and other visual properties. These changes do not affect the semantic heading level.

For example, a service card title may be H3 according to the page structure but have a size of 20 px, while an H2 section heading may be 18 px in a particular version of the design. This is not an error: the HTML structure and visual hierarchy can differ.

• Choose the Heading widget rather than a regular text block when the element is a genuine heading.
• Assign the required level using the HTML Tag option.
• Configure the size and appearance in Typography.
• Check tablet and mobile values separately if the design is responsive.

An Optimal Heading Structure for a Page

For most pages, a structure using H1, H2, and H3 is sufficient. H1 should describe the entire page rather than an individual visual block. On a typical service page, it might be the name of the service; on an article, its title; and on a category page, the category name.

Place the main sections at the H2 level after H1. If a section contains several independent parts, use H3 headings. There is no need to add an H2 or H3 to every small piece of text if it does not have a separate content-related purpose.

Going from H2 directly to H4 without a clear reason is generally best avoided. It creates a skipped level and may make the structure harder to understand. At the same time, a single skipped level does not automatically make a page unusable: what matters more is that headings describe the content logically and are not placed randomly.

• A page will usually have one primary H1.
• Each H2 should identify a separate major topic.
• Use H3 only as a subordinate level belonging to a specific H2.
• Do not create a heading if it is not followed by a corresponding meaningful content block.

Example of a Service Page Structure

H1: WordPress Website Development. H2: What the Service Includes. H3: Structure Planning. H3: Page Design. H3: Technical Configuration. H2: Work Process. H3: Requirements Analysis. H3: Development and Testing. H2: Frequently Asked Questions.

In this example, each H3 belongs to the nearest H2, and all sections together develop the topic of the page established by the H1.

H1 in Elementor and Common WordPress Specifics

A page should have a clear main heading, but how it is implemented depends on the template and page type. On a post page, the H1 is often generated from the post title, while a custom template may generate it through a separate Heading widget.

Before adding a custom H1, check whether the theme or template already outputs one automatically. If you keep the automatic heading and add another identical one, the page may contain duplicate H1 headings. This is not always a critical technical problem, but the structure is often unnecessary and can create confusion.

On the home page, the H1 may be the company name, the primary offer, or a short description of the website’s purpose. A logo, menu name, footer slogan, or button label does not necessarily need to be a heading.

• Check whether the theme or website template adds an H1 automatically.
• Do not make a logo, button, or decorative text an H1 without a meaningful reason.
• Do not duplicate the page title in a separate widget if the template already displays it.
• On a landing page, the H1 should describe the main offer rather than each individual section.

Common Heading Hierarchy Mistakes

The most common mistake is choosing H4, H5, or H6 only because the tag has a smaller default size. This is unnecessary in Elementor: you can achieve the required appearance through Typography without changing the document logic.

Another issue is using multiple H1 headings for different blocks on one page. Technical systems may still process such pages, but for a clear structure it is better to have one distinct main heading with subordinate sections beneath it.

It is also unhelpful to turn every short label into a heading. For example, card captions, button text, decorative phrases, or form field names are not always part of the content structure.

The order should not be determined solely by design either: H2 first, then H4, followed by H1 in the footer is not a logical hierarchy. The visual placement of blocks should not change the logic of the levels.

• Do not use H4–H6 as a way to make text smaller.
• Do not add an H1 to every card or block.
• Do not replace regular paragraphs and decorative labels with headings.
• Do not evaluate the structure only by the font size displayed on screen.
• Do not assign the same HTML Tag to every widget without checking its role.

How to Check Headings Before Publication

The check should be performed not only in the Elementor editor, but also on the published or preview version of the page. Make sure that visible headings actually correspond to the assigned HTML tags and that a heading has not been added automatically by the theme or a plugin.

A useful practical test is to read the page using only its headings. If the sequence of H1, H2, and H3 headings conveys a clear meaning without the main text, the structure is probably sound. If the headings look like a random collection of promotional phrases, they should be reviewed.

For an additional check, use accessibility auditing tools or browser extensions that display the page’s heading list. These tools can help identify a missing H1, duplicates, incorrect levels, and hidden headings.

Check the mobile version as well. Responsive font sizing may change, but the HTML heading level should remain logical on all devices.

• Create a list of all headings in the order in which they appear on the page.
• Check that there is one clear H1.
• Determine whether each H2 describes a separate section.
• Make sure each H3 belongs to the appropriate H2.
• Read the page in a mode where visual design does not affect your assessment of the structure.

Why Correct Headings Matter for SEO and Accessibility

Headings alone cannot replace high-quality content or guarantee search rankings. However, a logical structure helps search engines identify the main topics of a page, the relationships between sections, and the purpose of individual blocks.

Headings are especially important for accessibility. Screen reader users can move between headings to find the section they need quickly. If headings are replaced with merely styled paragraphs, this type of navigation becomes less convenient.

A correct hierarchy also makes a website easier to maintain. Another editor can understand the page structure more quickly, and a design change will not require replacing HTML tags simply because font sizes have changed.

• Semantic headings improve navigation for screen reader users.
• Structured content is easier to analyze and edit.
• The heading level should reflect the content role, not the visual style.
• SEO depends on the entire content and technical condition of the website, not only on H1–H6.