Verificação HTML: Secção não tem cabeçalho. Considere usar elementos "h2"-"h6" para adicionar cabeçalhos identificativos a todas as secções.

Sobre este problema HTML

O elemento <section> define um agrupamento temático independente dentro de um documento — pense em capítulos, painéis com separadores, ou partes distintas de uma página como “Sobre Nós” ou “Contacto”. De acordo com a especificação HTML, cada <section> deve geralmente incluir um cabeçalho que identifique o seu conteúdo. Quando uma <section> não tem cabeçalho, o validador gera este alerta porque o elemento não está a ser usado conforme pretendido.

Isto importa por várias razões:

Acessibilidade. Leitores de ecrã e outras tecnologias assistivas usam cabeçalhos para construir um esquema da página. Quando um utilizador navega por secções, o cabeçalho é o que identifica cada uma. Uma <section> sem cabeçalho aparece como uma “secção sem título” no esquema do documento, o que torna difícil ou impossível para utilizadores de tecnologia assistiva compreender a estrutura da página ou saltar para o conteúdo de que necessitam.

Semântica. Todo o propósito da <section> é agrupar conteúdo relacionado sob um tema comum, e esse tema deve ser rotulado com um cabeçalho. Se o seu conteúdo não precisa de um cabeçalho, pode não ser uma verdadeira “secção” no sentido semântico, e um <div> (que não tem significado semântico) pode ser mais adequado.

Esquema do documento. Navegadores e ferramentas que geram esquemas de documentos dependem de cabeçalhos dentro de elementos de seccionamento. Cabeçalhos em falta criam lacunas no esquema, reduzindo a utilidade da estrutura da página.

Como corrigir

Você tem três opções principais:

Adicionar um cabeçalho — Coloque um elemento <h2>–<h6> no início da <section>. Esta é a solução preferida quando a secção genuinamente representa um bloco temático de conteúdo.
Usar aria-label ou aria-labelledby — Se um cabeçalho visível não se adequa ao seu design, pode rotular a secção para tecnologias assistivas usando um atributo ARIA. Isto resolve a preocupação de acessibilidade, embora o validador possa ainda mostrar o alerta.
Mudar para <div> — Se o conteúdo não representa uma secção significativa e identificável do documento, substitua <section> por <div>. Não há expectativa de que um <div> tenha um cabeçalho.

Exemplos

❌ Secção sem cabeçalho

Isto despoleta o alerta porque nenhuma <section> tem cabeçalho:

<h1>All about guitars</h1>
<section>
  <p>Acoustic, electric, classical... we have them all!</p>
</section>
<section>
  <p>Analog, digital, portable...</p>
</section>

✅ Corrigido: adicionar cabeçalhos a cada secção

<h1>All about guitars</h1>
<section>
  <h2>Guitar types</h2>
  <p>Acoustic, electric, classical... we have them all!</p>
</section>
<section>
  <h2>Amplifiers</h2>
  <p>Analog, digital, portable...</p>
</section>

✅ Corrigido: usar `aria-label` quando um cabeçalho visível não é apropriado

<section aria-label="Guitar types">
  <p>Acoustic, electric, classical... we have them all!</p>
</section>

✅ Corrigido: usar `aria-labelledby` para referenciar um elemento existente

<section aria-labelledby="guitar-heading">
  <span id="guitar-heading" class="visually-hidden">Guitar types</span>
  <p>Acoustic, electric, classical... we have them all!</p>
</section>

✅ Corrigido: substituir por `<div>` quando não são necessárias semânticas de secção

Se está apenas a usar o elemento como um envolvente de estilo e o conteúdo não forma um grupo temático distinto, use um <div> em vez disso:

<h1>All about guitars</h1>
<div class="content-block">
  <p>Acoustic, electric, classical... we have them all!</p>
</div>
<div class="content-block">
  <p>Analog, digital, portable...</p>
</div>

Como regra geral, opte por <section> quando o seu conteúdo tem um tópico claro que merece um cabeçalho, e use <div> quando precisar de um contentor genérico para propósitos de layout ou estilo.