Headings
Understand how to structure a page's content using the six HTML heading levels, and why heading choice affects accessibility and SEO, not just appearance.
Every well-organized document — a textbook, a legal brief, a news article — has a title, section headings, and subheadings that tell you how the content is structured before you read a single sentence. HTML gives you six heading elements, <h1> through <h6>, to build exactly that kind of structure. Headings are one of the first things you learn in HTML, and also one of the most commonly misused — because it's tempting to treat them as nothing more than 'make this text big and bold.' This lesson explains what headings actually do underneath the visuals, and how to use them the way browsers, screen readers, and search engines expect.
The Six Heading Levels
HTML provides six block-level heading elements: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. The number indicates rank, not just size — <h1> is the most important heading on the page (typically the main title), and <h6> is the least important (a deeply nested subheading). Browsers apply default styling that makes <h1> the largest and boldest, shrinking progressively down to <h6>, but that visual styling is just a convenience default — it can and often should be overridden with CSS.
The key idea to internalize is that headings describe a document outline, similar to a table of contents. If you wrote a book, you wouldn't have two 'Chapter 1' headings — you'd have one main title, then chapters, then sections within chapters, then subsections. HTML headings work the same way: one <h1> as the page's main topic, <h2> elements for its major sections, <h3> for subsections within those, and so on.
Heading Hierarchy: Why You Shouldn't Skip Levels
A correct heading hierarchy never skips a level going down. That means you should not jump from an <h2> straight to an <h4> without an <h3> in between. Doing so breaks the logical outline of the page, even if it looks fine visually (since CSS controls the actual appearance anyway).
Think of heading levels like a numbered outline: 1, 1.1, 1.1.1. If you suddenly wrote '1' then '1.1.1' with no '1.1', a reader — or a piece of software parsing that outline — would reasonably wonder what happened to the missing level. Screen readers and other assistive technology build exactly this kind of outline from your headings, so a skipped level isn't just sloppy, it's actively confusing to users who rely on that structure to navigate.
It's fine to skip levels going back up — after an <h3>, you can return directly to another <h2> for the next major section. The rule is specifically about not skipping levels on the way down into more nested content.
Accessibility: How Screen Readers Use Headings
Sighted users can visually scan a page — glancing at bold, large text to figure out where the sections are. Screen reader users can't do that by sight, so screen readers offer a feature that lets a user pull up a list of all headings on the page and jump directly to any of them, similar to jumping between chapters in an ebook.
This only works well if headings are used correctly. If a developer uses a <div> styled to look like a heading instead of an actual <h2> element, that 'heading' is invisible to this navigation feature — a screen reader user has no way to jump to it and no way to know it represents a new section. Conversely, if a developer uses <h3> tags purely because they like the font size, without those tags actually representing subsection titles, screen reader users get a confusing, meaningless outline of the page.
In short: headings are a navigation and orientation tool for assistive technology, not a font-sizing tool. Using them correctly is one of the single highest-impact things you can do for web accessibility.
SEO Relevance
Search engines also parse your heading structure to understand what a page is about and how it's organized. The <h1> in particular is treated as a strong signal of the page's main topic — search engines give it more weight than ordinary paragraph text. A well-organized hierarchy of <h2> and <h3> elements helps search engines (and tools like featured-snippet generators) understand the sub-topics covered on the page.
Best practice for SEO is generally one <h1> per page that clearly states the page's main subject, followed by a logical, non-skipping hierarchy of subheadings that mirror the actual structure of the content — the same structure that benefits accessibility also benefits search visibility, because both are really asking the same question: 'what is this content actually organized like?'
The Common Mistake: Headings as a Font-Size Shortcut
The single most common heading mistake is choosing a heading level based purely on how big or bold the text looks, rather than what the text represents in the document's structure. For example, picking <h4> for a piece of text simply because '<h4> looks about the right size' for a sidebar note — even though that text isn't actually a subsection heading at all.
The correct approach is to first decide the semantic structure of your content (what are the sections? what are the subsections?), assign heading levels based on that structure, and then use CSS entirely separately to control font size, weight, color, and spacing. Structure and appearance should be decided independently — HTML for structure, CSS for appearance.
Heading Element Syntax
Each heading element requires both an opening and closing tag. Headings are block-level elements — they automatically start on a new line and take up the full available width. There should generally be exactly one <h1> per page.
<h1>Main Page Title</h1>
<h2>Major Section</h2>
<h3>Subsection</h3>
<h4>Sub-subsection</h4>
<h5>Rarely used</h5>
<h6>Rarely used</h6>Code Examples
A minimal page with a single main heading followed by body text — the simplest correct use of a heading. Expected result: Renders as large, bold text reading 'Welcome to My Blog' followed by a normal paragraph below it. Even though the browser makes <h1> look big automatically, the value comes from what it communicates about structure, not from its size.
<h1> announces the page's primary topic; there is only one on this page.
A page title followed by two major sections, each introduced with an <h2> — a correct two-level hierarchy with no skipped levels. Expected result: Displays 'Recipe Collection' as the largest heading, with 'Breakfast' and 'Dinner' as smaller subheadings above their respective paragraphs.
Each <h2> represents a sibling section under the same <h1>, mirroring how a table of contents would list 'Breakfast' and 'Dinner' as equal-level chapters.
A three-level hierarchy: <h1> for the page, <h2> for meal categories, and <h3> for individual recipes within each category — no level is skipped at any point. Notice the hierarchy resets: after finishing the Breakfast subsections, a new <h2> (Dinner) starts a fresh branch, and its own <h3> (Pasta) is still valid without needing another <h2> in between.
Pancakes and Omelette are both <h3> elements nested conceptually under the Breakfast <h2>, forming a clean outline: 1, 1.1, 1.2, 2, 2.1.
A realistic article layout showing how a real page combines an <h1> title, top-level <h2> sections, and nested <h3> subsections — exactly the kind of structure both search engines and screen readers rely on to summarize and navigate the page.
Common mistake: A common real-world mistake here would be making 'Grind Size for Drip Coffee' an <h2> instead of <h3> just because the author wanted it to look slightly bigger — that would incorrectly imply it's a top-level section equal in importance to 'Brewing Methods'.
<h1>Welcome to My Blog</h1>
<p>This is the introduction paragraph of the homepage.</p><h1>Recipe Collection</h1>
<h2>Breakfast</h2>
<p>Start your day right with these morning favorites.</p>
<h2>Dinner</h2>
<p>Hearty meals to end the day.</p><h1>Recipe Collection</h1>
<h2>Breakfast</h2>
<h3>Pancakes</h3>
<p>Fluffy pancakes made from scratch.</p>
<h3>Omelette</h3>
<p>A protein-packed way to start the morning.</p>
<h2>Dinner</h2>
<h3>Pasta</h3>
<p>A quick weeknight classic.</p><article>
<h1>How to Brew Better Coffee at Home</h1>
<p>Published by a coffee enthusiast with ten years of home-brewing experience.</p>
<h2>Choosing Your Beans</h2>
<p>The single biggest factor in coffee quality is bean freshness.</p>
<h2>Grinding</h2>
<h3>Grind Size for Drip Coffee</h3>
<p>Aim for a medium grind, similar to coarse sand.</p>
<h3>Grind Size for Espresso</h3>
<p>A much finer grind is required to build proper pressure.</p>
<h2>Brewing Methods</h2>
<p>Different methods extract flavor differently.</p>
</article>Heading Hierarchy as an Outline
Indentation mirrors nesting depth — the same structure a screen reader's heading list or a search engine's outline parser will build from your markup.
<h1> Recipe Collection
<h2> Breakfast
<h3> Pancakes
<h3> Omelette
<h2> Dinner
<h3> Pasta
Correct: 1 -> 2 -> 3, never skipping a level going down
Incorrect: <h1> -> <h4> (skips h2 and h3)Important Rules
Use only one <h1> per page, representing the page's main topic.
Never skip a heading level when nesting deeper (e.g., don't go from <h2> directly to <h4>).
Choose heading levels based on document structure, not desired font size — control appearance with CSS instead.
It is fine to return to a higher-level heading (e.g., another <h2>) after finishing a nested subsection.
Every heading's text should meaningfully describe the section that follows it.
Screen Reader Navigation in Practice
Popular screen readers like NVDA and JAWS let users press a single key to jump between headings, and a separate command to pull up a full list of all headings on the page, similar to a table of contents. Experienced screen reader users rely on this heavily to skip past navigation menus and jump straight to the content they want. A page with a clean, non-skipping heading hierarchy is dramatically faster and less frustrating to navigate this way than a page where headings are inconsistent or misused for styling.
<h1>Blog</h1> <h4>Latest Posts</h4> <h1>Blog</h1> <h2>Latest Posts</h2>
Jumping from <h1> straight to <h4> skips <h2> and <h3>, breaking the logical outline even though it might visually 'look fine' with CSS.
<h3>Warning: Read Before Continuing</h3> <p><strong>Warning: Read Before Continuing</strong></p>
Using a heading purely because bold, larger text is wanted — with no actual section following it — misuses headings as a styling shortcut instead of a structural tool.
[Identify the Error] A developer wrote the following markup for a product page. What is the structural problem with it? <h1>Wireless Headphones</h1> <h2>Product Features</h2> <h4>Battery Life</h4> <p>Up to 30 hours on a single charge.</p> A. There is nothing wrong — headings can be any level as long as the text makes sense B. The heading level jumps from <h2> directly to <h4>, skipping <h3>, which breaks the logical outline C. You cannot have an <h4> element anywhere on a page that also has an <h1> D. The <p> element should not appear directly after a heading
B. The heading level jumps from <h2> directly to <h4>, skipping <h3>, which breaks the logical outline — Going from <h2> to <h4> skips <h3>, which breaks the document outline that screen readers and search engines rely on. It should have used <h3>Battery Life</h3> instead, since it's a subsection of 'Product Features'.
Build a simple 'About Us' page outline using headings only (no paragraph text needed): a main title, two major sections ('Our Story' and 'Our Team'), and under 'Our Team', two subsections for 'Leadership' and 'Engineering'.
<h1>About Us</h1> <h2>Our Story</h2> <h2>Our Team</h2> <h3>Leadership</h3> <h3>Engineering</h3>
You'll need one <h1>, two <h2> elements, and two <h3> elements nested conceptually under the second <h2>.