Os elementos abaixo possuem como principal função ser containers semânticamente. Ou seja, no lugar de utilizar uma div
para agrupar as informações de um menu de navageção, você pode utilizar o elemento nav
que acrescenta mais sentido ao seu código.
header
, conforme sua tradução, informa ao navegador que ali temos um cabeçalho. Não necessariamente precisa representar o cabeçalho da página, podendo ser o cabeçalho de uma seção, por exemplo. Note que é diferente do head
do documento HTML!<section></section>
representa a seção de algo.nav
vem da palavra inglesa "navigation", que traduzida temos "navegação". As tags <nav></nav>
, conforme o próprio nome sugere, envolvem uma seção de navegação do site, normalmente um grupo de links para áreas (em diferentes páginas ou não) de um mesmo website. Resumindo, estas tags funcionam como um container de links para navegação, ou, menu.<aside></aside>
são utilizadas para representar conteúdos que tangenciem o conteúdo principal do web site. Isso não significa que este elemento será necessariamente o responsável por barras laterais, mas sim somente quando o conteúdo destas barras se encaixarem à sua semântica. Mais uma vez reforçamos que estas tags têm valor semântico no código e não estão relacionadas com layout.footer
, conforme sua tradução, informa ao navegador que ali temos um rodapé. Assim como para o header
, não estamos falando necessariamente do rodapé da página, mas também de outros elementos, como do rodapé de seções ou artigos.