HTML headings

Learn more

HTML headings are the <h1> through <h6> elements used to identify the title of a web page and the titles of its sections and subsections. They create a logical content hierarchy that helps users, browsers, screen readers, and search engines understand how the page is organized.

The number in a heading element represents its position in the hierarchy, not its required font size. <h1> is the highest-level heading, <h2> introduces a section under the H1, <h3> can divide an H2 section into smaller parts, and the remaining levels describe progressively deeper relationships.

What are HTML headings used for?

Headings divide content into meaningful sections and communicate the relationships between them. They allow visitors to scan a page, find a relevant section, and understand what each part of the content covers.

Properly implemented headings:

identify the primary topic of the page;
divide long content into readable sections;
show which topics are primary and which are subordinate;
support navigation for people who use screen readers;
help search engines interpret page content;
can be used to generate tables of contents and links to individual sections;
improve the readability of articles, service pages, instructions, documentation, and product pages.

A heading element should be used when the text genuinely labels a section that follows it. Headings should not be selected simply to make text larger or bold.

What do the H1-H6 levels mean?

HTML provides six native heading levels:

H1 identifies the primary topic of a page or document;
H2 begins a major section belonging to the topic introduced by the H1;
H3 begins a subsection within a particular H2 section;
H4 divides an H3 section into more specific topics;
H5 can be used for deeper levels in complex documentation;
H6 is the lowest native heading level available in HTML.

These levels do not determine keyword importance or text size. They describe the document structure. An H3 should not be selected because its default appearance happens to match the design. If the text introduces a section directly under the H1, it should be an H2, while its visual appearance should be controlled separately with CSS.

What does a correct heading hierarchy look like?

A good heading structure resembles an organized table of contents. The H1 names the entire document, H2 headings divide it into major parts, and H3 headings develop topics within individual H2 sections.

For example:

<main>
    <article>
        <h1>WCAG Audits and Implementation</h1>
        <p>Introduction to the service...</p>

        <h2>Scope of a WCAG Audit</h2>
        <p>Description of the scope...</p>

        <h3>Automated Testing</h3>
        <p>Description of the tests...</p>

        <h3>Manual Testing</h3>
        <p>Description of the tests...</p>

        <h2>Remediation Process</h2>
        <p>Description of the process...</p>

        <h3>Implementing Improvements</h3>
        <p>Description of the changes...</p>

        <h3>Accessibility Retest</h3>
        <p>Description of the retest...</p>
    </article>
</main>

After an H3 subsection ends, the document can move directly to another H2. This does not skip a level. It closes the previous subsection and starts a new major section.

Can heading levels be skipped?

Heading levels should not be skipped without a structural reason when moving deeper into the content. An H1 should normally be followed by an H2 section, and a subsection belonging to that H2 should use H3. Moving directly from H2 to H4 suggests that an intermediate H3 level is missing.

Incorrect structure:

<h1>Website Design Services</h1>
<h3>Scope of Services</h3>
<h5>Wireframe Design</h5>

Corrected structure:

<h1>Website Design Services</h1>
<h2>Scope of Services</h2>
<h3>Wireframe Design</h3>

Moving from a lower level back to a higher one is correct. An H2 can follow an H4 when it closes the preceding subsections and introduces a new major part of the document.

A warning about a skipped level should always be reviewed in the context of the entire page. The heading numbers alone are not enough to determine whether the structure is logical.

What is the purpose of an H1?

The H1 should clearly identify the main subject of the page. On a service page, it may be the name or central message of the offer. In an article, it is usually the publication title. On a product page, it is generally the product name, while a category page commonly uses the category name.

A strong H1 should:

accurately describe the page content;
make sense without relying entirely on the visual layout;
distinguish the page from other pages on the website;
match the visitor’s intent and the actual content;
serve as the logical parent of the headings that follow.

A logo or company name in the global site header does not need to be an H1 on every page. It is usually a link to the homepage, while the H1 in the main content identifies the subject of the page currently being viewed.

Can a page have more than one H1?

The HTML standard allows a document to contain multiple top-level headings. This does not mean that every page should use several H1 elements.

For a typical business website, online store, article, or landing page, one clear H1 is usually the most understandable approach. It makes the primary title easy to identify and simplifies the management of templates and CMS-generated content.

Two H1 elements do not automatically cause invalid HTML, a WCAG failure, or an indexing problem. Their presence should still be reviewed to determine whether both genuinely represent top-level parts of the document. A second H1 often appears accidentally when a WordPress template outputs the page title and an editor adds the same title again within the content.

How is an H1 different from the title element?

The <title> element appears in the document’s <head> and determines the text used in places such as the browser tab. It may also be used as one of the sources for the title shown in search results.

The H1 appears in the visible page content and identifies its main subject. The two should communicate the same general meaning, but they do not need to contain identical wording.

<title>WCAG Audits for Websites and Online Stores | TRAVI</title>

<main>
    <h1>WCAG Audits and Accessibility Implementation</h1>
</main>

The title element can include the brand name and be optimized for how the page may appear in search results. The H1 can use more natural wording designed for visitors reading the page itself.

What is the difference between a heading and a header?

The <header> element is a container for introductory or navigational content belonging to a page or section. It can contain a logo, navigation, a heading, a summary, publication details, or other information.

The <header> element is not an H1-H6 heading and does not create a level in the document’s heading hierarchy. The similar English terms “heading” and “header” often cause the two concepts to be confused.

<header>
    <a href="/">Company Name</a>
    <nav aria-label="Main navigation">...</nav>
</header>

<main>
    <h1>Ecommerce Website Design</h1>
</main>

Should a heading level depend on its appearance?

A heading level should be selected according to its place in the content structure, not its visual design. HTML defines the meaning of an element, while CSS controls its presentation.

An H2 can be visually smaller than an H3 when a particular component requires that treatment. Likewise, large text in a hero section does not have to be an H1 if it functions as a supporting statement, tagline, or decorative message and the actual page title appears elsewhere.

For example, semantics and presentation can be handled independently:

<h2 class="heading heading-large">Scope of Our Work</h2>
<h3 class="heading heading-small">Interface Design</h3>

CSS classes can control font size, typeface, color, spacing, and weight without changing the semantic heading level.

How do headings affect accessibility?

People who use screen readers can open a list of headings and navigate directly between them. This provides an overview of the page and allows users to skip content they do not currently need.

If text looks like a heading but is marked up as a regular <div>, <span>, or bold paragraph, assistive technology may not receive its intended purpose. The opposite problem occurs when an H2 or H3 is used only to enlarge text even though it does not introduce a section.

Correct heading markup supports WCAG requirements related to programmatically identifying information and relationships and providing descriptive headings and labels. It is one of the fundamental areas reviewed during WCAG audits and accessibility implementation.

Headings should also remain readable when text is enlarged, the screen orientation changes, or the website is viewed on a mobile device. A responsive layout may change the appearance and position of elements, but it should not accidentally alter their logical hierarchy.

How should headings be written?

A heading should clearly communicate what the following section contains. Generic wording such as “More,” “Information,” “Explore,” or “Learn More” may be difficult to understand when presented outside the context of the full page.

Instead of:

<h2>Learn More</h2>

use a descriptive heading such as:

<h2>How Does a Website Accessibility Audit Work?</h2>

A heading does not need to summarize the entire section. It should, however, distinguish that section from the rest of the page and accurately represent the content that follows.

Does every part of a page need a heading?

Not every interface element requires a separate H2 or H3. A heading should introduce a meaningful content section, not every paragraph, button, message, individual icon, or form field.

Too many headings can make a document as difficult to understand as too few. If every short piece of text is marked as a heading, the heading list no longer provides a useful outline of the page.

Text identifying a form field should usually be a <label>, an image caption should use <figcaption>, and a button’s name should be part of the <button> element. Headings should not replace these purpose-built elements.

How should headings be used in cards and reusable components?

The heading level of a card title depends on where the component appears in the overall page structure. If a list of articles follows the H1 without a separate section heading, article titles may be H2 elements. If the list appears below an H2 labeled “Latest Articles,” the card titles should generally be H3 elements.

<h1>Knowledge Base</h1>

<section>
    <h2>Latest Articles</h2>

    <article>
        <h3>How to Improve Website Performance</h3>
    </article>

    <article>
        <h3>How to Prepare for a WCAG Audit</h3>
    </article>
</section>

In a component system, permanently hard-coding an H2 into every module may not be appropriate. A component can accept an approved heading level as a parameter or provide variants intended for specific contexts. The value should still be controlled so that an editor cannot output an arbitrary or invalid HTML element.

How should headings be used in accordions, tabs, and modals?

The titles of substantial panels can be headings when they genuinely introduce content sections. In an accordion, the button that expands a panel can be placed inside the appropriate heading element:

<h2>
    <button type="button" aria-expanded="false" aria-controls="panel-1">
        How Does the Project Process Work?
    </button>
</h2>

<div id="panel-1" hidden>
    <p>Description of the project process...</p>
</div>

The fact that an element opens a modal, tab, or panel does not automatically make it a heading. The deciding factor is whether the text names a distinct section of information. Its level should follow the position of the component within the full page hierarchy.

How do HTML headings affect SEO?

Headings can help search engines identify the main topic of a page and understand its important sections. The H1 may be one of the signals used to interpret page content and determine the title displayed in search results.

This does not mean that placing a keyword in the H1 or adding a large number of H2 elements will automatically improve rankings. The primary purpose of headings is to organize useful content and help visitors find answers.

When preparing headings with SEO in mind:

identify the page’s primary topic in the H1;
use natural language that matches how the audience describes the subject;
use H2 and H3 elements for meaningful subtopics;
avoid repeatedly inserting the same keyword;
do not create headings solely for search engines;
keep the H1, title element, and actual page content aligned;
do not hide keyword-filled headings from users.

A logical structure also benefits people who scan search results and page content quickly. SEO, usability, and accessibility follow a similar principle in this area: headings should be descriptive, accurate, and organized.

How should headings be used in WordPress?

In WordPress, the H1 is often generated automatically by the template from the title of a page, post, product, or category. When that happens, content entered in the editor should generally begin with H2.

Common WordPress heading problems include:

adding the page title as another H1 in the editor;
selecting H3 because of its appearance instead of its hierarchical position;
formatting a heading as a bold paragraph;
automatically generating an H2 in every ACF component regardless of context;
changing heading levels between desktop and mobile layouts;
outputting a visually hidden but still accessible duplicate title;
failing to include an H1 in a custom page template.

An ACF component can provide a controlled choice between H2, H3, and H4. The selected value should be validated in the template before the HTML element is generated. Font size and visual presentation are best managed through a separate set of CSS classes.

During frontend development, it is also important to verify that plugins, widgets, and third-party blocks do not introduce their own H1 elements or unexpected gaps in the hierarchy.

Can ARIA be used to create a heading?

When using a native H1-H6 element is not possible, an element can be given a heading role and an explicit level with aria-level:

<div role="heading" aria-level="2">Scope of Services</div>

The native element remains the simpler and preferred solution:

<h2>Scope of Services</h2>

A native H2 does not need an additional role="heading" or aria-level="2" because its meaning and level are already provided by HTML.

HTML does not include an <h7> element. ARIA can describe deeper levels, but such a complex hierarchy is usually difficult to use. Simplifying the content structure is a better solution for most websites.

What are the most common heading mistakes?

Frequently encountered problems include:

no H1 identifying the subject of the page;
several accidental H1 elements generated by a template and editor;
using heading elements only to change the appearance of text;
creating visual headings with <div> or <p> elements;
moving directly from H1 to H3 or H4;
selecting levels according to font size;
empty headings left behind by an editor or component;
headings hidden with aria-hidden="true" even though their text is visible;
repeating identical, vague headings;
marking every widget title or minor element as an H2;
using a heading that does not match the section content;
providing different hierarchies on mobile and desktop;
overlooking headings that appear only after a modal, tab, or accordion is opened.

Reviewing the structure only by looking at the visual design is another mistake. Two pieces of text may look identical even though one is a correctly marked-up H2 and the other has no heading semantics.

How can the heading structure of a page be tested?

A review should cover both the HTML markup and the meaning of each heading. An automated report cannot determine whether a heading accurately represents the content that follows it.

A heading audit can include the following steps:

generate a list of all headings in their source order;
confirm that the main subject of the page is clearly identified;
review the relationships between H1, H2, H3, and deeper levels;
investigate warnings about skipped levels;
compare the HTML elements with the visual presentation;
review headings in navigation, sidebars, footers, and reusable components;
open accordions, tabs, modals, and other dynamic elements;
test the page at different viewport widths;
review the heading list with a screen reader or accessibility tool;
confirm that every heading is descriptive and matches its section.

Automated tools can identify a missing H1, empty elements, and some level gaps. A final evaluation still requires a manual review of the context and the relationships between sections.

What are the best practices for using H1-H6?

The most important principles can be summarized as follows:

use headings to communicate structure, not to style text;
provide a clear top-level heading for the page;
use one primary H1 on a typical page;
begin major sections with H2;
use H3-H6 only when the content genuinely requires deeper levels;
do not skip levels when moving deeper into the hierarchy;
return to the appropriate higher level after a subsection ends;
separate HTML semantics from presentation controlled by CSS;
write specific, understandable section titles;
review headings generated by components, templates, and the CMS;
prefer native H1-H6 elements over recreating headings with ARIA;
evaluate the hierarchy manually instead of relying exclusively on automated tests.

A good heading structure does not need to use all six levels. A simple page may require only one H1 and several H2 elements. What matters is whether the selected levels accurately communicate the organization of the content and help visitors understand the page.