HTML Headings and Hierarchy

HTML provides six levels of headings, <h1> through <h6>, used to organize content into a logical outline — much like chapters and subheadings in a book. Headings are not a font-size shortcut; they are structural markers that describe how content is nested and related.

Getting heading hierarchy right matters more than most beginners expect: it directly affects how screen reader users navigate a page and how search engines interpret the relative importance of your content.

Why it matters

Headings are the outline of a page. Screen-reader users navigate by jumping from heading to heading, and search engines read them to work out what the page is about. Choosing a heading level because of its size, instead of its place in the outline, breaks both.

The h1–h6 Hierarchy

<h1> represents the most important heading on the page — typically the page's main title — and should generally appear only once per page. <h2> introduces major sections beneath it, <h3> introduces subsections within an <h2>, and so on down to <h6>. The numbers describe nesting depth, not visual size — although browsers do apply a default size that decreases as the number increases, that styling can and should be overridden with CSS rather than by picking a heading level for its default appearance.

Why Skipping Levels Hurts Accessibility and SEO

Screen reader users frequently navigate a page by jumping between headings, and many screen readers let users request only a specific level ("show me all h2s"). If a page jumps from an <h1> straight to an <h4> because the h4 "looked right" visually, that user loses the logical structure of the page. Search engines also use heading hierarchy to understand topic structure and relative importance, so skipped or disordered levels can weaken how well a page's content is understood and indexed.

• Never choose a heading level purely because of its default font size — style headings with CSS instead.
• Do not skip levels going down (h1 to h3 with no h2) just to reach a desired visual weight.
• Keep exactly one h1 per page representing its primary topic.

Example

<h1>Complete Guide to HTML Headings</h1>

<h2>Why Headings Matter</h2>
<p>Headings create a navigable outline of your content.</p>

<h2>Heading Levels</h2>
<h3>h1 through h3</h3>
<p>Used for the main title and major sections.</p>
<h3>h4 through h6</h3>
<p>Used for deeper nested subsections.</p>

Renders a page with a large main title, two major section headings of decreasing size, and nested subsection headings — while also giving screen readers a clean, logically ordered outline to navigate.

Exercise

The heading levels below were chosen for their size, and the outline makes no sense. Fix them so that there is one h1, the two main sections are h2, and the sub-section is h3.

Expected result: an outline of Python Course, then Basics (with Variables under it), then Projects.

<h3>Python Course</h3>

<h1>Basics</h1>
<p>Start here.</p>

<h4>Variables</h4>
<p>Names that refer to values.</p>

<h1>Projects</h1>
<p>Build something real.</p>

<h1>Python Course</h1>

<h2>Basics</h2>
<p>Start here.</p>

<h3>Variables</h3>
<p>Names that refer to values.</p>

<h2>Projects</h2>
<p>Build something real.</p>

Quick quiz

Interview questions