Documentação de HTML
Referência concisa e baseada em exemplos de HTML. Leia o conceito, veja o código e pratique em uma jornada da Coddy.
Inicie uma jornada guiada de HTMLPrimeiros passos
- Doctype`<!DOCTYPE html>` é a primeira linha de todo documento HTML. Ele diz ao navegador para renderizar a página no modo padrão, e não no modo quirks. Veja a sintaxe, o que os doctypes antigos provocam e como verificar o modo.
- Tags HTMLAs tags HTML marcam o conteúdo para o navegador saber o que é cada parte: um título, um parágrafo, um link, uma imagem. Veja como tags e elementos funcionam, quais tags não têm fechamento, como funciona o aninhamento e quais tags você mais vai usar.
- Atributos HTMLOs atributos acrescentam informação a um elemento HTML: para onde um link leva, o que uma imagem mostra, qual classe CSS se aplica. Veja a sintaxe, os atributos globais que todo elemento aceita, class e id, atributos booleanos e atributos data-*.
- Comentário HTMLUm comentário HTML é o texto entre <!-- e --> que o navegador não exibe. Veja a sintaxe, comentários de várias linhas, como comentar código, o atalho do editor, por que comentários não podem ser aninhados e por que nunca são privados.
- Tag divA tag <div> é um contêiner block genérico, sem significado próprio. Veja como agrupar conteúdo com ela, estilizá-la com uma classe, montar layouts com divs e flexbox, e quando uma tag semântica ou um botão é a escolha melhor.
- Tag spanA tag <span> é um contêiner inline genérico: ela envolve algumas palavras dentro de uma linha para você estilizá-las ou manipulá-las com script sem quebrar a linha. Veja como usar, como ela difere da div e quando uma tag mais específica serve melhor.
Texto
- Títulos h1 a h6O HTML tem seis níveis de título, de <h1> a <h6>, que dão à página a sua estrutura. Veja os tamanhos padrão, como ordenar os títulos, quantas tags h1 usar, como mudar o tamanho com CSS e como os leitores de tela usam os títulos.
- Quebra de linhaUse <br> para começar uma linha nova dentro de um bloco de texto. Veja quando <br> é a escolha certa e quando um parágrafo é melhor, como manter as quebras do seu texto, como deixar palavras longas quebrarem com <wbr> e como impedir que uma linha quebre.
- Espaço em HTMLOs navegadores juntam qualquer sequência de espaços do HTML em um só. Veja como adicionar espaços extras com , o que faz um espaço não separável, como manter espaços e tabs com <pre> e white-space, e quando o espaçamento com CSS é a melhor ferramenta.
- Negrito e itálicoDeixe o texto em negrito no HTML com <strong> ou <b>, e em itálico com <em> ou <i>. Veja qual tag usar em cada caso, como combinar negrito e itálico e como fazer negrito ou itálico com CSS.
- SublinhadoSublinhe texto no HTML com <u> ou com text-decoration no CSS, e risque o texto com <s> ou <del>. Veja o que cada tag significa, como <ins> e <del> marcam edições e por que sublinhar um texto que não é link confunde o leitor.
- SobrescritoEscreva texto sobrescrito com <sup> e subscrito com <sub>: expoentes, números ordinais, marcadores de nota de rodapé e fórmulas químicas. Veja os usos comuns, como evitar que afastem as linhas e quando um caractere Unicode ou MathML serve melhor.
- Linha horizontalDesenhe uma linha horizontal no HTML com a tag <hr>. Veja o que ela significa, como mudar cor, espessura, largura e estilo com CSS, como montar um divisor com texto no meio e como fazer uma linha vertical.
- Centralizar textoCentralize texto no HTML com a propriedade CSS text-align: center. Veja onde colocá-la, por que ela não funciona num span, como centralizar texto na vertical dentro de uma caixa, como alinhar ao início, ao fim ou às duas margens e como dar recuo a parágrafos.
Links e imagens
- Link HTMLComo o elemento <a> cria links: o atributo href, URLs absolutas e relativas, pular para uma seção da página com #id, links de download, cards clicáveis e os erros que quebram os links.
- Abrir em nova abaAdicione target="_blank" a um link para abri-lo numa nova aba. Esta página cobre rel="noopener" e noreferrer, como avisar o usuário de que o link abre uma nova aba, os outros valores de target e como fazer isso com JavaScript.
- Link mailtoCrie um link que abre um novo e-mail com href="mailto:", preencha assunto, corpo, cc e bcc, codifique os valores do jeito certo e faça links para ligar com tel: e sms:.
- Botão com linkO jeito certo de fazer um botão que leva a outra página é um link estilizado como botão. Veja por que um botão dentro de um link e a navegação com onclick dão problema, quando um botão de formulário é a escolha certa e como estilizar e desativar botões de link.
- ImagensComo inserir uma imagem no HTML com a tag <img>: src e alt, definir o tamanho com width e height, imagens responsivas, recorte com object-fit, legendas com figure, lazy loading e o espaço embaixo das imagens.
Listas e tabelas
- ListasComo fazer listas em HTML: marcadores com <ul>, listas numeradas com <ol> (start, reversed, letras e algarismos romanos), listas aninhadas, listas de descrição e como estilizar ou remover os marcadores com CSS.
- Tabela HTMLComo fazer uma tabela em HTML: linhas com <tr>, células com <td>, células de cabeçalho com <th> e scope, legendas, thead, tbody e tfoot, linhas zebradas e tabelas que rolam em telas pequenas.
- Borda da tabelaComo colocar bordas numa tabela HTML com CSS: linhas simples com border-collapse, border-spacing, só linhas horizontais, só bordas internas, cantos arredondados e por que o atributo border está obsoleto.
- Colspan e rowspanMescle células da tabela entre colunas com colspan e entre linhas com rowspan. Veja como contar as células para a tabela não ficar torta, montar cabeçalhos agrupados e manter tabelas mescladas legíveis para leitores de tela.
Formulários
- Formulário HTMLComo montar um formulário em HTML: o elemento form, atributos name, action e method (GET vs POST), agrupar com fieldset e legend, validação nativa com required e pattern, e tratar o envio no JavaScript.
- Tipos de inputTodos os tipos da tag <input> do HTML num só lugar: text, email, password, number, range, date e time, color, file, hidden e os demais, com o que cada um valida, o teclado que abre no celular e os atributos que eles compartilham.
- Botão HTMLComo fazer um botão no HTML com o elemento <button>: os três tipos (submit, button, reset), enviar um valor com o formulário, botões desativados, ícones e um estilo CSS que mantém o contorno de foco.
- CheckboxComo fazer uma checkbox no HTML com <input type="checkbox">: labels, o atributo checked, o que o formulário envia quando ela está marcada e quando não está, grupos de checkboxes, selecionar todos com o estado indeterminate e estilo.
- Radio buttonComo os radio buttons funcionam no HTML: agrupar com o atributo name, uma opção padrão com checked, grupos obrigatórios, ler o valor selecionado no JavaScript, comportamento no teclado e estilizar como círculos ou cards personalizados.
- Select no HTMLComo fazer uma lista suspensa no HTML com <select> e <option>: valores, uma opção padrão ou de placeholder, required, grupos de opções, seleção múltipla, ler e definir o valor no JavaScript e estilizar a seta.
- TextareaComo fazer um campo de texto de várias linhas com <textarea>: rows e cols, texto padrão entre as tags, redimensionar e crescer automaticamente, maxlength com contador de caracteres, quebras de linha no texto enviado e estilo.
- Label no HTMLComo o elemento <label> dá nome a um campo de formulário: ligar com for e id ou envolvendo o campo, a área de clique maior em checkboxes e radios, dicas e mensagens de erro, labels ocultos e os erros que quebram a ligação.
HTML semântico
- HTML semânticoHTML semântico significa escolher as tags pelo que o conteúdo é, não pela aparência. Veja as tags semânticas de layout (header, nav, main, article, aside, footer), o que elas oferecem a leitores de tela e buscadores e como verificar a estrutura da sua página.
- Tag headerO elemento <header> guarda a introdução de uma página ou de uma seção: um logo, um título, a navegação, a autoria. Veja como montar o cabeçalho de um site, como <header> difere de <head> e dos títulos, como usá-lo dentro de artigos e como deixá-lo fixo.
- Tag footerO elemento <footer> fecha uma página ou uma seção: copyright, dados de contato, links, informações do autor. Veja como montar o rodapé de um site com colunas de links, como mantê-lo embaixo numa página curta e como os footers funcionam dentro de artigos.
- Tag navO elemento <nav> marca um bloco de links de navegação principais. Veja como montar uma barra de navegação com <nav> e uma lista, como marcar a página atual, como nomear vários navs numa página e como fazer um botão de menu para celular.
- Tag sectionO elemento <section> agrupa conteúdo de um mesmo tema sob um título próprio. Veja quando usar <section>, quando <article> ou <div> é a escolha melhor, como os três se aninham e como uma section com rótulo vira um landmark.
Head e meta tags
- Tag titleO elemento <title> dá nome à página na aba do navegador, nos favoritos e nos resultados de busca. Veja onde ele fica, qual tamanho deve ter, como difere de <h1> e do atributo title e como mudá-lo com JavaScript.
- Meta viewportA meta tag viewport diz aos celulares para montar a página na largura da tela, e não numa largura de desktop. Veja a tag padrão, o que cada valor faz, por que o CSS responsivo depende dela e quais valores evitar.
- RedirecionamentoRedirecione uma página para outra com uma tag meta refresh em HTML puro, com JavaScript ou no servidor. Veja a sintaxe do meta refresh, como atualizar uma página automaticamente, por que um redirecionamento 301 no servidor é a escolha melhor e o que os buscadores fazem com cada um.
- FaviconO favicon é o pequeno ícone na aba do navegador. Veja a tag link que o adiciona, quais arquivos e tamanhos publicar (ICO, SVG, PNG, apple-touch-icon), como fazer um favicon em SVG ou com emoji, como trocá-lo com JavaScript e por que um antigo continua aparecendo.
- Atributo langO atributo lang diz a navegadores, leitores de tela e ferramentas de tradução em que idioma está o seu conteúdo. Veja onde colocá-lo, quais códigos usar (en, en-US, pt-BR), como marcar uma expressão em outro idioma e o que ele muda de forma visível.
Mídia e interativos
- Tag iframeO elemento <iframe> mostra outra página web dentro da sua. Veja os atributos de que você precisa (src, title, width, height), como incorporar vídeos do YouTube e mapas, como deixar um iframe responsivo, como o sandbox limita o que ele pode fazer e por que alguns sites se recusam a carregar dentro de um.
- Tag videoO elemento <video> reproduz arquivos de vídeo com o player do próprio navegador. Veja a marcação, os atributos que importam (controls, autoplay, muted, loop, playsinline, poster, preload), formatos alternativos com <source>, legendas com <track>, tamanho responsivo e controle da reprodução com JavaScript.
- Tag audioO elemento <audio> reproduz arquivos de som com o player nativo do navegador. Veja a marcação, os atributos (controls, autoplay, loop, muted, preload), quais formatos usar, por que o autoplay com som é bloqueado e como criar o seu próprio botão de play com JavaScript.
- Details e summaryOs elementos <details> e <summary> criam uma seção recolhível sem JavaScript: o summary fica sempre visível e clicar nele mostra ou esconde o resto. Veja a marcação, os atributos open e name, acordeões, como estilizar a seta e o evento toggle.
