Verificação HTML: O elemento "main" não deve aparecer como descendente do elemento "section".

Sobre este problema HTML

O elemento <main> serve um papel estrutural específico: identifica o conteúdo primário da página, distinto de elementos repetidos como cabeçalhos, rodapés e navegação. Devido a este propósito único, a especificação HTML limita rigorosamente onde <main> pode aparecer na árvore do documento. Aninhar <main> dentro de um elemento <section> viola estas regras porque <section> representa um agrupamento temático de conteúdo — colocar <main> dentro dele implica que o conteúdo dominante da página é meramente uma subsecção de algo mais, o que é semanticamente contraditório.

De acordo com o padrão HTML living da WHATWG, um elemento <main> hierarquicamente correto é aquele cujos elementos ancestrais são limitados a <html>, <body>, <div>, <form> (sem nome acessível), e elementos personalizados autónomos. Isto significa que <main> não pode ser descendente de <article>, <aside>, <footer>, <header>, <nav>, ou <section>.

Porque isto é importante

Acessibilidade: Leitores de ecrã e tecnologias assistivas usam o elemento <main> como um marco para permitir que os utilizadores saltem diretamente para o conteúdo primário. Quando <main> está incorretamente aninhado dentro de <section>, as tecnologias assistivas podem interpretar mal a estrutura do documento, tornando a navegação mais difícil para utilizadores que dependem de marcos.
Conformidade com padrões: Os navegadores são tolerantes e renderizam a página independentemente, mas o significado semântico fica quebrado. Funcionalidades futuras dos navegadores ou ferramentas que dependem da estrutura correta do documento podem não funcionar como esperado.
Clareza da estrutura do documento: O elemento <main> deve situar-se claramente no nível superior da sua hierarquia de conteúdo, tornando imediatamente óbvio tanto para programadores como para máquinas qual parte da página é o conteúdo primário.

Regras adicionais para `<main>`

Além da restrição de ancestrais, lembre-se que um documento não deve ter mais de um elemento <main> visível. Se usar múltiplos elementos <main> (por exemplo, numa aplicação de página única), todos exceto um devem ter o atributo hidden especificado.

Exemplos

Incorreto: `<main>` aninhado dentro de `<section>`

Esta estrutura coloca <main> como descendente de <section>, o que desencadeia o erro de validação:

<body>
  <header>
    <h1>O Meu Website</h1>
  </header>
  <section>
    <main>
      <h2>Bem-vindos</h2>
      <p>Este é o conteúdo primário da página.</p>
    </main>
  </section>
</body>

Correto: `<main>` como irmão de `<section>`

Mova <main> para fora da <section> para que seja um filho direto de <body>:

<body>
  <header>
    <h1>O Meu Website</h1>
  </header>
  <main>
    <h2>Bem-vindos</h2>
    <p>Este é o conteúdo primário da página.</p>
  </main>
  <section>
    <h2>Tópicos Relacionados</h2>
    <p>Conteúdo temático adicional vai aqui.</p>
  </section>
</body>

Correto: elementos `<section>` dentro de `<main>`

Se o seu conteúdo primário estiver dividido em secções temáticas, aninhe os elementos <section> dentro de <main> — não o contrário:

<body>
  <header>
    <h1>O Meu Website</h1>
  </header>
  <main>
    <section>
      <h2>Introdução</h2>
      <p>Uma visão geral do tópico.</p>
    </section>
    <section>
      <h2>Detalhes</h2>
      <p>Um mergulho mais profundo no assunto.</p>
    </section>
  </main>
  <footer>
    <p>© 2024 O Meu Website</p>
  </footer>
</body>

Correto: `<main>` envolvido num `<div>`

Se o seu layout requerer um elemento envolvente à volta de <main>, um <div> é um ancestral válido:

<body>
  <div class="layout-wrapper">
    <header>
      <h1>O Meu Website</h1>
    </header>
    <main>
      <h2>Bem-vindos</h2>
      <p>Este é o conteúdo primário da página.</p>
    </main>
  </div>
</body>

O princípio chave é simples: <main> define o conteúdo dominante de todo o documento, por isso pertence ao nível superior da sua hierarquia de conteúdo. Elementos de seccionamento como <section>, <article>, <aside>, <nav>, <header>, e <footer> nunca devem envolver <main> — em vez disso, devem ser colocados como filhos ou irmãos dele.