Website Heading Structure: H1, H2 and H3 Explained
Plan your website heading structure with clear H1, H2 and H3 sections, a service-page example, and practical checks before publishing changes to your site.
A clear website heading structure gives each page a main topic, divides it into sections, and places supporting details underneath. Use H1 for the page's main heading, H2 for major sections, and H3 for subsections within them. For a business owner, the practical test is simple: can someone scan those headings and find what they need before contacting you?
Understand website heading structure
Headings describe relationships between pieces of content. An H2 starts a major section; an H3 belongs to the H2 above it. A later H2 starts another section at the same level.
The W3C heading guide explains that headings communicate organization and support navigation, including through assistive technology. That makes the outline useful beyond its visual appearance.
Think of your page as a short conversation with a buyer. Its headings should identify the offer, answer the main questions, and make the next step easy to locate.
Build an outline for one service page
Imagine a cleaning business preparing an office-cleaning page. A workable draft could be:
- H1: Office cleaning in Panama City
- H2: Choose a cleaning schedule
- H3: Weekly office cleaning
- H3: Daily office cleaning
- H2: What your cleaning visit includes
- H2: Areas we serve
- H2: Request a cleaning quote
The two schedules belong under the same section because they answer one question: which arrangement fits this office? Coverage and quote requests are separate questions, so they receive their own H2 headings.
Before using this example, replace the services and location with what your business actually offers. If you provide only one schedule, remove the comparison instead of inventing a second option.
Write a short answer beneath each heading. Ask a colleague to find the service area using only the outline. If they choose the wrong section, rename it. The W3C writing tips recommend short headings that describe and group related content.
Choose heading levels separately from font sizes
Making a sentence large or bold does not automatically turn it into a heading. The editor must assign the appropriate heading level in the page's underlying HTML.
Look for settings such as “Heading 2” or “H2.” Ask your designer to adjust the appearance separately if that style looks too large. MDN's heading reference advises using styling controls for text size instead of choosing heading elements for their appearance.
Keep price labels, button text, and short decorative phrases as ordinary text unless they genuinely introduce sections. Otherwise, a person navigating by headings may encounter a confusing list of disconnected words.
Check the published page with your team
Review one important page before applying changes across the site:
- Read the heading list alone. Confirm that it explains the page's subject and sequence.
- Check the assigned levels. Use your editor's outline if available, or ask your developer for the rendered H1–H6 list.
- Match subsections to their parents. Keep each H3 within the topic introduced by its preceding H2.
- Review the mobile layout. Check wrapping, spacing, and whether each heading remains beside the content it introduces.
Use recurring customer questions to improve the outline. Your team can keep conversation context in Nexlab Business, which supports contacts and notes. A repeated question about service coverage may reveal a missing section or an unclear label.
Frequently asked questions
How many H1 headings should a page have?
One clear H1 is a practical default. MDN recommends a single main H1 describing the page, with lower levels organizing its sections.
Can I put an H3 directly after an H1?
Avoid skipping levels when opening a subsection. Introduce its H2 parent first. Returning from H3 to H2 is fine when starting a new major section.
Does every section need an H3?
No. Use H3 only when an H2 section contains distinct subtopics. A short section may need just its heading and a paragraph.
How do I check headings without writing code?
Start with the editor's heading controls or document outline. For confirmation, request a heading list from the published page; visual size alone is insufficient.
Give every section a clear job
Good website heading structure starts with useful answers in a sensible order. Prepare one page outline, verify its levels, and review it on mobile. Explore Nexlab's website options and bring that outline to the conversation about your business website.