Tags estruturais HTML 5

Para quem acompanhou a transição do HTML4 para o HTML5, percebeu que foram adicionadas algumas tags que melhoram a estruturação do código, antes estávamos habituados à com as coringas <divs>, que eram usadas do cabeçalho ao rodapé de uma página web.

No HTML5, foram adicionadas novas tags que ajudam a estruturar melhor o nosso código, não houve mudança em aspectos visuais, um conteúdo entre a tag <div> e uma e entre a tag <nav> será mostrado da mesma forma no browser, a diferença gritante está na semântica, quando um “robô” analisa o código do seu site, ele consegue distinguir um conteúdo e outro.

A separação correta do conteúdo entre as novas tag’s, não só facilitará o trabalho destes “robôs” (principalmente o do google), como também vai melhorar a acessibilidade do seu site.

Abaixo segue algumas alternativas:

• section — utilizado para representar uma seção genérica, geralmente com um cabeçalho próprio e o seu conteúdo;
• nav — representação de um bloco principal de links de navegação — nem todo grupo de links deve ser tratado como um nav ;
• aside — a tag aside pode ser utilizada para representar uma seção de conteúdo secundário ou auxiliar a outro pedaço de maior importância. Citações, links de referência ou notas adicionais, por exemplo;
• header — referente ao cabeçalho de uma seção específica (ou da própria página), contendo títulos, introduções e outros elementos similares;
• footer — o rodapé referente a um bloco de conteúdo;
• article — finalmente, o article identifica o conteúdo em si, como uma notícia de um portal, um post em blog ou um comentário em uma lista de comentários.

Referências para se aprofundar mais sobre o assunto:

HTML5 e CSS3, domine a web do futuro: https://www.casadocodigo.com.br/products/livro-html-css

HTML5 e CSS3 com farinha e pimenta: https://www.clubedeautores.com.br/book/124694--HTML5_e_CSS3_com_Farinha_e_Pimenta#.Vrs1mnUrI8o

Valeu e até a próxima!

;)