Verificação HTML: Considere usar o elemento "h1" apenas como cabeçalho de nível superior (todos os elementos "h1" são tratados como cabeçalhos de nível superior por muitos leitores de ecrã e outras ferramentas).

Sobre este problema HTML

Os elementos de cabeçalho HTML <h1> a <h6> definem a hierarquia de cabeçalhos de um documento. O elemento <h1> representa o cabeçalho de nível mais alto, e cada nível subsequente (<h2>, <h3>, etc.) representa uma subsecção mais profunda. Esta hierarquia é fundamental tanto para acessibilidade como para estrutura do documento.

A especificação HTML5 uma vez introduziu um “algoritmo de esquema de documento” que permitiria que múltiplos elementos <h1> fossem automaticamente delimitados pelos seus elementos de seccionamento pai (<section>, <article>, <nav>, <aside>). Sob este modelo, um <h1> dentro de uma <section> aninhada seria tratado como um cabeçalho de nível inferior. No entanto, nenhum navegador ou tecnologia de assistência jamais implementou este algoritmo. O algoritmo de esquema foi eventualmente removido da especificação HTML do WHATWG. Na prática, leitores de ecrã e outras ferramentas tratam cada <h1> numa página como um cabeçalho de nível superior, independentemente do aninhamento.

Isto é importante por várias razões:

Acessibilidade: Utilizadores de leitores de ecrã navegam frequentemente por cabeçalhos para obter uma visão geral do conteúdo de uma página. Quando existem múltiplos elementos <h1>, a lista de cabeçalhos torna-se plana e pouco clara, dificultando a compreensão da estrutura da página e a localização de conteúdo específico.
SEO: Motores de busca usam a hierarquia de cabeçalhos para compreender a estrutura da página e a importância do conteúdo. Múltiplos elementos <h1> podem diluir o sinal semântico do seu tópico principal da página.
Conformidade com padrões: Embora usar múltiplos elementos <h1> não seja um erro de validação, o validador W3C levanta isto como um aviso porque é amplamente considerada uma boa prática reservar o <h1> para o único cabeçalho de nível superior da página.

Para corrigir este aviso, siga estas diretrizes:

Use exatamente um <h1> por página para descrever o tópico ou título principal.
Use <h2> para secções principais abaixo dele, <h3> para subsecções dentro dessas, e assim por diante.
Não salte níveis de cabeçalho (por exemplo, saltar de <h1> para <h3> sem um <h2>).

Exemplos

Incorreto: múltiplos elementos `<h1>`

Este exemplo usa <h1> dentro de cada elemento de seccionamento, o que ativa o aviso. Leitores de ecrã apresentarão os três cabeçalhos no mesmo nível, perdendo a hierarquia pretendida.

<h1>My Blog</h1>
<section>
  <h1>Latest Posts</h1>
  <article>
    <h1>How to Write Accessible HTML</h1>
    <p>Writing semantic HTML is important for accessibility.</p>
  </article>
  <article>
    <h1>Understanding CSS Grid</h1>
    <p>CSS Grid makes complex layouts straightforward.</p>
  </article>
</section>

Correto: hierarquia adequada de cabeçalhos

Use um único <h1> para o título da página e aninhe cabeçalhos subsequentes usando os níveis apropriados.

<h1>My Blog</h1>
<section>
  <h2>Latest Posts</h2>
  <article>
    <h3>How to Write Accessible HTML</h3>
    <p>Writing semantic HTML is important for accessibility.</p>
  </article>
  <article>
    <h3>Understanding CSS Grid</h3>
    <p>CSS Grid makes complex layouts straightforward.</p>
  </article>
</section>

Incorreto: `<h1>` aninhado dentro de uma secção sem um cabeçalho pai

Mesmo um único <h1> aninhado profundamente dentro de conteúdo de seccionamento pode ativar este aviso se a estrutura sugerir que não é o cabeçalho principal da página.

<section class="about">
  <article>
    <h1>Article heading</h1>
    <p>Lorem ipsum dolor sit amet.</p>
  </article>
</section>

Correto: secção com o seu próprio cabeçalho e cabeçalho de artigo adequadamente classificado

<section class="about">
  <h1>About</h1>
  <article>
    <h2>Article heading</h2>
    <p>Lorem ipsum dolor sit amet.</p>
  </article>
</section>

Correto: estrutura de página completa com hierarquia clara de cabeçalhos

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Company Homepage</title>
</head>
<body>
  <header>
    <h1>Acme Corporation</h1>
  </header>
  <main>
    <section>
      <h2>Our Services</h2>
      <h3>Web Development</h3>
      <p>We build modern, accessible websites.</p>
      <h3>Design</h3>
      <p>Our design team creates beautiful interfaces.</p>
    </section>
    <section>
      <h2>About Us</h2>
      <p>We have been in business since 2005.</p>
    </section>
  </main>
</body>
</html>

Nesta estrutura, leitores de ecrã apresentarão um esquema claro e navegável: um cabeçalho de nível superior seguido de subcabeçalhos adequadamente aninhados que refletem a organização lógica do conteúdo.