Um documento não deve incluir mais de um elemento “main” visível.

O elemento <main> representa o conteúdo dominante e único de um documento — o conteúdo primário que está diretamente relacionado com ou expande o tópico central da página. Ter mais de um elemento <main> visível cria ambiguidade: navegadores, leitores de ecrã e outras tecnologias assistivas usam <main> para identificar a área de conteúdo primário, e múltiplas instâncias visíveis tornam pouco claro qual bloco de conteúdo é verdadeiramente o principal.

Isto é particularmente importante para a acessibilidade. Os utilizadores de leitores de ecrã frequentemente dependem da navegação por marcos para saltar diretamente para o conteúdo principal de uma página. Quando existem múltiplos elementos <main> visíveis, este atalho torna-se pouco fiável ou confuso, pois o utilizador não tem forma de saber qual <main> contém o conteúdo que procura.

Existem cenários legítimos onde múltiplos elementos <main> fazem sentido — por exemplo, em aplicações de página única (SPAs) onde diferentes vistas são trocadas dinamicamente usando JavaScript. A especificação HTML acomoda isto permitindo múltiplos elementos <main> desde que apenas um seja visível de cada vez. Os outros devem ser ocultados usando o atributo hidden.

Como corrigir

• Se você só precisa de uma área de conteúdo principal, remova os elementos <main> extra e mantenha apenas um.
• Se você precisa de múltiplas vistas (por exemplo, para conteúdo com abas ou navegação estilo SPA), adicione o atributo hidden a todos os elementos <main> exceto o que está atualmente ativo. Use JavaScript para alternar a visibilidade adicionando ou removendo o atributo hidden conforme necessário.

Exemplos

❌ Inválido: Dois elementos <main> visíveis

<header>
  <h1>My Website</h1>
</header>

<main>
  <h2>Welcome</h2>
  <p>This is the home page content.</p>
</main>

<main>
  <h2>About</h2>
  <p>This is the about page content.</p>
</main>

Ambos os elementos <main> são visíveis, o que viola a especificação e confunde as tecnologias assistivas.

✅ Corrigido: Elemento <main> único

Se você não precisa de múltiplas vistas, simplesmente use um <main>:

<header>
  <h1>My Website</h1>
</header>

<main>
  <h2>Welcome</h2>
  <p>This is the home page content.</p>
</main>

✅ Corrigido: Múltiplos elementos <main> com apenas um visível

Se você precisa de múltiplas vistas para navegação dirigida por JavaScript, oculte todos exceto o ativo usando o atributo hidden:

<header>
  <nav>
    <button onclick="switchView('home')">Home</button>
    <button onclick="switchView('about')">About</button>
  </nav>
</header>

<main id="home">
  <h2>Welcome</h2>
  <p>This is the home page content.</p>
</main>

<main id="about" hidden>
  <h2>About</h2>
  <p>This is the about page content.</p>
</main>

Neste padrão, o JavaScript alternaria o atributo hidden quando o utilizador navega entre vistas, garantindo que apenas um <main> seja sempre visível de cada vez.

❌ Inválido: Usar CSS em vez de hidden

Note que ocultar um elemento <main> com CSS (por exemplo, display: none ou visibility: hidden) não satisfaz a especificação HTML. O validador verifica o atributo hidden, não estilos CSS:

<!-- Isto ainda desencadeia o erro de validação -->

<main>
  <h2>Welcome</h2>
</main>

<main style="display: none;">
  <h2>About</h2>
</main>

Use sempre o atributo hidden para indicar que um elemento <main> não é atualmente relevante para a página.

Saiba mais:

MDN Reference

MDN: Aria Main role

→

WHATWG Spec

HTML Spec: the main element

→