ReferenceReferencebeginner5 min

HTML Headings

Answer-first: the six levels, their defaults, and the element’s quick facts.

You will learn

The levels, their semantics, default rendering, and the element’s DOM facts — at a glance.

<h1>: Page / document title. One per page.
<h2>: Major section.
<h3>: Sub-section of an h2.
<h4>: Sub-section of an h3.
<h5>: Rarely needed — deep nesting.
<h6>: The lowest level. Almost never required.

The six levels

Property	Value
Content category	Flow content, heading content, palpable content
Permitted content	Phrasing content (text, <a>, <span>, <em>…)
Permitted parents	Any element that accepts flow content
Implicit ARIA role	heading (with aria-level = tag number)
DOM interface	HTMLHeadingElement
Default display	block
Default margin	Top + bottom, shrinking with level

Element quick facts

Tag	Approx. size	Default weight
h1	2.00em	bold
h2	1.50em	bold
h3	1.17em	bold
h4	1.00em	bold
h5	0.83em	bold
h6	0.67em	bold

Default font-size in most browsers (relative to body)

HTML

<h1>Site or page title</h1>
<h2>Section</h2>
<h3>Subsection</h3>

Canonical usage

Reference

The whole HTML reference

Every element and concept, answer-first.

HTML Headings

h1 through h6 are the page’s table of contents. Use them for structure, never for size — that’s what CSS is for.

Reference·intermediate·18 min

h1–h6 are instances of HTMLHeadingElement. They take no special attributes — only the global set and ARIA — but there’s real depth in how they form the document outline and what you can do with them from JavaScript.

Reference·beginner·2 min

HTML Headings

Headings, distilled to what you must remember.

Liked this one?

Pass it on

Share on X Follow on GitHub

Discussion

Be the first to ask

Your questions stay private with the team. We can pin answers to share with everyone.

No pinned answers yet for this tutorial.