Semântica no HTML5 – parte 1

A semântica – ou significado – é tudo para o HTML5 em relação ao HTML4. A grande diferença está em como segmentamos o código e o separamos em dados lógicos e não apenas visuais. Uma coisa é o que o usuário vê ao acessar o site, outra coisa é o que o browser e sistemas de busca entendem ao interpretar o código.

Falar isso…

<div id="conteudo"></div>

…não significa absolutamente nada para o browser. Para o usuário que vê o site renderizado pode ser fácil de identificar o que é o conteúdo principal mas não para o computador. Usar o id conteudo não muda nada, isso é apenas uma referência para o desenvolvedor estilizar esse elemento div genérico.

Agora isso…

<main id="conteudo"></main>

…aí sim diz alguma coisa. O computador agora entende que o que estiver dentro do elemento main é a parte principal de conteúdo da página.

Os principais elementos para melhorar a semântica geral de um site simples são:

<header></header>

Elemento para introdução do documento ou de outras seções. Pode ser usado múltiplas vezes. Normalmente é utilizado para o cabeçalho do site, onde fica a navegação principal, busca, logo, etc.

<nav></nav>

Deve ser utilizado para denotar uma navegação importante para a página, como por exemplo o menu principal, árvore de links no rodapé, etc. Não deve ser utilizado em qualquer lista de links, apenas as mais relevantes para o site em questão.

<article></article>

Determina uma área auto-explicativa, ou seja, uma área onde o conteúdo funcionaria independente do resto da página. Não significa necessariamente notícia ou artigo, apesar de normalmente ser utilizado em posts de blog, etc. Isso se deve apenas por esses conteúdos serem pedaços auto-suficientes como a especificação manda. É utilizado normalmente junto a outros article de conteúdo similar ou sozinho como conteúdo principal de uma página/seção.

<main></main>

Especifica a área principal de conteúdo da página. Só pode haver um elemento main na página, então apenas use quando tiver certeza que aquela área é o foco do documento. Não pode ser utilizado dentro de elementos aside, nav, header, footer ou article.

<footer></footer>

Área de encerramento de um documento ou seção/artigo. Normalmente é utilizado como rodapé da página, onde ficam o mapa do site, termos de uso, copyright, etc. Pode ser utilizado em articles como área do autor de uma postagem, redes sociais, etc. Assim como header deve ser utilizado poucas vezes.

Saca essa também