Cheatsheet de HTML

Q: Qual a diferença entre div e span?

O elemento div é de bloco: ocupa toda a largura disponível e quebra a linha antes e depois. O span é inline: fica na mesma linha do conteúdo ao redor. Use div para agrupar blocos e span para estilizar trechos dentro de um texto. Antes de recorrer ao div, prefira tags semânticas como article, section e aside.

Q: O atributo alt nas imagens é obrigatório?

Sim, na prática. A especificação do HTML trata o alt como atributo esperado da tag img, por acessibilidade e SEO. Leitores de tela leem o texto alternativo para descrever a imagem a quem não a vê, e o Google usa o alt para entender imagens. Para imagens puramente decorativas, use um alt vazio (string vazia) para que o leitor de tela ignore a imagem.

Q: Quando usar button e quando usar a?

Use a tag a quando a ação leva o usuário a outra URL ou a uma âncora na mesma página — é navegação. Use button quando a ação executa algo na própria página, como enviar um formulário, abrir um modal ou disparar JavaScript. Usar um link vazio ou um div como se fossem botões prejudica a acessibilidade: escolha sempre o elemento semanticamente correto.

Q: Qual a diferença entre id e class em HTML?

O id deve ser único na página: cada valor aparece uma só vez. A class pode se repetir em vários elementos, e um elemento pode ter várias classes. Use id para âncoras de link e referências pontuais em JavaScript; use class para aplicar estilos CSS reutilizáveis a grupos de elementos.

HTML é uma linguagem de marcação, não de programação: ela não executa lógica, apenas descreve a estrutura e o significado de cada parte da página para o navegador. Dominar suas tags — e saber quando cada uma se aplica — é o que separa um HTML acessível e bem estruturado de um amontoado de <div>. Mesmo quem programa há anos consulta uma referência rápida para lembrar a sintaxe exata de um elemento ou quais atributos uma tag aceita.

Este cheatsheet reúne as tags mais usadas, organizadas por categoria, seguindo a anatomia de um documento HTML — do esqueleto às boas práticas:

1EsqueletoDOCTYPE, html, head e body — a base de toda página

2Semânticaheader, nav, main, article, section e footer estruturam o conteúdo

3Textoh1–h6, p, listas, strong e em marcam o conteúdo escrito

4Links e mídiaa, img, video e picture conectam e enriquecem a página

5Formuláriosform, input, label, select e button coletam dados

6Boas práticasacessibilidade (alt, label), tabelas e estilo via CSS externo

A anatomia de um documento HTML: o esqueleto (DOCTYPE/html/head/body), a estrutura semântica (header/nav/main/footer), o conteúdo de texto (h1–h6/p/listas), links e mídia (a/img/video), os formulários (form/input/label) e, no fim, as boas práticas de acessibilidade e estilo via CSS externo.

Estrutura básica de uma página HTML

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Descrição da página para SEO">
    <title>Título da Página</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- Conteúdo aqui -->
    <script src="script.js"></script>
  </body>
</html>

Todo documento começa com <!DOCTYPE html> (que ativa o modo padrão do HTML5), seguido de <html>, <head> (metadados invisíveis) e <body> (o conteúdo visível).

Tags de texto e formatação

Tag	Uso	Exemplo
`<h1>`–`<h6>`	Títulos (h1 = mais importante)	`<h1>Título Principal</h1>`
`<p>`	Parágrafo	`<p>Texto do parágrafo.</p>`
`<strong>`	Importância (renderizado em negrito)	`<strong>importante</strong>`
`<em>`	Ênfase (renderizada em itálico)	`<em>ênfase</em>`
`<br>`	Quebra de linha (self-closing)	`Linha 1<br>Linha 2`
`<hr>`	Separador temático horizontal	`<hr>`
`<code>`	Código inline	`<code>let x = 1;</code>`
`<pre>`	Texto pré-formatado (preserva espaços)	`<pre>bloco de código</pre>`
`<blockquote>`	Citação longa	`<blockquote cite="url">Citação</blockquote>`
`<abbr>`	Abreviação com tooltip	`<abbr title="HyperText">HTML</abbr>`

Vale lembrar que <strong> e <em> carregam significado semântico (importância e ênfase); quando você quer apenas o efeito visual sem esse peso, o certo é usar CSS.

Listas

<!-- Lista não ordenada -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<!-- Lista ordenada -->
<ol>
  <li>Primeiro</li>
  <li>Segundo</li>
</ol>

<!-- Lista de definições -->
<dl>
  <dt>Termo</dt>
  <dd>Definição do termo</dd>
</dl>

Links e mídia

<!-- Link externo abrindo em nova aba -->
<a href="https://exemplo.com" target="_blank" rel="noopener noreferrer">Texto do link</a>

<!-- Link para e-mail e telefone -->
<a href="mailto:contato@email.com">Enviar e-mail</a>
<a href="tel:+5511999999999">(11) 99999-9999</a>

<!-- Imagem com acessibilidade e carregamento tardio -->
<img src="imagem.jpg" alt="Descrição da imagem" width="800" height="450" loading="lazy">

<!-- Vídeo nativo com legendas de fallback -->
<video controls width="800" poster="thumb.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Seu navegador não suporta vídeo HTML5.
</video>

<!-- Áudio nativo -->
<audio controls src="podcast.mp3">
  Seu navegador não suporta áudio HTML5.
</audio>

<!-- Imagem responsiva com <picture> -->
<picture>
  <source media="(min-width: 800px)" srcset="grande.jpg">
  <img src="pequena.jpg" alt="Descrição da imagem">
</picture>

O atributo alt no <img> não é opcional na prática: ele descreve a imagem para leitores de tela e para o Google. Em imagens puramente decorativas, use alt="" para que sejam ignoradas pela tecnologia assistiva.

Formulários

<form action="/enviar" method="POST" enctype="multipart/form-data">

  <!-- Sempre associe o label ao campo pelo id -->
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome" placeholder="Seu nome" required minlength="2">

  <!-- Área de texto -->
  <textarea name="mensagem" rows="5" cols="40" maxlength="500"></textarea>

  <!-- Menu de seleção com grupos -->
  <select name="estado">
    <option value="">Selecione...</option>
    <optgroup label="Sudeste">
      <option value="SP">São Paulo</option>
      <option value="RJ" selected>Rio de Janeiro</option>
    </optgroup>
  </select>

  <!-- Agrupamento com fieldset -->
  <fieldset>
    <legend>Informações de Contato</legend>
    <!-- campos aqui -->
  </fieldset>

  <!-- Botões -->
  <button type="submit">Enviar</button>
  <button type="reset">Limpar</button>
</form>

O atributo type do <input> define como o campo se comporta e qual teclado/validação o navegador oferece. Os tipos mais usados:

type	Uso
`text`	Texto de uma linha
`email`	E-mail (valida o formato)
`password`	Senha (oculta os caracteres)
`number`	Número (com `min`, `max`, `step`)
`tel`	Telefone
`url`	Endereço web
`date`	Data (com seletor de calendário)
`file`	Upload de arquivo (`accept`, `multiple`)
`checkbox`	Múltipla escolha (marcar/desmarcar)
`radio`	Escolha única em um grupo (mesmo `name`)
`range`	Controle deslizante
`color`	Seletor de cor
`hidden`	Campo oculto
`submit`	Botão que envia o formulário

Tabelas

<table>
  <caption>Preços de produtos</caption>
  <thead>
    <tr>
      <th>Produto</th>
      <th>Preço</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Teclado</td>
      <td>R$ 150</td>
    </tr>
  </tbody>
</table>

Use <th> (e não <td>) para as células de cabeçalho: isso associa cada valor à sua coluna e melhora a leitura por tecnologias assistivas. Os elementos <thead> e <tbody> agrupam o cabeçalho e o corpo da tabela.

Tags semânticas HTML5

Tag	Uso
`<header>`	Cabeçalho da página ou de uma seção
`<nav>`	Bloco de navegação/menu
`<main>`	Conteúdo principal (único por página)
`<article>`	Conteúdo independente (post, notícia, card)
`<section>`	Seção temática, geralmente com heading
`<aside>`	Conteúdo lateral (sidebar, nota)
`<footer>`	Rodapé da página ou seção
`<figure>` / `<figcaption>`	Ilustração com legenda
`<time>`	Data/hora legível por máquina (`datetime`)
`<mark>`	Texto destacado (marca-texto)
`<details>` / `<summary>`	Bloco expansível/recolhível nativo

Tags semânticas dão significado à estrutura — para o navegador, para o Google e para leitores de tela. Prefira sempre uma delas antes de recorrer a um <div> genérico.

Tags e atributos obsoletos (evite)

Alguns elementos ainda funcionam em navegadores por retrocompatibilidade, mas foram removidos do padrão HTML: eles misturavam apresentação com estrutura, papel que hoje pertence ao CSS. A regra geral: estrutura é HTML, estilo é CSS.

Obsoleto	O que fazia	Use hoje
`<center>`	Centralizava conteúdo	CSS `text-align` / `margin: auto`
`<font>`	Definia fonte, cor e tamanho	CSS `font-family`, `color`, `font-size`
`<big>` / `<tt>`	Texto maior / monoespaçado	CSS `font-size` / `<code>` estilizado
`<marquee>` / `<blink>`	Texto rolando / piscando	Evite; se preciso, animações CSS discretas
`bgcolor`, `align` (atributos)	Cor de fundo / alinhamento inline	CSS `background`, `text-align`
`frameborder`	Borda de `iframe`	CSS `border`

Meta tags essenciais para SEO e redes sociais

<!-- SEO básico -->
<meta name="description" content="Descrição da página (150-160 caracteres)">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://seusite.com/pagina/">

<!-- Open Graph (Facebook, WhatsApp, LinkedIn) -->
<meta property="og:title" content="Título da Página">
<meta property="og:description" content="Descrição para redes sociais">
<meta property="og:image" content="https://seusite.com/imagem-og.jpg">
<meta property="og:url" content="https://seusite.com/pagina/">
<meta property="og:type" content="website">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Título da Página">
<meta name="twitter:image" content="https://seusite.com/imagem-twitter.jpg">

Perguntas frequentes sobre HTML

Qual a diferença entre `<div>` e `<span>`?

<div> é um elemento de bloco: ocupa toda a largura disponível e quebra a linha antes e depois. <span> é inline: fica na mesma linha do conteúdo ao redor. Use <div> para agrupar blocos e <span> para estilizar trechos dentro de um texto. Antes de recorrer ao <div>, prefira tags semânticas como <article>, <section> e <aside>.

O atributo alt nas imagens é obrigatório?

Sim, na prática. A especificação do HTML trata o alt como atributo esperado da tag <img>, por acessibilidade e SEO. Leitores de tela leem o texto alternativo para descrever a imagem a quem não a vê, e o Google usa o alt para entender imagens. Para imagens puramente decorativas, use um alt vazio (string vazia) para que o leitor de tela ignore a imagem.

Quando usar `<button>` e quando usar `<a>`?

Use <a> quando a ação leva o usuário a outra URL ou a uma âncora na mesma página — é navegação. Use <button> quando a ação executa algo na própria página, como enviar um formulário, abrir um modal ou disparar JavaScript. Usar um link vazio ou um <div> como se fossem botões prejudica a acessibilidade: escolha sempre o elemento semanticamente correto.

Qual a diferença entre id e class em HTML?

O id deve ser único na página: cada valor aparece uma só vez. A class pode se repetir em vários elementos, e um elemento pode ter várias classes. Use id para âncoras de link e referências pontuais em JavaScript; use class para aplicar estilos CSS reutilizáveis a grupos de elementos.

HTML é uma linguagem de programação?

Não. HTML é uma linguagem de marcação: descreve a estrutura e o significado do conteúdo — títulos, parágrafos, listas, links —, mas não executa lógica, cálculos ou repetições. O comportamento fica a cargo do JavaScript e a aparência, do CSS. Por isso os três costumam ser usados juntos.

Conclusão

Este cheatsheet cobre as tags e os padrões de HTML mais usados no dia a dia do desenvolvimento web. Guarde-o como referência e volte a ele sempre que precisar lembrar a sintaxe exata de um elemento ou os atributos disponíveis para um formulário. E lembre-se da divisão de papéis: HTML estrutura, CSS estiliza e JavaScript dá comportamento.

Para a referência completa e oficial de todos os elementos, consulte a documentação de elementos HTML no MDN Web Docs. Para mais conteúdos de desenvolvimento, acesse os artigos de Desenvolvimento no atraca.com.br.