Cheat sheet de HTML e CSS: pesquisável, para imprimir, com demos | We.Inc
Busque todas as tags HTML e propriedades CSS comuns em uma só folha: layout semântico, texto, formulários, mídia, seletores, unidades, layout e visual, com mini demos ao vivo e um layout próprio para impressão.
Cheat sheet de HTML e CSS
Esta folha lista as tags HTML e propriedades CSS usadas em quase todo site, agrupadas por função: configuração do documento, layout semântico, texto, listas, mídia, formulários, seletores, unidades, layout e estilo visual. Digite no filtro para encontrar uma, abra uma mini demo para vê-la funcionando ou clique em Imprimir para ter uma cópia limpa em papel.
O que tem na folha
Parte
Entradas
HTML
CSS
Com demo ao vivo
Filtre por palavra-chave ou alterne entre HTML e CSS, e a lista diminui enquanto você digita. As entradas com demo abrem uma pequena prévia isolada em sandbox. O layout de impressão esconde os controles e mantém a tabela de cada grupo junta na página.
Digite uma tag, propriedade ou tarefa, por exemplo table, sticky ou email, na caixa de filtro.
Restrinja a HTML ou CSS com os botões, ou deixe os dois ligados.
Clique em Mostrar demo em uma entrada para vê-la renderizada, e em Copiar para pegar a sintaxe.
Clique em Imprimir para ter uma cópia em papel ou PDF sem os elementos da página.
Prefira um elemento semântico antes de uma div. header, nav, main e footer dão de graça pontos de referência aos leitores de tela.
Todo controle de formulário precisa de um label. O texto de placeholder some quando a pessoa digita e não o substitui.
Comece cada folha de estilos com box-sizing: border-box em tudo. Assim as larguras significam o que você espera.
Prefira rem para tamanhos de fonte e espaçamentos que devem acompanhar a configuração de texto do leitor, e px para bordas finas.
Perguntas frequentes
Quantas tags HTML existem?
O HTML Living Standard define bem mais de cem elementos, mas as páginas do dia a dia usam algumas dezenas. Esta folha cobre os que você vai encontrar em quase todo site; o MDN mantém a referência completa de elementos.
Qual a diferença entre uma tag e um elemento?
Uma tag é a marcação que você digita, como <p> ou </p>. Um elemento é a coisa inteira que o navegador monta a partir dela: a tag de abertura, o conteúdo e a tag de fechamento. Elementos vazios como <img> e <br> não têm tag de fechamento.
Posso imprimir este cheat sheet?
Sim. O botão Imprimir abre a janela de impressão do navegador com um layout que remove o filtro, os botões e as demos e mantém as tabelas de sintaxe. Escolha Salvar como PDF para guardar uma cópia digital.
Devo aprender CSS ou um framework como o Tailwind primeiro?
Aprenda primeiro as propriedades CSS. Frameworks utilitários são atalhos para elas, então saber que p-4 significa padding: 1rem facilita o framework, e depurar nas ferramentas de desenvolvedor sempre mostra o CSS por baixo.
Como HTML e CSS dividem o trabalho
O HTML diz o que cada parte do conteúdo é: um título, uma lista, um campo de formulário, um bloco de navegação. O CSS diz como ela aparece e onde fica. Mantê-los separados significa que uma única folha de estilos pode mudar o visual de centenas de páginas e a marcação continua legível para buscadores e tecnologias assistivas.
Quando estiver em dúvida sobre qual elemento usar, pergunte como aquele conteúdo se chamaria em um documento impresso. Uma lista de passos é um ol, um conjunto de dados é um dl ou uma table, uma nota lateral é um aside.
Como ler regras CSS
Uma regra é um seletor seguido de chaves com pares de propriedade e valor separados por ponto e vírgula. Quando duas regras miram o mesmo elemento, vence o seletor mais específico; se empatarem, vence a que vem depois na folha de estilos.
Tudo junto em uma pequena página
Marcação semântica mais algumas linhas de CSS
Um header, o conteúdo principal com um formulário e um footer, estilizados com algumas das propriedades da folha.
Primeira linha de toda página; ativa o modo de padrões
Elemento raiz; lang define o idioma da página
Metadados, título, links para CSS e scripts
Charset, viewport, descrição e tags sociais
Conecta folhas de estilo, ícones e preloads
Carrega JavaScript; defer o executa depois da análise
Introdução ou barra superior de uma página ou seção
Um bloco de links de navegação principais
O conteúdo principal único; um por página
Um grupo temático de conteúdo, geralmente com título
Conteúdo independente, como um post ou um card de produto
Conteúdo relacionado mas secundário, como uma barra lateral
Informações finais: contato, aviso legal, links
Widget nativo de expandir e recolher, sem script
Uma caixa de diálogo modal ou não modal
Títulos em ordem; um h1 por página é o padrão
Um parágrafo
Importância forte e ênfase, negrito e itálico por padrão
Texto destacado
Código inline e blocos pré-formatados
Uma citação longa
Abreviação com sua forma por extenso
Uma data ou hora legível por máquina
Quebra de linha dentro do texto; quebra temática entre blocos
Listas não ordenadas e ordenadas
Lista de descrição com pares de nome e valor
Dados em tabela com legenda, cabeçalho e corpo
Célula de cabeçalho; scope a liga à sua coluna ou linha
Um link; adicione target e rel para novas abas
Uma imagem; alt, width e height são esperados
Direção de arte e alternativas de formato
Mídia independente com legenda
Vídeo incorporado
Incorpora outra página
Gráficos vetoriais inline
Envolve os campos e os envia
Dá nome a um controle; clicar nele foca o controle
Texto, e-mail, número, data, checkbox, radio e mais
Lista suspensa
Campo de texto com várias linhas
Um botão; defina type para evitar envios acidentais
Agrupa controles relacionados sob uma legenda
Validações nativas antes do envio
Seletores de nome de elemento, classe e ID
Qualquer profundidade versus só filhos diretos
Próximo irmão, ou qualquer irmão posterior
Corresponde pela presença ou valor de um atributo
Estados de ponteiro sobre o elemento e foco pelo teclado
Escolhe itens pela posição
Seleção pelo pai e agrupamento de seletores
Conteúdo gerado antes ou depois de um elemento
Pixel CSS absoluto
Relativo ao tamanho de fonte da raiz / ao tamanho de fonte do elemento
Relativo ao pai (a dimensão depende da propriedade)
Unidades de viewport; dvh acompanha as barras de ferramentas do celular
Largura do caractere 0, útil para o comprimento da linha
Fração do espaço livre em um grid
Valor fluido entre um mínimo e um máximo
A largura inclui padding e borda
Espaço fora e dentro da borda
Como a caixa participa do layout
Linhas ou colunas em uma dimensão
Linhas e colunas em duas dimensões
Tira uma caixa do fluxo normal ou a fixa dentro dele
Ordem de empilhamento de elementos posicionados
O que acontece com o conteúdo que não cabe
Estilos para um tamanho de tela ou preferência
Cor do texto e fundo
Peso, tamanho, altura da linha e família em uma linha só