Desenvolvimento HTML

Como utilizar o elemento semântico aside

2 de agosto de 2019

Como utilizar o elemento semântico aside

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!

html semantico aside capa

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

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