Headings are a hierarchy, not a font size

The mistake that looks completely fine visually

<h3 style="font-size: 2rem; font-weight: bold;">Featured Products</h3>
<h1 style="font-size: 1rem;">Blue T-Shirt</h1>

Styled this way, the h3 looks just like a big, important heading, and the h1 looks like a small label: visually, this reads correctly. Structurally, it's backwards, and the last two courses' running theme applies at full force: h1–h6 carry meaning independent of any CSS, just like header/main/footer/article did. Choosing a heading level for how it looks, rather than what it means, produces the same category of lie those tags warned against.

What a heading encodes

A heading is a numbered rank in the page's outline, 1 through 6. Every heading maps to the accessibility role heading, with a level matching the number.

<h1>  → role: heading, level: 1
<h2>  → role: heading, level: 2
<h3>  → role: heading, level: 3

Check any heading in DevTools' Accessibility panel, the tool the last two courses used for landmarks. This role and level show up whatever CSS is applied.

Why this matters as much as landmarks did

Every major screen reader offers a dedicated headings list: pull it up on any page, and it shows every heading, in document order, with its level indicated. It's one of the most common ways screen reader users navigate a long page. They skim the headings list, as a sighted user skims the page, then jump to the section they need.

Headings list for a product page:
H1  Blue T-Shirt
  H2  Description
  H2  Reviews
  H2  You Might Also Like

A heading styled small still appears in this list, though sighted readers may mistake it for body text. A div styled huge, covered at the end of this lesson, never appears in it, because it isn't a heading.

Headings also feed search engines and browser tools

Search engines use headings to understand how a page is organized, alongside the title and meta description from the Metadata Tags course. Reader modes and outline extensions also rebuild a page's structure from its headings.

The tag that looks like a heading and isn't one

<div class="fake-heading">Featured Products</div>

Styled like a real <h2>, this adds nothing to the headings list and has no heading role. Search engines treat it as body text. A sighted user can't tell the difference; every other reader of the page can.

How this course is organized

• Lesson 2: building a real heading hierarchy, with one h1 and no skipped levels
• Lesson 3: strong and em, for importance and stress
• Lesson 4: b and i, when only the look matters
• Lesson 5: mark, small, del, ins, sub and sup
• Lesson 6: code, kbd, samp, var, abbr and time
• Lesson 7: formatting one real product description end to end

Key takeaways

• A heading's level (h1–h6) encodes its rank in the page's outline. Never pick a level for its font size.
• Every heading maps to a heading accessibility role with a matching level, checkable in DevTools just like landmarks in the last two courses.
• Screen readers offer a headings list for navigation. A heading styled small still appears there; a styled div never does.
• Search engines and browser features such as reader modes and outline extensions also rely on real heading tags.