HTML Headings: How to Use h1 Through h6
HTML gives you six heading tags, <h1> through <h6>. <h1> is the top-level title of the page and <h6> is the lowest sub-level. They do two jobs at once: they give readers visible titles and subtitles to skim, and they give browsers, screen readers, and search engines a machine-readable outline of what's on the page. Used in order, they turn a wall of text into a document with structure.
This is the written version of my HTML headings video. It's embedded near the bottom.
Key Takeaways
- There are six levels:
<h1>(most important) to<h6>(least important). - Use exactly one
<h1>per page for its main title. - Don't skip levels. An
<h2>section's subsections are<h3>, not<h4>. - Screen-reader users navigate by jumping between headings, so the order is structure, not styling.
- Search engines use your headings to understand how the page is organized.
The six levels
<h1>Page title</h1>
<h2>A major section</h2>
<h3>A subsection inside that section</h3>
<h4>A point inside the subsection</h4>
<h5>Rarely needed</h5>
<h6>Rarely needed</h6>Each heading tag is a pair: an opening <h2> and a closing </h2> with the text between them. By default the browser renders <h1> largest and boldest, and each level down gets smaller. That default styling is why people think of headings as sizes. What the number really controls is rank: <h1> is the most important heading on the page, <h6> the least. It works like a document outline, or a table of contents.
Use one h1 per page
The <h1> is the single main title of the page, the answer to "what is this page about?" Give each page one, and only one.
<body>
<h1>How to Repot a Fiddle-Leaf Fig</h1>
<h2>When to repot</h2>
<p>...</p>
<h2>What you'll need</h2>
<p>...</p>
<h2>Step by step</h2>
<h3>1. Water the day before</h3>
<p>...</p>
<h3>2. Ease the plant out</h3>
<p>...</p>
</body>Everything below the <h1> is a section (<h2>) or a subsection (<h3>, <h4>) of it. Multiple <h1> tags on one page muddy that signal: now the page claims to be about several top-level things at once.
Don't skip levels
Go down the levels one at a time. If you're inside an <h2> section and you need a sub-heading, it's an <h3>. Jumping straight from <h2> to <h4> because <h4> "looks the right size" breaks the outline.
<!-- Wrong: jumps h2 -> h4 -->
<h2>What you'll need</h2>
<h4>Tools</h4>
<!-- Right -->
<h2>What you'll need</h2>
<h3>Tools</h3>If an <h3> looks too big or too bold for your design, that's a CSS problem. Change the styling and keep the structure correct.
Why the order matters: accessibility
Screen-reader users don't scroll through a page top to bottom. One of the most common ways they navigate is to pull up a list of the page's headings and jump straight to the section they want, the same way a sighted reader's eye skips down the page. That list is built entirely from your <h1> through <h6> tags and their order.
If the headings are out of order, or a section has no heading, or a <div> is styled to look like a heading but isn't one, that navigation breaks. Correct, in-order headings are one of the cheapest, highest-impact accessibility wins on any page.
Why the order matters: SEO
Search engines parse your headings to work out the structure and topic of the page. The <h1> tells them the page's subject; the <h2> tags tell them the main subtopics it covers. A page with a clear <h1> and well-labeled <h2> sections is easier for a search engine to understand, and easier for it to pull a specific section into a featured snippet or an AI answer.
Don't stuff keywords into headings. Just write each heading so it honestly describes what its section says, and the structure takes care of itself.
Headings vs. the head tag
One naming collision worth clearing up: heading tags (<h1> through <h6>) are visible content in the <body>. The <head> tag is a different thing entirely: an invisible container at the top of the document for the page title, metadata, and stylesheet links. Same first four letters, unrelated jobs.
Where to go next
Headings pair naturally with paragraphs (<p>) and lists (<ul>, <ol>) to structure a full article. After that, the <head> tags lesson covers the metadata side of a page. Keep working through the course in order.
FAQ
How many heading levels does HTML have?
Six: <h1> through <h6>. <h1> is the top-level title and each number down is a lower sub-level. Most pages only need <h1> through <h3>.
Can I have more than one h1 on a page?
Use one. The <h1> is the page's main title. Everything else is an <h2> section or an <h3>/<h4> subsection under it.
Is it bad to skip heading levels?
Yes. Going from <h2> straight to <h4> breaks the page's outline, which is what screen readers and search engines rely on. If a heading looks wrong at its correct level, fix it with CSS.
Do headings affect SEO?
Indirectly but really. Search engines use your <h1> and <h2> tags to understand the page's topic and structure. Clear, honest headings make a page easier to rank and easier to pull into a snippet.
What's the difference between a heading tag and the head tag?
Heading tags (<h1> through <h6>) are visible titles inside the page body. The <head> tag is an invisible section at the top of the document that holds the page title, metadata, and links to stylesheets.
