O elemento semântico main é a tag onde o conteúdo principal de uma página web é inserido, neste post vamos entender melhor ela e seus casos de uso.
Como utilizar o elemento semântico main?
A tag <main> é um outro elemento auto explicativo que veio com o HTML5 para aumentar a semântica das páginas
Utilizamos o elemento semântico main quando precisamos de um elemento para inserir o conteúdo principal da página
O conteúdo principal são os textos, imagens, tabelas que estão relacionados com o tema proposto do link em que entramos
Quer se especializar em HTML e CSS? Veja o nosso catálogo de cursos.
Uma particularidade importante do elemento main, é que ele não pode ser filho, estar dentro, de alguns elementos quee são:
Isso pois eles tem casos isolados de uso e vão de conflito com a tag <main>
obs: Há outros posts no blog falando sobre esses elementos, fique livre para entender um pouco mais sobre eles também! Basta ir na categoria HTML.
Além disso outra coisa que devemos prestar atenção no main é que seu conteúdo deve ser único
Ou seja, não devemos repetir o conteúdo dentro da tag ao longo da página, o mesmo deve ficar explicito e uma só vez dentro de <main>
Utilizando main na prática:
Podemos utilizar o elemento semântico main em qualquer página, desde que o conteúdo dela seja o conteúdo principal
Então vejamos uma simulação de página de produto
HTML:
<!-- header -->
<main>
<h1>Camisa manga longa</h1>
<p>A camisa de manga longa está disponível em vários tamanhos e cores.</p>
<button>Comprar</button>
</main>
<!-- footer -->Perceba que há delimitações de conteúdos como <header> e <footer>, que são elementos que estariam fora do contexto da página principal
Assim estes dois ficariam fora do <main> também, mas veja que o fluxo do código semântico também deixa implicito a simplicidade de leitura do código
O topo da página definido pelo header, o rodapé pelo footer
E o nosso elemento deste post, o main, como o conteúdo principal no centro explicando sobre um produto que neste caso é uma camisa de manga longa
Então na prática vemos que header e footer não precisam agregar em nada no conteúdo da página de produto, apenas fazerem seus papéis distintos
Já o main precisa explicar tudo que o autor da página quer detalhar sobre a camisa
Concluímos então que o foco principal do código está no conteúdo da camisa que está dentro do elemento semântico main
Para exemplificar mais poderiamos ter uma tag <aside>, por exemplo, para inserirmos um artigo do blog desta página de situações de como utilizar a camisa de manga longa
Então enste caso o conteúdo do elemento aside seria diretamente ligado ao conteúdo de main, mas não é o propósito principal da nossa página que é vender o produto camisa de manga longa, legal né? 😀
Conclusão
Aprendemos hoje que o elemento semântico main serve para adicionarmos o conteúdo principal da nossa página dentro dele
Não devemos repetir ao longo da página o mesmo conteúdo que está inserido na tag
E também devemos ficar atentos para o <main> não ser inserido dentro de algumas tags
São elas: article, aside, footer, header e nav
Isso se dá a semântica destas tags não irem de encontro com a semântica de main, quebrando o fluxo e semântico do documento HTML que estarão inseridas
E por hoje é isso, até o próximo post!
Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo
Referências: MDN