Guia completo de HTML5 para desenvolvimento web moderno e semântico
📖 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
Sites, Blogs, Portais
PWA, Apps Híbridos
Semântico, Acessível
Estrutura, Layout
🏗️ 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
<!DOCTYPE html># Declaração do tipo de documento HTML5
<html lang="pt-BR"># Elemento raiz com atributo de idioma
<head># Contém metadados sobre o documento
<body># Contém o conteúdo visível da página
<meta charset="UTF-8"># Define a codificação de caracteres
<meta name="viewport" content="width=device-width, initial-scale=1.0"># Configuração para responsividade
📋Títulos e Parágrafos
<h1> a <h6># Títulos de diferentes níveis (h1 é o mais importante)
<p># Parágrafo de texto
<br># Quebra de linha
<hr># Linha horizontal
📋Formatação de Texto
<strong># Texto importante (negrito)
<em># Texto enfatizado (itálico)
<mark># Texto destacado
<small># Texto menor
<del># Texto deletado
<ins># Texto inserido
📋Links e Imagens
<a href="url"># Link para outra página ou recurso
<a href="url" target="_blank"># Link que abre em nova aba
<img src="caminho" alt="descrição"># Imagem com texto alternativo
<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
<header># Cabeçalho da página ou seção
<nav># Navegação principal
<main># Conteúdo principal da página
<section># Seção temática do conteúdo
<article># Conteúdo independente e autossuficiente
<aside># Conteúdo secundário ou relacionado
<footer># Rodapé da página ou seção
📋Elementos de Texto Semântico
<blockquote># Citação longa
<cite># Título de obra
<code># Código de computador
<pre># Texto pré-formatado
<abbr># Abreviação
<address># Informações de contato
📋Mídia e Conteúdo Embutido
<figure># Container para figura e legenda
<figcaption># Legenda da figura
<iframe># Container para conteúdo externo
<embed># Conteúdo externo (não HTML)
<object># Objeto multimídia
📋 Listas e Tabelas
Use quando: Organizando dados em listas ou tabelas estruturadas
📋Tipos de Listas
<ul># Lista não ordenada
<ol># Lista ordenada
<li># Item de lista
<dl># Lista de definição
<dt># Termo de definição
<dd># Descrição de definição
📋Atributos de Listas
<ol type="1"># Lista numerada (padrão)
<ol type="A"># Lista com letras maiúsculas
<ol type="a"># Lista com letras minúsculas
<ol type="I"># Lista com algarismos romanos
<ol start="5"># Lista começa do número 5
<ul style="list-style-type: none;"># Lista sem marcadores
📋Estrutura de Tabelas
<table># Container da tabela
<thead># Cabeçalho da tabela
<tbody># Corpo da tabela
<tfoot># Rodapé da tabela
<tr># Linha da tabela
<th># Célula de cabeçalho
<td># Célula de dados
📋Atributos de Tabelas
<table border="1"># Tabela com borda
<td colspan="2"># Célula ocupa 2 colunas
<td rowspan="3"># Célula ocupa 3 linhas
<th scope="col"># Cabeçalho de coluna
<th scope="row"># Cabeçalho de linha
📝 Formulários
Use quando: Criando formulários interativos para coleta de dados
📋Estrutura do Formulário
<form># Container para elementos de formulário
<form action="/submit" method="post"># Formulário com ação e método
<fieldset># Grupo de campos relacionados
<legend># Legenda para fieldset
<label for="id"># Rótulo associado a um campo
📋Campos de Entrada Básicos
<input type="text"># Campo de entrada de texto
<input type="email"># Campo para endereço de e-mail
<input type="password"># Campo para senha
<input type="number"># Campo para números
<input type="tel"># Campo para telefone
<input type="url"># Campo para URL
📋Campos de Seleção
<input type="checkbox"># Caixa de seleção
<input type="radio"># Botão de rádio
<select># Lista suspensa
<option># Opção da lista suspensa
<optgroup># Grupo de opções
<textarea># Área de texto multilinha
📋Botões e Controles
<button type="submit"># Botão de envio
<button type="reset"># Botão de reset
<button type="button"># Botão genérico
<input type="submit"># Botão de envio (input)
<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
<input type="date"># Seletor de data
<input type="time"># Seletor de hora
<input type="datetime-local"># Seletor de data e hora local
<input type="month"># Seletor de mês
<input type="week"># Seletor de semana
<input type="color"># Seletor de cor
<input type="range"># Controle deslizante
<input type="file"># Upload de arquivos
📋Validação de Formulários
required# Campo obrigatório
pattern="[A-Za-z]{3}"# Padrão de validação
minlength="3"# Comprimento mínimo
maxlength="50"# Comprimento máximo
min="0"# Valor mínimo
max="100"# Valor máximo
step="5"# Incremento
📋Elementos Auxiliares
<datalist># Lista de opções predefinidas
<output># Resultado de um cálculo ou ação
<progress># Barra de progresso
<meter># Medidor escalar
<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
<audio controls># Reprodutor de áudio
<video controls># Reprodutor de vídeo
<source src="file.mp4" type="video/mp4"># Fonte de mídia com tipo específico
<track kind="subtitles" src="subtitles.vtt"># Trilha de legendas ou legendas ocultas
<video autoplay loop muted># Vídeo com reprodução automática
<video poster="poster.jpg"># Imagem de pôster do vídeo
📋Gráficos e Canvas
<canvas># Elemento para desenho gráfico via JavaScript
<svg># Gráfico vetorial escalável
<canvas width="300" height="150"># Canvas com dimensões
<svg viewBox="0 0 100 100"># SVG com viewBox
📋Elementos Gráficos
<map># Mapa de imagem
<area># Área clicável em mapa
<canvas id="myCanvas"># Canvas com ID para JavaScript
<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
<meta name="description" content="..."># Descrição da página para SEO
<meta name="keywords" content="..."># Palavras-chave para SEO
<meta name="author" content="..."># Autor da página
<meta name="robots" content="index, follow"># Diretivas para robôs de busca
<meta name="viewport" content="width=device-width, initial-scale=1.0"># Configuração para responsividade
📋Open Graph
<meta property="og:title" content="..."># Título para compartilhamento
<meta property="og:description" content="..."># Descrição para compartilhamento
<meta property="og:image" content="..."># Imagem para compartilhamento
<meta property="og:url" content="..."># URL canônica
<meta property="og:type" content="website"># Tipo de conteúdo
📋Twitter Cards
<meta name="twitter:card" content="summary"># Tipo de card do Twitter
<meta name="twitter:title" content="..."># Título para Twitter
<meta name="twitter:description" content="..."># Descrição para Twitter
<meta name="twitter:image" content="..."># Imagem para Twitter
📋Otimização de Performance
<link rel="preload" href="..."># Pré-carregamento de recursos
<link rel="prefetch" href="..."># Pré-busca de recursos
<link rel="dns-prefetch" href="..."># Pré-resolução DNS
<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
aria-label="descrição"# Rótulo acessível para elementos
aria-describedby="id"# Elemento que descreve outro
aria-expanded="true"# Estado expandido/colapsado
aria-hidden="true"# Esconde de tecnologias assistivas
aria-live="polite"# Região de atualização dinâmica
📋Roles Semânticos
role="navigation"# Role semântico para navegação
role="main"# Conteúdo principal
role="complementary"# Conteúdo complementar
role="search"# Área de busca
role="alert"# Alerta importante
📋Navegação por Teclado
tabindex="0"# Torna elemento focável
tabindex="-1"# Focável programaticamente
accesskey="s"# Tecla de atalho
autofocus# Foco automático no carregamento
📋Conteúdo Alternativo
<img src="..." alt="Descrição detalhada"># Texto alternativo para imagens
<img src="..." alt="" role="presentation"># Imagem decorativa
<longdesc="descricao.html"># Descrição longa
<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 ☕