O elemento semântico aside é bem utilizado em conteúdos que ficam no entorno do conteúdo principal, quer aprender a usá-lo de outras formas? E entender perfeitamente para que serve? Confira o post!
Utilização ideal do elemento semântico aside
O elemento aside do HTML5 veio para resolver alguns problemas, obviamente relacionados a semântica do HTML
Pois o elemento div não soluciona, ele não possui valor semântico para as páginas web
Então utilizamos esta tag quando queremos adicionar um conteúdo relacionado ao principal, porém estes dois não tem o mesmo objetivo
Um grande exemplo seria: Um blog com os posts do autor no conteúdo principal, elemento main, e uma pequena biografia sobre o autor numa barra lateral dentro do elemento aside
Quer se especializar em HTML e CSS? Veja o nosso catálogo de cursos.
Mas não para por aí, o elemento aside ainda pode ser utilizado para abrigar um texto de uma curiosidade
No mesmo estilo explicado anteriormente, o conteúdo de aside ligado indiretamente ao conteúdo principal
Exemplo de utilização do elemento aside
Confira um exemplo de utilização do aside
<main>
<h1>A importância do HTML semântico</h1>
<p>O HTML semântico foi criado para dar sentido as tags, tornando ele mais legível tanto para programadores quanto para mecanismos de busca como o Google.</p>
<aside>
Matheus tem 28 anos e é desenvolvedor full stack em uma empresa que produz suplementos alimentares de alta qualidade.
</aside>
<p>Mais sobre o HTML semântico...</p>
</main>Aqui estamos simulando um post, e no meio dele uma pequena introdução sobre o autor
O assunto principal é o post, mas quem escreveu está diretamente ligado a ele, porém não faz parte do conteúdo principal
Então ligamos um ao outro por meio da tag aside, legal né? 😀
Conclusão
Neste post vimos que o elemento aside deve ser utilizado quando há necessidade de inserir um conteúdo separado do assunto principal da página
Isso porque a tag aside pode ter relação com ele, mas não representa necessariamente a mesma linha de raciocínio e sim uma conexão com o conteúdo principal
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