How should I choose between h1, h2, and other heading levels?
Quick answer
Choose a heading level according to the section’s place in the outline: use h1 for the page’s main heading, h2 for sections beneath it, and h3 for subsections within an h2 section, continuing as needed. Keep the sequence logical; don’t pick a tag just because its default text looks the right size. Use CSS to change appearance. Headings also help people navigate content with assistive technology. [S1]
The question, the details, the next step.
I’m writing a page and can’t tell whether a section title should be h2 or h3. What’s the simple rule?
Think of heading levels as an outline, not a menu of font sizes. The page’s main heading is h1. A main section beneath it is h2; a subsection belonging to that section is h3. If that subsection has its own nested section, that can be h4. HTML provides six heading levels, h1 through h6, for progressively nested parts of the content. [S1]
Ask what the heading is *under* in the outline. If it is a peer of the other main sections, it should have the same level. If it sits inside one of those sections, it should be one level deeper. For visual size, use CSS rather than changing the heading level. [S1]
Could you show that with a sample outline? I’m drafting a guide to planning a weekend trip.
Here’s one possible outline. The travel topic is just an example; the important part is the nesting:
- h1 — Plan a Weekend Trip
- h2 — Choose a destination
- h3 — Set your travel radius
- h3 — Compare destination options
- h2 — Build an itinerary
- h3 — Pick a few priorities
- h4 — Leave room for breaks
- h3 — Group activities by area
- h2 — Prepare before leaving
- h3 — Make a packing list
Each h2 is a main section under the page heading. The h3s belong to particular h2 sections, and the h4 belongs to the h3 “Pick a few priorities.” That parent-child relationship—not how large the text should look—determines the levels. [S1]
I sometimes jump from h2 to h4 because I want a smaller heading. Is that a problem, and how should I make a heading smaller instead?
Don’t skip to h4 just to get smaller text. In the outline, a reader would expect an h3-level subsection before an h4-level subsection. Headings act as signposts for assistive-technology navigation, so a logical hierarchy helps communicate how the content is organized. [S1]
Keep the semantically appropriate heading level, then adjust its appearance with CSS. For example, if a section is a subsection under an h2, use h3 even if you want it to look modest. If it is actually a peer of the h2 sections, keep it at h2 and style it to match your design. The tag expresses structure; styling expresses appearance. [S1]
What should I check before publishing? I also have headings that are really just labels for a button or a short note.
Review the page as an outline, not only as a visual design. Ask whether every heading describes the content that follows and whether its level matches its relationship to the surrounding sections. A label for a button or a brief note may not be a section heading at all; don’t promote text to a heading just to make it look prominent. Use the element that fits its purpose, and style it separately if needed.
For the trip guide, a quick check would be: “Build an itinerary” is at the same level as “Choose a destination,” so both are h2. “Group activities by area” belongs within “Pick a few priorities” only if the content outline actually nests it there; otherwise, make it a peer h3 under “Build an itinerary.” Choose the structure that matches the content, not the example’s indentation by default.
This guidance covers heading hierarchy and presentation. It doesn’t determine the best wording for a heading or prescribe a particular page design. [S1]
A practical checklist
Identify the page’s main heading and use it as the top-level entry in your outline.
Give peer sections the same heading level.
Move one level deeper for a genuine subsection; avoid skipping levels.
Use CSS, not a different heading tag, to change text size or appearance.
Check that each heading introduces the content that actually follows.
Review the outline separately from the page’s visual styling.
A few more useful answers
Should every page have exactly one h1?
The cited guidance describes heading levels and their logical hierarchy; it does not establish a universal rule about how many h1 elements every page must contain. Use a clear outline that reflects the content, and consult your project’s requirements if it has additional conventions.
Can I make an h3 look larger than an h2?
Yes. Heading level communicates the content hierarchy, while CSS controls visual appearance. Choose the level that matches the section’s place in the outline, then style it to suit the design. [S1]
Do headings help people navigate a page with assistive technology?
Yes. Headings provide signposts for assistive-technology navigation, which is one reason to keep the heading hierarchy logical rather than choosing levels for their default font sizes. [S1]
Sources
References used for this guide.
- [S1] Headings and paragraphs: Using heading levels logically developer.mozilla.org · Checked