Trilha · Iniciante
HTML
A estrutura da página, tag por tag, do jeito que o navegador e o Google leem.
21 lições em ordem de estudo
Começando
- 01O que é HTMLHTML é marcação, não programação: o que cada tag faz, o que o navegador faz com ela e por que um arquivo .html abre sem instalar nada.testado
- 02Estrutura da páginaO esqueleto de um arquivo .html explicado linha por linha, e o que muda na página quando falta o doctype, o lang ou o próprio head.testado
- 03Tags e atributosAbertura, fechamento, conteúdo e atributos: como ler qualquer tag HTML, quais são as tags vazias e quais atributos funcionam em todas elas.testado
- 04Meta tagsO que cada meta tag faz de verdade: o charset que salva os acentos, o viewport que ajusta o celular e por onde entram o CSS e o JavaScript.testado
Texto
- 05Títulos e parágrafos em HTML: h1 a h6, p, br e hrComo estruturar o texto da página com h1 a h6 e a tag p, quando usar br ou hr, e por que pular do h1 para o h4 atrapalha leitor e buscador.testado
- 06Formatar textostrong, em, mark, small, code, pre e blockquote: o que cada tag significa, como um leitor de tela lê e quando o trabalho é do CSS.testado
- 07EntidadesQuando você precisa escrever < em vez de <, por que não é um espaço comum e o que muda quando o arquivo já está salvo em UTF-8.testado
Links e imagens
Listas e tabelas
- 10ListasLista com marcador, numerada e de definição: qual usar em cada caso, como aninhar sem quebrar e o que o navegador entrega ao leitor de tela.testado
- 11TabelasMontar tabela de dados com cabeçalho, mesclar células com colspan e rowspan e marcar th com scope para a tabela fazer sentido sem enxergar.testado
Formulários
- 12Formulário em HTML: form, label e o que o navegador enviaComo montar um formulário que funciona sem JavaScript: action, method, name, label ligado ao campo e o botão que de fato envia os dados.testado
- 13Tipos de input HTML: qual campo usar para cada dadotext, email, number, date, file, checkbox, radio e range: o que cada type muda no teclado do celular, na validação e no valor enviado.testado
- 14Validação nativarequired, pattern, min, max e minlength: o que o navegador valida sozinho, a mensagem que ele mostra e como trocar esse texto padrão.testado
Semântica e acessibilidade
- 15HTML semânticoQuando trocar a div por uma tag com significado, a diferença real entre section e article e o que muda para leitor de tela e para o Google.testado
- 16AcessibilidadeO que se resolve só com HTML, quando o ARIA entra e como auditar a página no terminal com axe-core: 10 violações plantadas, corrigidas até zero.testado
Mídia e incorporação
- 17Vídeo e áudioComo colocar vídeo e áudio na página com controles nativos, legenda e poster — e por que o autoplay com som é bloqueado por todo navegador.testado
- 18iframeComo usar a tag iframe com segurança: title, loading e sandbox, e por que alguns sites simplesmente se recusam a abrir dentro de um.testado
- 19SVG e canvasSVG inline, SVG em img e o canvas: o que fica no DOM, o que escala sem borrar, o que pesa menos e o que o leitor de tela consegue ler.testado
HTML avançado
- 20data attributesComo usar data-* para levar informação no markup, ler com dataset no JavaScript e selecionar por atributo no CSS, sem inventar atributo inválido.testado
- 21Open GraphO que o Google e o WhatsApp leem do seu HTML: title, meta description, hierarquia de títulos, o cartão do link compartilhado e os ícones da aba.testado