Heading Structure: Using H1, H2, and H3 Correctly

Headings describe relationships

Think of the outline as a reader choosing where to begin. The main page title identifies the topic. H2 sections divide that topic into useful tasks. An H3 explains a narrower part of the preceding H2. A reader should be able to scan the headings and understand the shape of the answer without guessing from font sizes.

W3C guidance explains that semantic heading ranks help people and assistive technologies navigate content. Avoid jumping from H2 to H4 when introducing a subsection. Returning from H3 to H2 closes the subsection and begins a new major section; that is normal. Repeated navigation and sidebar regions also need a consistent structure, so inspect them in context.

Why a tidy outline helps

A useful outline lets visitors move directly to confirmation steps, repairs, limitations, or examples. It also makes maintenance easier: an editor can add a subsection in the correct place instead of guessing which large text style to reuse. These are practical benefits even when search traffic is not the immediate goal.

This project uses one visible H1 for each article page. That is an implementation standard for a clear topic and predictable template output, not a claim that every second H1 triggers a Google penalty. A scanner warning is a reason to investigate semantics and duplication. It is not proof of a ranking loss or of an accessibility violation by itself.

Inspect the complete page outline

1. Open the exact preferred URL. Expand any relevant panels and inspect the headings in the rendered page, including repeated modules.
2. List the text and level of each heading. Check whether the supposed title is a real H1 or a paragraph with large styling.
3. Find which layer emits each H1: article template, menu page heading, shared banner, page builder, or body editor.
4. Read the headings without the paragraphs. Replace vague labels when the section purpose is unclear.
5. Check subsection nesting. Distinguish a skipped level while opening a subsection from a valid return to a higher-level section.

A clear outline and a confusing one

The example describes an outline, not HTML to paste into a CMS body. On this website, Joomla supplies the article H1 outside the body. The supplied article HTML therefore starts its heading structure with H2.

CLEAR
H1: XML Sitemaps
  H2: Confirm the problem
  H2: Repair the sitemap
    H3: Joomla checks
    H3: WordPress checks
  H2: Verify the repair

CONFUSING
H1: Site banner
H1: XML Sitemaps
  H4: Confirm the problem
  Bold paragraph: Repair the sitemap

Repair the responsible layer

1. Choose the actual page-topic heading. Preserve its useful text and determine whether the CMS template or the body should own it.
2. Remove the duplicate heading source locally. If a shared banner is only section branding, use the approved non-heading treatment rather than another H1.
3. Apply proper heading elements to section titles. Do not use bold paragraphs as substitutes where the text actually introduces a section.
4. Move subsection levels into a logical sequence. Rewrite weak headings so each describes what follows rather than repeating a keyword mechanically.
5. Keep design and semantics separate. Change an approved style class when the size is wrong; do not choose H4 simply because it looks smaller.
6. Check repeated components, FAQs, tables, and CTA titles. A component label can be a paragraph when it does not introduce a genuine new section.

Joomla and WordPress checks

Joomla

Check Show Title on the article and its route-owning menu item. Compare that with Show Page Heading and any page-heading text. Inspect the shared header module without assuming it should emit the article title. In this hub, article titles supply the unique H1, menu page headings stay hidden, and body headings begin with H2. Preserve the established Gantry layout.

WordPress

Inspect the theme template before adding an H1 block to a post. Many themes already render the post title as the main heading. In the block editor, select the appropriate heading level for each section and check reusable blocks or patterns for copied titles. A page builder may introduce another heading outside the standard post content.

Keep structure stable as pages grow

When adding an FAQ or troubleshooting note, place it under the section it actually expands. Do not attach every new paragraph to the end of the page or create a new H2 purely to make a callout look prominent. A longer guide can have more subsections without requiring more than one page topic.

Use stable, descriptive IDs for sections that reports or related guides link to. If you rename a heading, retain a compatible anchor where an existing deep link depends on it. Test that an anchor brings the reader to the intended explanation and that a sticky header does not make the target impossible to find.

Verify the result

Reopen the public route after clearing the relevant cache. Check that the article title appears once as H1, the body starts at H2, and nested sections remain logical. Test a heading-list view with assistive technology when available. Keyboard navigation and readable focus still need their own checks; a clean outline does not certify the entire page.

Rescan the same page and compare the detected headings with your manual inventory. Keep the evidence of which template or editor field caused the issue so future content copies do not recreate it. For text that is hard to interpret despite correct headings, review content clarity and context.

Primary references

Use these first-party references for the technical definitions and platform behavior discussed in this guide.

• W3C WAI: Headings
• Google Search Central: Title links
• Joomla User Guide