Unit 2 · HTML: structure and meaning
HTML heading levels are not font sizes
h1 to h6 are levels in an outline, like chapter and section numbers. Pick the level for where the text sits in the structure, then set its size with CSS.
The mix-up
What people often think
“Heading levels are font sizes.”
What the tutor says
h1 to h6 are levels in an outline, like chapter and section numbers. Size is a CSS decision. A blind visitor would hear your big text announced as a new section.
How it works
Screen reader users often move through a page by its headings. Big text marked up as an h2 gets announced as a new section; a real section title styled as plain bold text gets skipped.
One h1 names the page. Sections below it use h2, their subsections h3, and so on, without skipping levels. If you want an h3 to look larger, change its CSS, not its level.
An example
<h1>Corner Bakery</h1>
<h2>Bread</h2>
<h3>Sourdough</h3>
<h2>Pastries</h2>Close cousins of this mix-up
The tutor watches for these in the same lesson.
“Every big line should be an h1.”
One h1 names the page. Sections below it use h2.
Practise it with a tutor watching
Elements that mean something
Pick header, nav, main, article and footer for what content is, not how it looks.
Free, no account needed.