Desenvolvimento HTML

Como utilizar o elemento semântico main

26 de agosto de 2019

Como utilizar o elemento semântico main

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.

elemento semantico main capa

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

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x