Tags HTML5

André Felizardo
Tecnologia e tudo a sua volta
Semântica HTML

Quando penso em Semântica HTML, diretamente já penso em
HTML5.
O HTML5 (lançado a partir de 2009) é uma versão do HTML ainda não concluída, mas que já pode – e deve – ser utilizada por
Desenvolvedores e navegadores, antes de sua finalização.

Antes do lançamento dessa versão a semântica do HTML era quase nenhuma, quase nenhuma mesmo. Não tinha como, por exemplo, o robô do Google ou um ledor identificar e entender para que servia cada área do site, apenas através do código
HTML.

Já com o HTML5, foram inseridas novas TAGS, onde a semântica ficou simples.

Veja a imagem com o comparativo do HTML anterior e do atual:

Perceba que antes era tudo div, então como o navegador iria conseguir diferenciar? Pois é, não ia (nem mesmo com aquelas IDs ali). A semântica dos novos elementos
1. header
2. main
3. footer
4. nav
5. section
6. article
7. aside

Header
<header> é o cabeçalho do site, ou de uma área dele. Nele normalmente são inseridos elementos h1 até h6 (títulos), elementos de navegação, a logo. O elemento <header> pode ser utilizado várias vezes dentro de uma mesma página.
<header> não pode ser filho de outro <header> ou <footer> ou ainda <address>.

Main
<main> demarca onde deve estar o conteúdo principal da página.
Diferentemente do <header>, só pode existir uma <main> por página. Esta tag ainda não é compatível com todos os navegadores, mas mesmo assim já deve ser utilizada. Veja mais sobre ela aqui

Footer
<footer> é rodapé do site, ou de uma área dele. Normalmente nele ficam informações de autoria, contato, Copyright e outros.
Podem existir vários footers na mesma página.

Nav
<nav> marca uma seção do documento que agrupa links, sejam eles externos ou internos. A <nav> pode estar no cabeçalho, no rodapé ou em outras seções do documento, se relacionando assim com a navegação primária ou global. Mas atente‑se, nem todo link deve estar dentro de nav, dentro desta tag devem estar conjuntos de links.