Cheatsheet

← Voltar para página principal
HTML5 Cheatsheet

Guia completo de HTML5 para desenvolvimento web moderno e semântico

🌐 O que é HTML5?

📖 Definição

HTML5 é a quinta versão do HyperText Markup Language, a linguagem de marcação padrão para criar páginas web. HTML5 introduziu elementos semânticos, multimídia nativa e APIs poderosas para aplicações web modernas.

💪 Por que aprender?

• Estrutura semântica e acessível
• Suporte nativo para multimídia
• APIs para aplicações ricas
• Compatibilidade cross-browser
• Otimizado para dispositivos móveis

🚀 O que você pode fazer?

• Estrutura de páginas web
• Formulários interativos
• Conteúdo multimídia
• Aplicações web progressivas
• Design responsivo

💡 Onde você vai usar:
🌐 Web
Sites, Blogs, Portais
📱 Mobile
PWA, Apps Híbridos
Modern
Semântico, Acessível
🎨 Design
Estrutura, Layout
Filtro ativo:Todos
Total: 8 categoriasBásico: 1Intermediário: 3Avançado: 4

🏗️ Estrutura Básica

Use quando: Criando a estrutura fundamental de uma página HTML

💡 Sempre use atributos alt em imagens para acessibilidade e SEO.

📋Estrutura do Documento

Básico
<!DOCTYPE html>

# Declaração do tipo de documento HTML5

Básico
<html lang="pt-BR">

# Elemento raiz com atributo de idioma

Básico
<head>

# Contém metadados sobre o documento

Básico
<body>

# Contém o conteúdo visível da página

Básico
<meta charset="UTF-8">

# Define a codificação de caracteres

Básico
<meta name="viewport" content="width=device-width, initial-scale=1.0">

# Configuração para responsividade

📋Títulos e Parágrafos

Básico
<h1> a <h6>

# Títulos de diferentes níveis (h1 é o mais importante)

Básico
<p>

# Parágrafo de texto

Básico
<br>

# Quebra de linha

Básico
<hr>

# Linha horizontal

📋Formatação de Texto

Básico
<strong>

# Texto importante (negrito)

Básico
<em>

# Texto enfatizado (itálico)

Básico
<mark>

# Texto destacado

Básico
<small>

# Texto menor

Básico
<del>

# Texto deletado

Básico
<ins>

# Texto inserido

📋Links e Imagens

Básico
<a href="url">

# Link para outra página ou recurso

Básico
<a href="url" target="_blank">

# Link que abre em nova aba

Básico
<img src="caminho" alt="descrição">

# Imagem com texto alternativo

Básico
<picture>

# Container para múltiplas fontes de imagem

🎯 Elementos Semânticos

Use quando: Criando estrutura semântica e acessível para SEO

💡 Use elementos semânticos para melhorar a acessibilidade e SEO do seu site.

📋Estrutura Semântica

Intermediário
<header>

# Cabeçalho da página ou seção

Intermediário
<nav>

# Navegação principal

Intermediário
<main>

# Conteúdo principal da página

Intermediário
<section>

# Seção temática do conteúdo

Intermediário
<article>

# Conteúdo independente e autossuficiente

Intermediário
<aside>

# Conteúdo secundário ou relacionado

Intermediário
<footer>

# Rodapé da página ou seção

📋Elementos de Texto Semântico

Intermediário
<blockquote>

# Citação longa

Intermediário
<cite>

# Título de obra

Intermediário
<code>

# Código de computador

Intermediário
<pre>

# Texto pré-formatado

Intermediário
<abbr>

# Abreviação

Intermediário
<address>

# Informações de contato

📋Mídia e Conteúdo Embutido

Intermediário
<figure>

# Container para figura e legenda

Intermediário
<figcaption>

# Legenda da figura

Intermediário
<iframe>

# Container para conteúdo externo

Intermediário
<embed>

# Conteúdo externo (não HTML)

Intermediário
<object>

# Objeto multimídia

📋 Listas e Tabelas

Use quando: Organizando dados em listas ou tabelas estruturadas

📋Tipos de Listas

Intermediário
<ul>

# Lista não ordenada

Intermediário
<ol>

# Lista ordenada

Intermediário
<li>

# Item de lista

Intermediário
<dl>

# Lista de definição

Intermediário
<dt>

# Termo de definição

Intermediário
<dd>

# Descrição de definição

📋Atributos de Listas

Intermediário
<ol type="1">

# Lista numerada (padrão)

Intermediário
<ol type="A">

# Lista com letras maiúsculas

Intermediário
<ol type="a">

# Lista com letras minúsculas

Intermediário
<ol type="I">

# Lista com algarismos romanos

Intermediário
<ol start="5">

# Lista começa do número 5

Intermediário
<ul style="list-style-type: none;">

# Lista sem marcadores

📋Estrutura de Tabelas

Intermediário
<table>

# Container da tabela

Intermediário
<thead>

# Cabeçalho da tabela

Intermediário
<tbody>

# Corpo da tabela

Intermediário
<tfoot>

# Rodapé da tabela

Intermediário
<tr>

# Linha da tabela

Intermediário
<th>

# Célula de cabeçalho

Intermediário
<td>

# Célula de dados

📋Atributos de Tabelas

Intermediário
<table border="1">

# Tabela com borda

Intermediário
<td colspan="2">

# Célula ocupa 2 colunas

Intermediário
<td rowspan="3">

# Célula ocupa 3 linhas

Intermediário
<th scope="col">

# Cabeçalho de coluna

Intermediário
<th scope="row">

# Cabeçalho de linha

📝 Formulários

Use quando: Criando formulários interativos para coleta de dados

📋Estrutura do Formulário

Intermediário
<form>

# Container para elementos de formulário

Intermediário
<form action="/submit" method="post">

# Formulário com ação e método

Intermediário
<fieldset>

# Grupo de campos relacionados

Intermediário
<legend>

# Legenda para fieldset

Intermediário
<label for="id">

# Rótulo associado a um campo

📋Campos de Entrada Básicos

Intermediário
<input type="text">

# Campo de entrada de texto

Intermediário
<input type="email">

# Campo para endereço de e-mail

Intermediário
<input type="password">

# Campo para senha

Intermediário
<input type="number">

# Campo para números

Intermediário
<input type="tel">

# Campo para telefone

Intermediário
<input type="url">

# Campo para URL

📋Campos de Seleção

Intermediário
<input type="checkbox">

# Caixa de seleção

Intermediário
<input type="radio">

# Botão de rádio

Intermediário
<select>

# Lista suspensa

Intermediário
<option>

# Opção da lista suspensa

Intermediário
<optgroup>

# Grupo de opções

Intermediário
<textarea>

# Área de texto multilinha

📋Botões e Controles

Intermediário
<button type="submit">

# Botão de envio

Intermediário
<button type="reset">

# Botão de reset

Intermediário
<button type="button">

# Botão genérico

Intermediário
<input type="submit">

# Botão de envio (input)

Intermediário
<input type="reset">

# Botão de reset (input)

🚀 Formulários Avançados

Use quando: Criando formulários modernos com validação nativa

⚠️ Alguns elementos HTML5 como <keygen> foram depreciados. Verifique a compatibilidade antes de usar.

📋Campos HTML5 Modernos

Avançado
<input type="date">

# Seletor de data

Avançado
<input type="time">

# Seletor de hora

Avançado
<input type="datetime-local">

# Seletor de data e hora local

Avançado
<input type="month">

# Seletor de mês

Avançado
<input type="week">

# Seletor de semana

Avançado
<input type="color">

# Seletor de cor

Avançado
<input type="range">

# Controle deslizante

Avançado
<input type="file">

# Upload de arquivos

📋Validação de Formulários

Avançado
required

# Campo obrigatório

Avançado
pattern="[A-Za-z]{3}"

# Padrão de validação

Avançado
minlength="3"

# Comprimento mínimo

Avançado
maxlength="50"

# Comprimento máximo

Avançado
min="0"

# Valor mínimo

Avançado
max="100"

# Valor máximo

Avançado
step="5"

# Incremento

📋Elementos Auxiliares

Avançado
<datalist>

# Lista de opções predefinidas

Avançado
<output>

# Resultado de um cálculo ou ação

Avançado
<progress>

# Barra de progresso

Avançado
<meter>

# Medidor escalar

Avançado
<keygen>

# Geração de chaves (obsoleto)

🎬 Multimídia

Use quando: Adicionando conteúdo multimídia e gráficos interativos

💡 Forneça sempre alternativas para conteúdo multimídia para garantir acessibilidade.

📋Áudio e Vídeo

Avançado
<audio controls>

# Reprodutor de áudio

Avançado
<video controls>

# Reprodutor de vídeo

Avançado
<source src="file.mp4" type="video/mp4">

# Fonte de mídia com tipo específico

Avançado
<track kind="subtitles" src="subtitles.vtt">

# Trilha de legendas ou legendas ocultas

Avançado
<video autoplay loop muted>

# Vídeo com reprodução automática

Avançado
<video poster="poster.jpg">

# Imagem de pôster do vídeo

📋Gráficos e Canvas

Avançado
<canvas>

# Elemento para desenho gráfico via JavaScript

Avançado
<svg>

# Gráfico vetorial escalável

Avançado
<canvas width="300" height="150">

# Canvas com dimensões

Avançado
<svg viewBox="0 0 100 100">

# SVG com viewBox

📋Elementos Gráficos

Avançado
<map>

# Mapa de imagem

Avançado
<area>

# Área clicável em mapa

Avançado
<canvas id="myCanvas">

# Canvas com ID para JavaScript

Avançado
<svg xmlns="http://www.w3.org/2000/svg">

# SVG com namespace

🔍 Metadados e SEO

Use quando: Otimizando para motores de busca e redes sociais

💡 Use o validador de dados estruturados do Google para verificar sua implementação.

📋Metadados Essenciais

Avançado
<meta name="description" content="...">

# Descrição da página para SEO

Avançado
<meta name="keywords" content="...">

# Palavras-chave para SEO

Avançado
<meta name="author" content="...">

# Autor da página

Avançado
<meta name="robots" content="index, follow">

# Diretivas para robôs de busca

Avançado
<meta name="viewport" content="width=device-width, initial-scale=1.0">

# Configuração para responsividade

📋Open Graph

Avançado
<meta property="og:title" content="...">

# Título para compartilhamento

Avançado
<meta property="og:description" content="...">

# Descrição para compartilhamento

Avançado
<meta property="og:image" content="...">

# Imagem para compartilhamento

Avançado
<meta property="og:url" content="...">

# URL canônica

Avançado
<meta property="og:type" content="website">

# Tipo de conteúdo

📋Twitter Cards

Avançado
<meta name="twitter:card" content="summary">

# Tipo de card do Twitter

Avançado
<meta name="twitter:title" content="...">

# Título para Twitter

Avançado
<meta name="twitter:description" content="...">

# Descrição para Twitter

Avançado
<meta name="twitter:image" content="...">

# Imagem para Twitter

📋Otimização de Performance

Avançado
<link rel="preload" href="...">

# Pré-carregamento de recursos

Avançado
<link rel="prefetch" href="...">

# Pré-busca de recursos

Avançado
<link rel="dns-prefetch" href="...">

# Pré-resolução DNS

Avançado
<link rel="canonical" href="...">

# URL canônica para SEO

♿ Acessibilidade

Use quando: Garantindo acessibilidade para todos os usuários

⚠️ Sempre teste a acessibilidade do seu HTML com leitores de tela e ferramentas de validação.

💡 Use o validador W3C para garantir que seu HTML está conforme os padrões.

📋ARIA Attributes

Avançado
aria-label="descrição"

# Rótulo acessível para elementos

Avançado
aria-describedby="id"

# Elemento que descreve outro

Avançado
aria-expanded="true"

# Estado expandido/colapsado

Avançado
aria-hidden="true"

# Esconde de tecnologias assistivas

Avançado
aria-live="polite"

# Região de atualização dinâmica

📋Roles Semânticos

Avançado
role="navigation"

# Role semântico para navegação

Avançado
role="main"

# Conteúdo principal

Avançado
role="complementary"

# Conteúdo complementar

Avançado
role="search"

# Área de busca

Avançado
role="alert"

# Alerta importante

📋Navegação por Teclado

Avançado
tabindex="0"

# Torna elemento focável

Avançado
tabindex="-1"

# Focável programaticamente

Avançado
accesskey="s"

# Tecla de atalho

Avançado
autofocus

# Foco automático no carregamento

📋Conteúdo Alternativo

Avançado
<img src="..." alt="Descrição detalhada">

# Texto alternativo para imagens

Avançado
<img src="..." alt="" role="presentation">

# Imagem decorativa

Avançado
<longdesc="descricao.html">

# Descrição longa

Avançado
<figure aria-labelledby="caption1">

# Figura com legenda

🤝 Contribuindo

Encontrou um erro? Quer melhorar um cheatsheet? Tem uma sugestão? Adoraríamos suas contribuições! Abra uma issue ou submeta um PR.

Gostou do projeto? Apoie o desenvolvimento com um café e ajude a manter tudo open source ☕