Iniciando os estudos em HTML5, me deparei com uma dificuldade para entender a estrutura semântica. E lendo diversos artigos, em português e em inglês, percebi que ainda é grande a confusão com as novas tags semânticas implementadas no HTML5, que ainda não existiam no HTML. Depois de ler vários artigos, inclusive do W3C, e de assistir a alguns vídeos tutoriais, criei este pequeno resumo para entender como compor a estrutura do site de forma semântica, que é o grande diferencial do HTML5.
A W3C faz breves definições para as tags do HTML5. Coloco aqui as principais tags semânticas. O conteúdo original e todas as outras definições de tags do HTML5 podem ser conferidas aqui.
<header> - Representa um contêiner para conteúdo introdutório ou um conjunto de links de navegação.
<nav> - Define um conjunto de links de navegação. Observe que nem todos os links de um documento devem estar dentro de um elemento <nav>. O elemento <nav> destina-se apenas ao bloco principal de links de navegação.
<article> - Especifica conteúdo independente e autônomo. Um artigo deve fazer sentido por conta própria e deve ser possível distribuí-lo de forma independente do resto do site.
<aside> - Define algum conteúdo secundário relacionado a algum conteúdo principal.
<section> - Define seções em um documento, como capítulos, por exemplo.
<footer> - Define um rodapé para um documento ou seção. Um elemento <footer> deve conter informações sobre o elemento que o contém.