Folha de Consulta HTML
Última atualização
Estrutura do documento
Toda página HTML começa com este esqueleto.
| Elemento | O que faz |
|---|---|
<!DOCTYPE html> | Declara o documento como HTML5 (primeira linha) |
<html lang="en"> | Elemento raiz; lang define o idioma |
<head> | Metadados: título, links, scripts - não exibidos na página |
<meta charset="UTF-8"> | Codificação de caracteres (sempre inclua) |
<meta name="viewport" content="width=device-width, initial-scale=1"> | Escala responsiva no celular |
<title> | Título da página exibido na aba do navegador e nos resultados de busca |
<body> | Tudo que é visível na página vai aqui |
Texto e títulos
| Elemento | O que faz |
|---|---|
<h1> … <h6> | Títulos, <h1> o mais importante (um por página) |
<p> | Parágrafo de texto |
<br> | Quebra de linha (sem tag de fechamento) |
<hr> | Divisão temática / linha horizontal |
<strong> | Texto importante (negrito) |
<em> | Texto enfatizado (itálico) |
<span> | Contêiner inline para estilizar um trecho de texto |
<code> | Código inline |
<pre> | Texto pré-formatado (preserva os espaços em branco) |
<blockquote> | Bloco de texto citado |
Links e imagens
| Elemento | Sintaxe |
|---|---|
| Link | <a href="https://coddy.tech">Coddy</a> |
| Abrir em nova aba | <a href="..." target="_blank" rel="noopener"> |
| Âncora (pular para id) | <a href="#section">Jump</a> |
| Imagem | <img src="cat.png" alt="A cat" width="200"> |
| Imagem responsiva | <img src="..." srcset="..." sizes="..."> |
| Figura com legenda | <figure><img ...><figcaption>…</figcaption></figure> |
Listas
| Elemento | O que faz |
|---|---|
<ul> | Lista não ordenada (com marcadores) |
<ol> | Lista ordenada (numerada) |
<li> | Item de lista (dentro de <ul> ou <ol>) |
<dl> | Lista de descrição |
<dt> / <dd> | Termo de descrição / detalhe da descrição |
Tabelas
| Elemento | O que faz |
|---|---|
<table> | Contêiner da tabela |
<thead> / <tbody> / <tfoot> | Grupos de cabeçalho, corpo e rodapé da tabela |
<tr> | Linha da tabela |
<th> | Célula de cabeçalho (negrito, centralizada) |
<td> | Célula de dados |
colspan / rowspan | Mescla células entre colunas / linhas |
Formulários e inputs
Os blocos de construção de qualquer formulário que coleta dados.
| Elemento | Sintaxe / finalidade |
|---|---|
| Formulário | <form action="/submit" method="post"> |
| Campo de texto | <input type="text" name="q" placeholder="Search"> |
| E-mail / senha | <input type="email">, <input type="password"> |
| Checkbox / radio | <input type="checkbox">, <input type="radio"> |
| Número / data | <input type="number">, <input type="date"> |
| Rótulo | <label for="q">Search</label> |
| Múltiplas linhas | <textarea rows="4"></textarea> |
| Lista suspensa | <select><option>One</option></select> |
| Botão | <button type="submit">Send</button> |
| Campo obrigatório | <input required> |
Tags semânticas e de layout
Use estas em vez de <div>s genéricas para que navegadores, leitores de tela e mecanismos de busca entendam sua página.
| Elemento | O que ele marca |
|---|---|
<header> | Topo de uma página ou seção (logo, navegação) |
<nav> | Links de navegação |
<main> | O conteúdo dominante (um por página) |
<section> | Um agrupamento temático de conteúdo |
<article> | Conteúdo autossuficiente (post, card) |
<aside> | Conteúdo de barra lateral / tangencial |
<footer> | Rodapé de uma página ou seção |
<div> | Contêiner de bloco genérico (sem significado) |
Atributos globais comuns
| Atributo | O que faz |
|---|---|
id | Identificador único de um elemento |
class | Um ou mais nomes de classe (para CSS / JS) |
style | CSS inline (use com moderação) |
title | Texto de dica ao passar o mouse |
data-* | Atributo de dados personalizado, ex.: data-id="42" |
hidden | Oculta o elemento |
Cada tag e atributo de HTML que você usa, agrupados pelo que fazem. Esta folha de consulta HTML cobre o esqueleto da página, texto e links, imagens e mídia, listas, tabelas, formulários e as tags semânticas que dão significado à sua marcação.
Tudo é HTML5 padrão e funciona em todos os navegadores modernos. Copie uma tag ou abra o playground de HTML para editá-la com pré-visualização ao vivo - sem necessidade de configuração.
Perguntas frequentes sobre a folha de consulta HTML
Esta folha de consulta HTML é gratuita?
Sim. Esta folha de consulta HTML é gratuita, sem necessidade de cadastro. Salve nos favoritos e volte sempre que precisar consultar uma tag ou atributo.
Qual é a diferença entre <section> e <div>?
<section> é uma tag semântica - ela indica a navegadores e leitores de tela que seu conteúdo é um grupo significativo e temático, e geralmente tem um título. <div> não carrega significado e é apenas um contêiner genérico para estilização ou scripts. Opte por uma tag semântica (<section>, <article>, <nav>) quando alguma se encaixar, e recorra a <div> apenas quando nenhuma servir.Todas as tags HTML precisam de uma tag de fechamento?
A maioria precisa (
<p>...</p>), mas alguns elementos "vazios" não, porque não podem conter nada: <img>, <br>, <hr>, <input>, <meta> e <link>. No HTML5 você pode escrevê-los com ou sem a barra final.Posso praticar HTML online?
Sim. Abra o playground de HTML para escrever HTML no seu navegador com pré-visualização ao vivo - sem necessidade de instalação. Quando quiser estrutura, o curso interativo e gratuito de HTML da Coddy ensina tags, formulários e layout passo a passo.
Esta folha de consulta é boa para iniciantes?
Sim. Ela começa com o esqueleto da página e as tags do dia a dia que você usará primeiro, depois avança para formulários e marcação semântica, de modo que você pode usar as seções de cima já no primeiro dia.
Recursos relacionados
Mais folhas de consulta
