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

Sobre este problema HTML

O elemento <main> identifica o conteúdo principal de uma página — o conteúdo que está diretamente relacionado ou expande o tópico central do documento. De acordo com a norma viva HTML do WHATWG, um elemento <main> não deve aparecer como descendente de outro elemento <main>. Esta regra existe porque o propósito semântico de <main> é marcar uma única região de conteúdo exclusiva; aninhá-lo cria uma estrutura contraditória onde uma “área de conteúdo principal” existe dentro de outra.

Isto é importante por várias razões importantes:

Acessibilidade: Leitores de ecrã e outras tecnologias assistivas usam o marco <main> para permitir que os utilizadores saltem diretamente para o conteúdo principal. Quando existem múltiplos elementos <main> ou aninhados, esta navegação falha — a tecnologia assistiva pode reconhecer apenas um deles, ou pode apresentar uma hierarquia confusa de marcos “principal” ao utilizador.
Conformidade com normas: Navegadores e validadores aplicam o modelo de conteúdo da especificação HTML para <main>. Um <main> aninhado viola esse modelo de conteúdo e produz um erro de validação.
Clareza semântica: O elemento <main> carrega um significado específico. Aninhá-lo dilui esse significado e sinaliza uma incompreensão estrutural do documento tanto para máquinas como para outros programadores.

Este problema surge comumente ao compor páginas a partir de múltiplos templates ou componentes — por exemplo, quando um template de layout já envolve o conteúdo em <main> e um componente interno ou parcial também inclui o seu próprio elemento <main>. Também pode acontecer durante refatorização quando o código é movido entre ficheiros sem verificar a estrutura envolvente.

Para corrigir o problema, identifique o elemento <main> aninhado e substitua-o por um elemento mais apropriado. Se o conteúdo interno representa um agrupamento temático, use <section>. Se representa uma composição independente (como uma publicação de blogue ou comentário), use <article>. Se não é necessário nenhum significado semântico particular, um <div> simples funciona bem.

Exemplos

❌ Inválido: elementos `<main>` aninhados

<main>
  <h1>Bem-vindos</h1>
  <main>
    <p>Este elemento main aninhado é inválido.</p>
  </main>
</main>

O <main> interno é descendente do <main> externo, o que viola o modelo de conteúdo.

✅ Corrigido: `<main>` interno substituído por `<section>`

<main>
  <h1>Bem-vindos</h1>
  <section>
    <h2>Introdução</h2>
    <p>Esta secção é válida dentro de main.</p>
  </section>
</main>

❌ Inválido: `<main>` profundamente aninhado dentro de outros elementos

O aninhamento não tem de ser direto. Um <main> em qualquer lugar dentro de outro <main> desencadeia este erro:

<main>
  <h1>Dashboard</h1>
  <div class="content-wrapper">
    <article>
      <main>
        <p>Ainda inválido, mesmo estando aninhado vários níveis de profundidade.</p>
      </main>
    </article>
  </div>
</main>

✅ Corrigido: substituído por `<div>`

<main>
  <h1>Dashboard</h1>
  <div class="content-wrapper">
    <article>
      <div>
        <p>Agora válido com um elemento contentor neutro.</p>
      </div>
    </article>
  </div>
</main>

❌ Inválido: templates de componente cada um fornecendo `<main>`

Este padrão aparece frequentemente em frameworks onde um layout e um componente de página ambos definem <main>:

<!-- Template de layout envolve conteúdo da página -->

<main>
<!-- Saída do componente da página -->

  <main>
    <h1>Sobre Nós</h1>
    <p>A nossa história começa...</p>
  </main>
</main>

✅ Corrigido: `<main>` apenas no layout

<!-- Template de layout envolve conteúdo da página -->

<main>
<!-- Saída do componente da página -->

  <h1>Sobre Nós</h1>
  <p>A nossa história começa...</p>
</main>

Mantenha <main> ao nível que faz mais sentido para a sua arquitetura — tipicamente o layout mais externo — e remova-o de componentes internos. Se precisar de agrupar o conteúdo interno, use <section>, <article> ou <div> em vez disso.