Headings são uma hierarquia, não um tamanho de fonte

O erro que parece totalmente correto visualmente

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

Estilizado assim, o h3 parece um heading grande e importante, e o h1 parece um rótulo pequeno: visualmente, isso lê corretamente. Estruturalmente, está invertido, e o tema recorrente dos últimos dois cursos se aplica com força total: h1–h6 carregam significado independente de qualquer CSS, como header/main/footer/article carregavam. Escolher um nível de heading por como ele parece, em vez do que ele significa, produz a mesma categoria de mentira contra a qual essas tags avisavam.

O que um heading codifica

Um heading é uma posição numerada no esboço da página, de 1 a 6. Todo heading vira o papel de acessibilidade heading, com um level igual ao número.

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

Confira qualquer heading no painel Accessibility das DevTools, a ferramenta que os dois últimos cursos usaram para marcos. Esse papel e esse nível aparecem seja qual for o CSS.

Por que isso importa tanto quanto os marcos importavam

Todo leitor de tela importante oferece uma lista de headings. Abra-a em qualquer página e ela mostra cada heading, na ordem do documento, com o nível. É um dos jeitos mais comuns de usuários de leitor de tela navegarem numa página longa. Eles percorrem a lista de headings, como quem enxerga passa o olho na página, e pulam para a seção que precisam.

Lista de headings de uma página de produto:
H1  Blue T-Shirt
  H2  Description
  H2  Reviews
  H2  You Might Also Like

Um heading estilizado pequeno ainda aparece nessa lista, embora quem enxerga possa confundi-lo com texto comum. Uma div estilizada enorme, assunto do fim desta aula, nunca aparece nela, porque não é um heading.

Headings também alimentam mecanismos de busca e ferramentas do navegador

Mecanismos de busca usam os headings para entender como a página está organizada, junto com o title e a meta description do curso de Tags de metadados. Modos de leitura e extensões de sumário também remontam a estrutura da página a partir dos headings.

A tag que parece um heading e não é

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

Estilizada como um <h2> de verdade, ela não entra na lista de headings e não tem papel heading. Mecanismos de busca a tratam como texto comum. Quem enxerga não nota a diferença; todo outro leitor da página nota.

Como este curso está organizado

• Aula 2: construindo uma hierarquia de heading de verdade, com um único h1 e sem níveis pulados
• Aula 3: strong e em, para importância e ênfase
• Aula 4: b e i, quando só a aparência importa
• Aula 5: mark, small, del, ins, sub e sup
• Aula 6: code, kbd, samp, var, abbr e time
• Aula 7: formatando uma descrição de produto real, de ponta a ponta

Pontos-chave

• O nível de um heading (h1–h6) codifica a posição dele no esboço da página. Nunca escolha um nível pelo tamanho da fonte.
• Todo heading mapeia para um papel de acessibilidade heading com um level correspondente, conferível nas DevTools do mesmo jeito que os marcos dos últimos dois cursos.
• Leitores de tela oferecem uma lista de headings para navegação. Um heading estilizado pequeno ainda aparece nela; uma div estilizada nunca aparece.
• Mecanismos de busca e recursos do navegador, como modos de leitura e extensões de sumário, também dependem de tags de heading de verdade.