One h1 Per Page: Naming the Main Topic
Give every page a single, clear top-level heading.
One h1 Per Page: Naming the Main Topic is a free Web Accessibility Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Web Accessibility Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
The Page Title You Hear
The h1 is your page's headline. Screen reader users often jump straight to it to learn what this page is actually about. 🔎
One Main Topic
A page is about one main thing, so it gets one h1. Think of it as the title on a book cover, not a chapter heading.
<h1>Your Order Summary</h1>h1 Is Not About Size
Pick h1 for meaning, never for looking big. If you want smaller text, style it with CSS and keep the heading level correct.
It Names, Not Decorates
A good h1 describes the content below it. Reading the h1 alone should tell a user roughly what they will find on this page.
Match the Tab Title
Your h1 should echo the browser tab title. When both agree, users feel confident they landed on the right page.
<title>Your Order Summary - Shop</title>
<h1>Your Order Summary</h1>Not the Logo
Your site name in the corner usually is not the page topic. The h1 belongs to this page's content, not your brand logo. 🏷️
Why One, Not Many
Several h1 tags blur the outline, so users cannot tell the real topic from a section. One clear top level keeps the page focused.
Where It Lives
Place the h1 high in your main content, before the sections it introduces. It sets the stage for everything that follows.
<main>
<h1>Annual Report 2025</h1>
<h2>Highlights</h2>
</main>Never Skip Straight to h2
Starting a page at h2 leaves the outline without a root. Give the page its single h1 first, then nest sections below it.
Keep It Honest
Write the h1 in plain words a stranger would understand. Skip clever puns that hide what the page really does.
Empty h1 Is a Trap
An h1 that wraps only an image or icon may read as nothing. Give it real text, even if you hide that text visually.
Quick Check
How many h1 elements should a typical page have?
Recap
You learned the h1 names a page's one main topic, sits high in the content, and is chosen for meaning over size. One page, one h1. ✅
Frequently asked questions
Is the “One h1 Per Page: Naming the Main Topic” lesson free?
Yes — the full text of “One h1 Per Page: Naming the Main Topic” is free to read here on the web, and the Web Accessibility Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Web Accessibility Academy course, upgrade to CoddyKit PRO.
What will I learn in “One h1 Per Page: Naming the Main Topic”?
Give every page a single, clear top-level heading. You practise Web Accessibility Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Web Accessibility Academy?
No prior experience is required. Web Accessibility Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “One h1 Per Page: Naming the Main Topic” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Web Accessibility Academy lesson?
Yes. Every Web Accessibility Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- One h1 Per Page: Naming the Main Topic
- Nesting Levels Without Skipping
- Headings Are Navigation, Not Just Big Text
- Auditing a Page Outline by Ear