W3docs
pt
Entrar

Tag HTML <main>

A tag define o conteúdo principal do documento em HTML5. Descrição, atributos e exemplos da tag.

A tag <main> é um elemento de bloco introduzido na especificação do HTML5. Ela envolve o conteúdo dominante do <body> do documento — o conteúdo que é exclusivo daquele documento e não se repete nas demais páginas do site, como o cabeçalho do site, menu de navegação, barra lateral, campo de busca ou rodapé.

Esta página aborda para que serve o <main>, como ele se encaixa em uma estrutura de documento completa junto ao <header>, <nav> e <footer>, como ele viabiliza links "pular para o conteúdo" e as regras sobre o uso de mais de um <main> em uma página.

Onde o <main> pode e não pode ser usado

O elemento <main> não pode ser colocado dentro de um elemento <article>, <aside>, <footer>, <header> ou <nav> — <main> é uma região de nível superior, portanto esses elementos contenedores não se aplicam a ele.

Este elemento faz parte da árvore DOM, mas é excluído do esboço do documento, ao contrário dos elementos de cabeçalho como <h1> a <h6>, que contribuem para ele.

Acessibilidade e o landmark main

<main> representa o landmark ARIA main. Tecnologias assistivas como leitores de tela expõem landmarks para que os usuários possam acessar diretamente as principais regiões de uma página. Prefira o elemento <main> ao invés de adicionar role="main" a um elemento genérico como um <div>, pois o <main> carrega esse papel implicitamente.

Deve haver exatamente um landmark main por página. Usuários de teclado e leitores de tela também podem pular conteúdo repetido (navegação, banners, anúncios) usando a técnica de "pular navegação". Se você atribuir um id ao elemento <main>, esse id se torna o destino de um link de atalho — veja o exemplo abaixo.

Sintaxe

A tag <main> vem em pares. O conteúdo é escrito entre as tags de abertura (<main>) e fechamento (</main>).

Exemplo da tag HTML <main>:

Tag HTML <main>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <main>
      <h1>Programming languages</h1>
      <p>
        Languages HTML and CSS are intended for site layout.
      </p>
      <article>
        <h2>HTML</h2>
        <p>
          HTML (Hyper Text Markup Language) is a language of hypertext markup, which is used to create web pages.
        </p>
        <p>... </p>
        <p>... </p>
      </article>
      <article>
        <h2>CSS</h2>
        <p>
          CSS is a language of styles, defining the display of HTML documents.
        </p>
        <p>... </p>
      </article>
    </main>
  </body>
</html>
Experimente Você Mesmo »

<main> em uma estrutura de documento completa

Em uma página real, <main> fica ao lado dos outros elementos landmark. O cabeçalho, a navegação e o rodapé se repetem em todas as páginas, portanto ficam fora do <main>; apenas o conteúdo específico da página vai dentro dele.

<!DOCTYPE html>
<html>
  <head>
    <title>Programming languages</title>
  </head>
  <body>
    <header>
      <h1>My Web Tutorials</h1>
    </header>

    <nav>
      <a href="/html">HTML</a> |
      <a href="/css">CSS</a> |
      <a href="/js">JavaScript</a>
    </nav>

    <main>
      <h2>Programming languages</h2>
      <p>HTML and CSS are intended for site layout.</p>
    </main>

    <footer>
      <p>&copy; 2026 My Web Tutorials</p>
    </footer>
  </body>
</html>
Result

Um link de atalho permite que usuários de teclado e leitores de tela pulem diretamente a navegação repetida. Associe o href do link ao id do elemento <main>:

<body>
  <a href="#main-content">Skip to main content</a>

  <header>
    <h1>My Web Tutorials</h1>
  </header>
  <nav>
    <a href="/html">HTML</a> |
    <a href="/css">CSS</a>
  </nav>

  <main id="main-content">
    <h2>Programming languages</h2>
    <p>HTML and CSS are intended for site layout.</p>
  </main>
</body>

Ao ativar o link, o foco é movido para #main-content, de modo que o usuário chega diretamente ao conteúdo principal da página.

Usando mais de um <main> com o atributo hidden

Uma página pode conter apenas um elemento <main> visível. Quaisquer elementos <main> adicionais devem ter o atributo hidden. Isso é útil em aplicações de página única (SPAs), onde várias "visualizações" existem no DOM ao mesmo tempo, mas apenas a visualização ativa é exibida:

<main>
  <h2>Home view</h2>
  <p>This view is visible.</p>
</main>

<main hidden>
  <h2>Settings view</h2>
  <p>This view is in the DOM but hidden until activated.</p>
</main>

Quando o usuário muda de visualização, o script alterna o atributo hidden para que exatamente um <main> fique visível por vez.

Atributos

A tag <main> suporta os Atributos Globais e os Atributos de Evento.

Estilizando o elemento <main>

<main> é apenas um contêiner estrutural, então estilize-o como qualquer elemento de bloco. Por conter o conteúdo principal da página, é um lugar natural para definir a largura de leitura geral, o preenchimento e o espaçamento:

main {
  display: block;       /* ensures block layout in older browsers */
  max-width: 800px;
  margin: 0 auto;       /* center the content column */
  padding: 20px;
  background-color: #f9f9f9;
}

Prática

Prática
Qual é a importância e o uso do elemento main em HTML? (Selecione todas as opções corretas.)
Qual é a importância e o uso do elemento main em HTML? (Selecione todas as opções corretas.)
Was this page helpful?