Referência de Elementos HTML5

HTML5 é um conjunto de tecnologias para criar sites e aplicações web mais diversificados e poderosos, com suporte a multimídia, interação com interfaces de software, estruturação de documentos, entre outros.

Esta página é uma referência rápida aos elementos que o HTML5 adicionou (ou formalizou). Cada entrada leva a um capítulo dedicado com atributos, suporte a navegadores e exemplos executáveis.

Por que o HTML5 adicionou elementos semânticos

Antes do HTML5, a estrutura de uma página era construída quase inteiramente com contêineres genéricos <div> e <span>, diferenciados apenas por nomes de class ou id que faziam sentido para o autor, mas nada significavam para a máquina. O HTML5 introduziu elementos semânticos — tags cujos nomes descrevem o significado do conteúdo que envolvem (<header>, <nav>, <article>, <footer>, …), em vez de apenas sua aparência. Isso importa por três razões concretas:

Acessibilidade. Leitores de tela e outras tecnologias assistivas expõem pontos de referência como "principal", "navegação" e "complementar", permitindo que os usuários saltem diretamente para a parte desejada. Um <nav> é anunciado como navegação; um <div class="nav"> não é.
SEO e legibilidade por máquinas. Mecanismos de busca e outros rastreadores usam a estrutura para entender do que uma página trata e qual parte é o conteúdo principal, em vez de adivinhar a partir de nomes de classe.
Manutenibilidade. A marcação semântica lê-se como um esboço da página, portanto o próximo desenvolvedor (ou você mesmo no futuro) entende o layout sem precisar decodificar ganchos CSS.

Para um guia mais completo sobre como estruturar uma página semanticamente, consulte Elementos Semânticos em HTML5.

Nota: Alguns elementos listados abaixo — como <embed> e <wbr> — já existiam nos navegadores muito antes do HTML5 e foram apenas padronizados (formalmente especificados) nele, em vez de serem completamente novos.

Novos Elementos Estruturais/Semânticos

Elementos	Descrição
`<article>`	Define um conteúdo independente e autossuficiente.
`<aside>`	Define uma seção com informações adicionais relacionadas ao conteúdo ao redor do elemento aside.
`<details>`	Contém detalhes adicionais que o usuário pode abrir e visualizar.
`<dialog>`	Especifica uma caixa de diálogo ou janela.
`<figcaption>`	Adiciona uma legenda ou explicação ao conteúdo da tag `<figure>`.
`<figure>`	Especifica um conteúdo autossuficiente.
`<footer>`	Define o rodapé de uma página web ou seção.
`<header>`	Define o cabeçalho de uma página ou seção.
`<main>`	Especifica o conteúdo principal de um documento.
`<nav>`	Define um bloco de links de navegação, seja dentro do documento atual ou para outros documentos.
`<section>`	Cria seções independentes dentro de uma página web com conteúdo logicamente conectado.
`<summary>`	Define o cabeçalho visível para o elemento `<details>`.

Elementos Tipográficos e de Internacionalização (i18n)

Esses elementos descrevem o significado no nível do texto, anotações e o tratamento de scripts com direções mistas ou de línguas do Leste Asiático.

Elementos	Descrição
`<bdi>`	Isola texto bidirecional (quando um idioma com direcionalidade da direita para a esquerda, como árabe ou hebraico, é usado junto com idiomas da esquerda para a direita).
`<data>`	Vincula o conteúdo visível a um `value` legível por máquina (adicionado no HTML 5.1).
`<mark>`	Marca uma parte do texto que tem relevância.
`<rp>`	Define texto alternativo exibido em navegadores que não suportam a tag `<ruby>`.
`<rt>`	Adiciona o texto de pronúncia/anotação exibido acima (ou ao lado) do texto base dentro de um elemento `<ruby>`.
`<ruby>`	Define uma anotação ruby (furigana) — guias fonéticos usados com japonês e outras línguas do Leste Asiático.
`<time>`	Define um horário legível por humanos em um relógio de 24 horas ou uma data precisa no calendário gregoriano.
`<wbr>`	Marca uma posição onde o navegador pode adicionar uma quebra de linha se necessário (uma "oportunidade de quebra de palavra").

Novos Elementos de Formulário

Elementos	Descrição
`<datalist>`	Cria uma lista de opções de entrada predefinidas pela tag `<input>`.
`<output>`	Define um local para representar o resultado de um cálculo realizado por um script ou pela interação do usuário com um elemento de formulário (tag `<form>`).

Novos Elementos de Mídia e Gráficos

Elementos	Descrição
`<audio>`	Incorpora conteúdo de áudio em um documento HTML.
`<canvas>`	Define uma área na página web onde podemos desenhar objetos, imagens, animações e composições fotográficas via scripts.
`<embed>`	Funciona como contêiner para aplicações externas e conteúdo interativo (padronizado no HTML5).
`<picture>`	Fornece múltiplas fontes de imagem para que o navegador possa escolher a melhor para o viewport ou formato.
`<source>`	Define múltiplos recursos de mídia em diferentes formatos para `<audio>`, `<video>` ou `<picture>`.
`<svg>`	Desenha gráficos vetoriais escaláveis (consulte SVG em HTML5).
`<track>`	Especifica faixas de texto (legendas, subtítulos) para elementos de mídia.
`<video>`	Incorpora vídeo em um documento HTML.

Outros Novos Elementos

Elementos	Descrição
`<meter>`	Define uma medição escalar dentro de um intervalo conhecido (por exemplo, uso de disco).
`<progress>`	Exibe o progresso de conclusão de uma tarefa (uma barra de progresso).
`<template>`	Contém HTML inerte que não é renderizado ao carregar, mas pode ser clonado e inserido por script.

Removidos / Obsoletos no HTML5

Esses elementos já fizeram parte da especificação, mas desde então foram removidos. Os navegadores não os suportam mais de forma confiável e você não deve usá-los em código novo.

Elementos	Descrição
`<keygen>`	Gerava um par de chaves pública/privada no envio do formulário. Removido do padrão — use a Web Crypto API em seu lugar.
`<menuitem>`	Definia um comando em um menu de contexto. Removido do padrão; nunca teve suporte amplo.

Um exemplo semântico rápido

O fragmento abaixo mostra como os elementos estruturais se encaixam para descrever um layout de página típico — note que ele lê-se como um esboço mesmo sem qualquer CSS:

<body>
  <header>
    <h1>My Blog</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Why semantic HTML matters</h2>
      <p>Semantic tags describe meaning, not just appearance.</p>
      <figure>
        <img src="diagram.png" alt="Page structure diagram" />
        <figcaption>A semantic page outline.</figcaption>
      </figure>
    </article>

    <aside>
      <h2>Related</h2>
      <p>Links to other posts.</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2024 My Blog</p>
  </footer>
</body>

Prática

Quais dos seguintes são elementos HTML5 válidos?