Como muitos já sabem, o HTML5 veio com a proposta de ser mais semântico em relação ao seu antecessor, o HTML 4.01. Um bom exemplo disso são as famosas DIVs(<div></div>) e SPANs(<span></span>) que antes, ou melhor dizendo, ainda são usadas para estruturar um documento HTML. O que ocorre é que é necessário utilizar classes e IDs para que cada uma delas tenha um sentido no código. Por exemplo: <div id="header"> significa um cabeçalho, enquanto que <div id="footer"> significa um rodapé. Para um usuário que não desenvolveu o site, analisar isso é um pouco complicado. Complicado também, por exemplo, para as máquinas de busca, como Google, que tem dificuldade de encontrar cada seção no site.

Pensando nisso o HTML5 supriu essa parte e trouxe tags próprias para classificar tipos de conteúdo. Com elas fica mais fácil estruturar e entender o código-fonte. Por exemplo: ao invés de usar <div id="header"> usa-se apenas <header>! Com isso o HTML5 nomeia as estruturas como elas são de fato, e não somente como irão aparecer para o usuário! Nessa postagem serão explicados algumas dessas tags, que serão:

  • Header
  • Nav
  • Section
  • Aside
  • Footer
Exemplo de estrutura HTML5
Exemplo de estrutura HTML5

O elemento Header
O novo <header> é onde, muitas vezes, se armazena coisas como logotipos, slogans, e outros tipos de marca geralmente associados a cabeçalhos. Muitas vezes, é o primeiro elemento nível de bloco em uma página HTML5 e é comumente usado para títulos como <h1>, <h2>, e assim por diante. O resultado é uma base de código semanticamente mais rica para a construção.

O elemento Nav
O elemento <nav> representa uma secção de navegação onde somente seções que consistem em blocos de navegação primárias são adequadas para o elemento <nav>.

O elemento Section
O elemento <section> representa um bloco de conteúdo genérico, documento ou um bloco de aplicação. A <section>, neste contexto, é um agrupamento temático de conteúdo, normalmente com um título.A nova tag <section> também pode suportar o atributo cite para citações.

O elemento Aside
O elemento <aside> representa uma seção de uma página que consiste de conteúdo que está tangencialmente relacionada com o conteúdo em torno do elemento <aside>, e que pode ser considerado distinto do conteúdo.A tag <aside> é efetivamente usado para colocar itens como imagens e textos que muitas vezes são menos importantes do que o conteúdo da página principal.O conteúdo pode existir sem a tag <aside>, mas a tag <aside> não pode existir sem conteúdo.

O elemento Footer
O elemento <footer> representa um rodapé para o conteúdo concluído documentado ou seu ancestral mais próximo.A especificação HTML5 sugere que a informação de autor pode ser incluída na nova tag <footer>, não importando se o <footer> é parte de um ‹section› ou <article> ou mesmo na parte inferior da página. Geralmente, você vai usar a tag <header> no topo do seu documento, a tag <footer> na parte inferior, e tags <aside> nos lados.
Quando o elemento <footer> contém seções inteiras, elas representam apêndices, índices, longas citações, contratos de licença detalhadas, entre outros conteúdos. A nova tag <footer> também podem conter informações como atribuição do autor, links para documentos relacionados, direitos autorais e assim por diante.

Espero que tenham gostado. Brevemente estarei postando a continuação, até lá.