HTML é a linguagem que estrutura toda a web. Mesmo profissionais experientes consultam referências rápidas para lembrar atributos específicos, valores de atributos de formulário ou a sintaxe exata de elementos semânticos. Este cheatsheet de HTML reúne as tags mais importantes, organizadas por categoria, para que você encontre o que precisa em segundos — sem precisar consultar a documentação completa. Neste artigo, você vai entender tudo sobre cheatsheet HTML referência rápida tags atributos e como aplicar na prática.
Use este guia como referência no dia a dia: marque a página e volte sempre que precisar checar a sintaxe de um elemento ou lembrar quais atributos uma tag aceita.
- Estrutura: DOCTYPE, html, head, body — esqueleto de toda página HTML.
- Texto: h1–h6, p, strong, em, span, blockquote, code, pre.
- Links e mídia: a, img, video, audio, iframe.
- Listas: ul, ol, li, dl, dt, dd.
- Formulários: form, input (tipos), textarea, select, button, label, fieldset.
- Semântica: header, nav, main, article, section, aside, footer.
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>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> | Texto em negrito (semântico — importância) | <strong>importante</strong> |
<em> | Texto em itálico (semântico — ênfase) | <em>ênfase</em> |
<br> | Quebra de linha (self-closing) | Linha 1<br>Linha 2 |
<hr> | Linha horizontal separadora | <hr> |
<code> | Código inline | <code>var 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> |
Links e mídia
<!-- Link externo com abertura em nova aba -->
<a href="https://exemplo.com" target="_blank" rel="noopener noreferrer">Texto do link</a>
<!-- Link para email -->
<a href="mailto:contato@email.com">Enviar email</a>
<!-- Link para telefone -->
<a href="tel:+5511999999999">(11) 99999-9999</a>
<!-- Imagem com acessibilidade -->
<img src="imagem.jpg" alt="Descrição da imagem" width="800" height="450" loading="lazy">
<!-- Vídeo nativo -->
<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>
<!-- Embed do YouTube -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/ID"
title="Título do vídeo" frameborder="0" allowfullscreen></iframe>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>Formulários: referência completa
<form action="/enviar" method="POST" enctype="multipart/form-data">
<!-- Label + Input de texto -->
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" placeholder="Seu nome" required minlength="2">
<!-- Tipos de input -->
<input type="email" name="email" autocomplete="email">
<input type="password" name="senha" minlength="8">
<input type="number" name="idade" min="18" max="99" step="1">
<input type="tel" name="telefone" pattern="[0-9]{10,11}">
<input type="url" name="site">
<input type="date" name="data" min="2024-01-01">
<input type="file" name="arquivo" accept=".pdf,.docx" multiple>
<input type="checkbox" name="aceito" value="sim" checked>
<input type="radio" name="plano" value="basico">
<input type="range" name="volume" min="0" max="100" value="50">
<input type="hidden" name="origem" value="landing-page">
<input type="search" name="busca">
<input type="color" name="cor" value="#ff0000">
<!-- Área de texto -->
<textarea name="mensagem" rows="5" cols="40" maxlength="500"></textarea>
<!-- Select -->
<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>
<!-- Botões -->
<button type="submit">Enviar</button>
<button type="reset">Limpar</button>
<button type="button" onclick="minhaFuncao()">Ação</button>
<!-- Fieldset para agrupamento -->
<fieldset>
<legend>Informações de Contato</legend>
<!-- campos aqui -->
</fieldset>
</form>Tags semânticas HTML5
<header>Cabeçalho da página ou seção</header>
<nav>Menu de navegação</nav>
<main>Conteúdo principal (único por página)</main>
<article>Conteúdo independente (post, notícia)</article>
<section>Seção temática com heading</section>
<aside>Conteúdo lateral (sidebar, anúncio)</aside>
<footer>Rodapé da página ou seção</footer>
<figure>Imagem com legenda</figure>
<figcaption>Legenda da figura</figcaption>
<time datetime="2024-01-15">15 de janeiro de 2024</time>
<address>Informações de contato do autor/empresa</address>
<mark>Texto destacado (como marca-texto)</mark>
<details>Conteúdo expansível</details>
<summary>Título do details (sempre visível)</summary>
<dialog>Caixa de diálogo/modal nativa</dialog>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:description" content="Descrição para Twitter">
<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 força uma quebra de linha antes e depois. <span> é um elemento inline — fica na mesma linha que o conteúdo ao redor. Use <div> para agrupar seções de conteúdo e <span> para estilizar partes específicas dentro de um parágrafo ou texto sem quebrar o fluxo. Prefira sempre tags semânticas (<article>, <section>, <aside>) antes de recorrer ao <div>.
Por que o atributo alt nas imagens é obrigatório?
O atributo alt é obrigatório por duas razões: acessibilidade e SEO. Leitores de tela usados por pessoas com deficiência visual leem o texto alternativo para descrever a imagem. O Google também usa o alt para indexar imagens. Para imagens decorativas (sem informação), use alt="" (string vazia) — isso instrui o leitor de tela a ignorar a imagem, que é o comportamento correto.
Quando usar <button> e quando usar <a>?
Use <a> quando a ação leva o usuário a uma outra URL ou ancora na mesma página — é um link de navegação. Use <button> quando a ação executa algo na página — enviar formulário, abrir modal, disparar JavaScript. Usar <a> com href="#" para simular botão ou <div> como botão são práticas ruins de acessibilidade — sempre use o elemento semanticamente correto para a ação desejada.
Qual a diferença entre id e class em HTML?
id deve ser único na página — cada elemento pode ter apenas um id, e cada id só pode aparecer uma vez. class pode ser reutilizado em múltiplos elementos e um elemento pode ter múltiplas classes. Use id para elementos únicos que precisam de âncora de link ou referência específica em JavaScript; use class para aplicar estilos CSS reutilizáveis e seletores mais flexíveis.
Conclusão
Este cheatsheet cobre as tags e padrões de HTML mais usados no dia a dia do desenvolvimento web. Guarde-o como referência e consulte sempre que precisar lembrar a sintaxe exata de um elemento ou os atributos disponíveis para um formulário.
Para a referência completa e oficial de todas as tags HTML, 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.
