Referência de 126 tags HTML
O que cada tag faz, se precisa de fechamento e quais atributos se usam de fato, em uma linha.
Esqueleto5
O esqueleto que todo documento tem, com ordem e lugar fixos.
<html>O elemento raiz que envolve todo o documento; o atributo lang declara o idioma.<head>Guarda informações do documento que não aparecem: título, meta, estilos.<body>Tudo o que o leitor realmente vê fica dentro deste elemento.<title>O título do documento exibido na aba e nos resultados de busca.<base>Define a URL base usada para resolver os links relativos do documento.
Seções17
Divide a página em blocos com sentido; buscadores e leitores de tela seguem essa estrutura.
<header>A parte introdutória de uma seção: título, logotipo, navegação.<nav>Um bloco de links de navegação principais, não qualquer grupo de links.<main>O conteúdo principal do documento: um por página, sem cabeçalho nem rodapé.<section>Um agrupamento temático com título, não uma caixa genérica.<article>Um conteúdo que faz sentido sozinho: artigo, postagem, comentário.<aside>Conteúdo à margem do fluxo principal: se sair, o texto continua fazendo sentido.<footer>A parte final de uma seção: copyright, contato, links relacionados.<div>Uma caixa sem significado próprio: use só quando nenhum outro elemento serve.<h1>O título de nível mais alto da página: como regra, um por documento.<h2>Um título um nível abaixo de h1, para dividir a página em partes.<h3>Um título que subdivide o que está sob um h2.<h4>Um título de quarto nível: chegar tão fundo costuma indicar que a estrutura merece revisão.<h5>Um título de quinto nível: raramente necessário.<h6>O sexto e menor nível de título.<hgroup>Agrupa um título com o subtítulo que o acompanha.<address>Marca os dados de contato do artigo ou documento, não qualquer endereço postal.<search>Marca um grupo de controles de busca; é uma adição recente ao padrão.
Blocos de texto7
Texto que flui em bloco: parágrafos, citações, listagens de código.
<p>Um parágrafo. O navegador o fecha sozinho se você omitir a tag final.<br>Uma quebra de linha; não serve para espaçar parágrafos.<hr>Marca uma mudança de assunto; não é apenas uma linha decorativa.<pre>Mostra o texto como escrito: espaços e quebras de linha são preservados.<blockquote>Uma citação longa de outra fonte; a URL de origem vai no atributo cite.<figure>Uma figura ou bloco de código autocontido citado no texto; pode ser movido sem perda.<figcaption>A legenda de uma figura, como primeiro ou último filho dentro de figure.
Marcação em linha30
Marca parte de uma linha sem começar outra.
<a>Um link para outro lugar; sem href é apenas um marcador, não um link.<span>Uma caixa em linha sem significado, para estilizar parte de um texto.<strong>Marca o texto como importante; ficar em negrito é efeito, não o objetivo.<em>A parte que você enfatizaria ao ler em voz alta; o itálico é só a aparência.<b>Chama atenção sem implicar importância; use strong quando importar.<i>Texto em outro registro: estrangeirismos, nomes científicos, pensamentos.<u>Sublinha texto que precisa de anotação não textual, como um erro ortográfico.<s>Risca conteúdo que já não é correto; para histórico de edições use del.<mark>Realça a parte relevante para quem lê, como um marca-texto.<small>Letra miúda ao lado: isenções de responsabilidade, linhas de copyright.<sub>Texto em subscrito, como o 2 de H₂O.<sup>Texto em sobrescrito, para potências e chamadas de nota.<code>Um trecho de código, normalmente em fonte monoespaçada.<kbd>Representa uma tecla que o usuário aperta, como Ctrl ou Enter.<samp>A saída produzida por um programa.<var>O nome de uma variável numa fórmula ou em código.<q>Uma citação curta em linha; o navegador acrescenta as aspas.<cite>Indica o título de uma obra, não o nome de uma pessoa.<abbr>Uma abreviatura; coloque a forma completa no atributo title.<time>Uma data ou hora; o atributo datetime traz a forma legível por máquina.<data>Anexa um valor legível por máquina ao lado do valor visível.<dfn>Marca o termo que está sendo definido naquele ponto.<bdi>Isola texto cuja direção poderia bagunçar a linha ao redor.<bdo>Força a direção do texto; o atributo dir é obrigatório.<ruby>Anotação ruby: a leitura acima dos caracteres, usada com rt.<rt>Dentro de ruby, contém a leitura em si.<rp>Parênteses de reserva para navegadores que não exibem ruby.<wbr>Sugere um ponto onde a linha pode quebrar; útil em URLs longas.<ins>Conteúdo acrescentado depois: usado quando o documento mostra o histórico.<del>Conteúdo removido; forma par com ins para mostrar o histórico.
Listas7
Listas ordenadas e não ordenadas, além de listas de termos.
<ul>Uma lista sem ordem: trocar a ordem não muda o sentido.<ol>Uma lista ordenada; start define o primeiro número e reversed conta ao contrário.<li>Um item da lista; fica dentro de um ul ou ol.<dl>Uma lista que emparelha termos com suas descrições.<dt>Dentro de um dl, é o termo descrito.<dd>A descrição que segue um dt; um termo pode ter várias.<menu>Uma lista de comandos ou ferramentas; hoje se comporta como ul.
Tabelas10
Dados em linhas e colunas; não é recurso de layout.
<table>Contém dados em linhas e colunas; não é ferramenta de layout.<thead>As linhas de cabeçalho da tabela; repetem-se em cada página impressa.<tbody>As linhas do corpo; o navegador o insere mesmo se você não escrever.<tfoot>As linhas de resumo no rodapé da tabela, como os totais.<tr>Uma linha da tabela, com células th ou td dentro.<th>Uma célula de cabeçalho; scope indica se descreve uma linha ou coluna.<td>Uma célula de dados; colspan e rowspan a mesclam por colunas ou linhas.<caption>O título de toda a tabela, como seu primeiro filho.<colgroup>Trata várias colunas como grupo, útil para estilos por coluna.<col>Dentro de colgroup, aponta uma coluna, ou quantas span disser.
Formulários14
Controles que recebem um valor e o enviam.
<form>Agrupa entradas para envio; action diz para onde e method como.<input>Um controle de entrada; o atributo type o torna texto, número, data, cor ou arquivo.<textarea>Uma caixa de texto de várias linhas; o texto inicial fica entre as tags.<button>Um botão; dentro de um formulário, omitir type o torna botão de envio.<select>Um menu para escolher um valor; com multiple dá para escolher vários.<option>Uma opção dentro de um select.<optgroup>Agrupa opções sob um rótulo.<label>Um rótulo para um campo; com for, clicar no texto foca o campo.<fieldset>Agrupa controles relacionados; disabled desativa todos de uma vez.<legend>O título de um fieldset, como seu primeiro filho.<datalist>Sugestões para um campo; o usuário ainda pode digitar outra coisa.<output>Contém o resultado de um cálculo; for indica de quais campos veio.<progress>Uma barra que mostra o quanto uma tarefa avançou.<meter>Mostra um valor dentro de um intervalo conhecido; não serve para progresso.
Mídia10
Imagens, áudio, vídeo e superfícies para desenhar.
<img>Uma imagem; alt deve transmitir o que a imagem comunica.<picture>Permite escolher outra imagem conforme o tamanho da tela ou o formato.<source>Um arquivo candidato dentro de picture, video ou audio.<video>Reproduz vídeo; autoplay geralmente só funciona junto com muted.<audio>Reproduz som; sem controls nada aparece na tela.<track>Adiciona legendas ou descrições à mídia, apontando para um arquivo WebVTT.<canvas>Uma superfície em branco para desenhar via script; o traçado não é texto.<svg>Desenha gráficos vetoriais em linha; ficam nítidos em qualquer tamanho.<map>Sobrepõe regiões clicáveis a uma imagem; usa-se com area.<area>Uma região clicável dentro de um map, definida por forma e coordenadas.
Incorporação4
Coloca outro documento ou recurso dentro deste.
Script e estilo5
Acrescenta comportamento e aparência ao documento.
<script>Carrega ou contém JavaScript; defer executa após analisar o documento.<noscript>Conteúdo exibido apenas quando o script está desativado.<style>CSS escrito diretamente no documento, normalmente dentro de head.<template>Um fragmento que não é exibido agora e depois é clonado por script.<slot>Reserva um lugar dentro de um componente web para conteúdo externo.
Info do documento2
Informação lida por navegadores e buscadores, não por pessoas.
Sanfonas3
Coisas que abrem e fecham ao clique, sem JavaScript.
Obsoletas12
Tags aposentadas pelo padrão; aparecem só em documentos antigos.
<center>A forma antiga de centralizar; hoje se faz com CSS.<font>A tag antiga para definir fonte, tamanho e cor diretamente.<marquee>A antiga tag de texto rolante; a animação CSS a substitui.<blink>Fazia o texto piscar; nenhum navegador ainda o suporta.<big>A tag antiga para aumentar o texto um passo.<strike>A antiga tag de riscado; hoje usam-se s ou del.<tt>A antiga tag monoespaçada; code a substitui.<frame>Um painel do antigo método de dividir a janela entre documentos.<frameset>O antigo contêiner que dispunha frames no lugar de body.<acronym>A antiga tag de siglas; hoje basta abbr.<applet>A antiga tag de applets Java; o ambiente já não existe.<dir>A antiga tag de listagem de diretórios; ul tomou seu lugar.
Como ler
- A maioria das tags vem em par, abrindo e fechando. Só as que não têm conteúdo — img, br — ficam sem fechamento.
- Escrever </br> num elemento vazio não adianta: o navegador ignora ou acrescenta uma linha em branco.
- A aparência é tarefa do CSS. A tag diz o que algo é; negrito ou itálico é só a consequência.
- Escolher a tag que combina com o significado ajuda buscadores e leitores de tela. Embrulhar tudo em div joga fora essa informação.
Perguntas frequentes
Q. Quantas tags HTML existem?
Cerca de 110 seguem vivas no padrão e por volta de 130 contando as obsoletas. Esta referência traz 126: as usadas hoje e as que ainda aparecem em documentos antigos.
Q. Quais tags não têm fechamento?
As sem conteúdo: img, br, hr, input, meta, link e algumas outras. Escrever </img> não faz nada. A barra no estilo XHTML de <br /> é permitida, mas em HTML não muda nada.
Q. Qual a diferença entre div e section?
Div é uma caixa sem significado; section é um grupo temático com título. Se um título caberia ali, use section; se você só precisa de algo para pendurar estilos, div é a escolha honesta.
Q. Posso escrever os nomes em maiúsculas?
HTML não diferencia maiúsculas, então <DIV> funciona. A convenção é minúscula, e em contextos XML como XHTML ou SVG só a minúscula vale.
Q. O que acontece se eu usar uma tag obsoleta?
A maioria dos navegadores ainda desenha. Mas o padrão a aposentou, então ela pode sumir a qualquer momento — e já há substitutos: CSS para center e font, animação CSS para marquee.