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 a tag main 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.

Section

Entre todos estes elementos estruturais que estou tratando aqui, <section> é o mais genérico. Dentro dele podemos colocar <header>, <article> e <footer>. Sua principal função é dividir o conteúdo em grandes blocos, seções.

Article

Representa um artigo, um conteúdo independente e bastante relevante, que pode ser um artigo, post ou bloco de texto. Também pode ser utilizado em widgets. O conteúdo de um <article> deve poder ser distribuído de forma independente do resto do site.

Aside

<aside> define um conteúdo que faz alguma referência ao conteúdo principal que está a sua volta. Normalmente em uma barra lateral exibindo informações contextuais, assuntos relacionados, publicidade, ou navegação secundária.

Na construção de sites institucionais, por exemplo, você vai usar principalmente <header>, <main>, <nav> e <footer>.

Lembrando que todas as tags que abordei foram implementadas no HTML5.