Aula 33 - Elemento Main HTML

Introdução

O elemento <main> é uma tag semântica do HTML5 utilizada para representar o conteúdo principal de uma página.

Dentro do elemento main deve estar a informação mais importante e única daquela página.

📌 O conteúdo dentro do <main> deve ser exclusivo da página e não repetido em outros documentos.

O que é o Elemento Main?

A tag <main> identifica a área principal do documento HTML.



<main>


Conteúdo principal da página


</main>

Função do Main

Função	Descrição
Organização	Define claramente o conteúdo principal.
Semântica	Dá significado ao código HTML.
Acessibilidade	Ajuda leitores de tela.
SEO	Facilita interpretação pelos buscadores.

Localização do Main na Página



<body>



<header>

Cabeçalho

</header>



<nav>

Menu

</nav>



<main>

Conteúdo principal

</main>



<footer>

Rodapé

</footer>



</body>

Exemplo Simples



<main>



<h1>

Curso HTML

</h1>



<p>

Aprenda desenvolvimento Web.

</p>



</main>

Elementos que podem ficar dentro do Main

Elemento	Uso
<section>	Dividir conteúdos relacionados.
<article>	Conteúdos independentes.
<h1> até <h6>	Títulos.
<p>	Textos e explicações.
<img>	Imagens.

Main com Sections

Uma boa prática é utilizar sections para organizar diferentes áreas dentro do conteúdo principal.



<main>



<section>



<h2>

Sobre

</h2>



<p>

Informações da empresa.

</p>



</section>



<section>



<h2>

Serviços

</h2>



<p>

Lista de serviços.

</p>



</section>



</main>

Main e Acessibilidade

Tecnologias assistivas utilizam o elemento main para localizar rapidamente o conteúdo principal.

Exemplo:

Um usuário utilizando leitor de tela pode navegar diretamente para o conteúdo principal ignorando menus repetitivos.

Main e SEO

Os mecanismos de busca conseguem compreender melhor a estrutura de uma página quando os elementos semânticos são utilizados corretamente.

Melhor interpretação do conteúdo.
Organização da página.
Maior qualidade estrutural.
Melhor experiência do usuário.

Regras de Utilização

Utilizar apenas uma tag <main> por página.
Não colocar menus dentro do main.
Não colocar informações repetidas.
Representar sempre o conteúdo principal.

⚠️ Elementos como cabeçalho, menu e rodapé normalmente ficam fora do <main>.

Exemplo Completo HTML5



<body>



<header>

Logo e título

</header>



<nav>

Menu

</nav>



<main>



<h1>

Página Inicial

</h1>



<p>

Conteúdo principal.

</p>



</main>



<footer>

Direitos reservados

</footer>



</body>

Resumo da Aula

<main> representa o conteúdo principal.
É um elemento semântico HTML5.
Melhora acessibilidade e SEO.
Deve existir apenas uma vez na página.
Organiza melhor a estrutura do documento.

📄 Elemento Main no HTML