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

Sobre este problema HTML

O elemento <main> tem uma finalidade muito específica em HTML: identifica o conteúdo principal do <body> do documento — o conteúdo que está diretamente relacionado com ou expande o tópico central da página. Devido a este papel ao nível do documento, a especificação HTML restringe onde o <main> pode aparecer. Não deve ser descendente de <article>, <aside>, <header>, <footer>, ou <nav>. Todos estes são elementos de secção ou estruturais que representam subconjuntos da página, e aninhar <main> dentro deles cria uma contradição semântica — estaria a dizer “o conteúdo principal de toda a página vive dentro desta sub-secção.”

O elemento <article>, por contraste, representa uma composição autónoma — algo como uma publicação de blogue, uma notícia, uma publicação de fórum, ou um comentário. Os artigos são destinados a ser independentemente distribuíveis ou reutilizáveis. Logicamente vivem dentro da área de conteúdo principal de uma página, não à volta dela.

Esta distinção importa para a acessibilidade. Os leitores de ecrã e tecnologias assistivas usam o marco <main> para permitir que os utilizadores saltem diretamente para o conteúdo principal de uma página. Quando <main> está incorretamente aninhado dentro de um <article>, as tecnologias assistivas podem interpretar mal a estrutura do documento, tornando a navegação confusa ou pouco fiável. Os motores de busca também dependem de HTML semântico para compreender a estrutura da página, pelo que o aninhamento incorreto pode afetar como o seu conteúdo é indexado.

Para corrigir este problema, mova o elemento <main> para fora do <article> e torne-o um filho direto de <body> (ou de um elemento não-seccional como <div>). Depois coloque os seus elementos <article> dentro de <main>. Lembre-se também que apenas um elemento <main> visível deve existir por página (elementos <main> adicionais devem ter o atributo hidden).

Exemplos

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

Isto despoleta o erro de validação porque <main> é descendente de <article>:

<article>
  <main>
    <h1>My Blog Post</h1>
    <p>This is the post content.</p>
  </main>
</article>

Incorreto: `<main>` profundamente aninhado dentro de `<article>`

O erro também é despoletado quando <main> é um descendente indireto — não precisa de ser um filho direto:

<article>
  <div class="wrapper">
    <main>
      <h1>My Blog Post</h1>
      <p>This is the post content.</p>
    </main>
  </div>
</article>

Correto: `<article>` dentro de `<main>`

Inverta a relação para que <main> envolva o conteúdo do artigo:

<main>
  <article>
    <h1>My Blog Post</h1>
    <p>This is the post content.</p>
  </article>
</main>

Correto: múltiplos artigos dentro de `<main>`

Um layout típico de página com <main> contendo vários artigos juntamente com outro conteúdo:

<main>
  <h1>Latest Posts</h1>
  <article>
    <h2>First Post</h2>
    <p>Content of the first post.</p>
  </article>
  <article>
    <h2>Second Post</h2>
    <p>Content of the second post.</p>
  </article>
</main>

Correto: estrutura completa do documento

Um documento válido completo mostrando a colocação adequada de <main> como filho direto de <body>:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Blog - Latest Posts</title>
</head>
<body>
  <header>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>
  <main>
    <h1>Latest Posts</h1>
    <article>
      <h2>My Blog Post</h2>
      <p>This is the post content.</p>
    </article>
  </main>
  <footer>
    <p>© 2024 My Blog</p>
  </footer>
</body>
</html>

A regra principal a lembrar: <main> representa o conteúdo principal da página e situa-se no topo da sua hierarquia de conteúdo. Os elementos de secção como <article>, <aside>, e <nav> são componentes dentro dessa hierarquia e pertencem dentro ou ao lado de <main> — nunca à volta dele.