HTML5 Semântico Cheat Sheet

Define o cabeçalho de uma página ou seção.

<header>...</header>

Define um bloco de links de navegação.

<nav>...</nav>

Contém o conteúdo principal e exclusivo da página.

<main>...</main>

Define o rodapé de uma página ou seção.

<footer>...</footer>

Define um conteúdo independente e auto-contido (ex: post de blog).

<article>...</article>

Define uma seção temática em um documento.

<section>...</section>

Define conteúdo relacionado ao redor, mas separado (sidebar).

<aside>...</aside>

Agrupa imagens e suas legendas de forma semântica.

<figure>
  <img src="..." alt="...">
  <figcaption>Descrição</figcaption>
</figure>