Seu primeiro arquivo
Todo documento HTML segue o mesmo esqueleto básico. Aprender essas poucas linhas de cabeçalho evita comportamentos estranhos do navegador.
Estudar esta lição interativa →Até aqui você viu tags soltas, e o motor deste curso completou o resto do documento por baixo dos panos para você poder ver o resultado na hora. Mas um arquivo .html de verdade, o que o navegador realmente abre, precisa de um esqueleto mínimo ao redor de tudo isso. Sem ele, o navegador não sabe com certeza qual versão de HTML está lendo nem em que codificação de caracteres o texto foi escrito, e pode acabar interpretando a página de um jeito inconsistente entre navegadores diferentes.
<!DOCTYPE html>
A primeiríssima linha do arquivo. Avisa ao navegador para usar as regras modernas de HTML, e não um modo antigo e imprevisível.
<html>
Envolve o documento inteiro. Recebe o atributo lang (ex.: lang="pt-BR"), que diz em que idioma a página está.
<head>
Guarda informações que o navegador usa, mas não desenha na tela: título da aba, codificação de caracteres, e mais adiante o link para o CSS.
<meta charset="UTF-8">
Dentro do head, diz ao navegador como ler as letras do arquivo. Sem essa linha, acentos podem aparecer quebrados, como "ação" no lugar de "ação".
<title>
Dentro do head. Define o texto que aparece na aba do navegador e nos resultados de busca.
<body>
Aqui, sim, mora tudo o que é visível: títulos, parágrafos, imagens, listas, tudo que você já viu até agora.
O html envolve tudo. Dentro dele, o head guarda metadados que não aparecem na tela (como o title), e o body guarda tudo o que é visível, títulos, parágrafos, imagens e o resto.
Rode o exemplo abaixo e repare: só o que está dentro do <body> aparece desenhado na tela de visualização. O <head>, com o <title> lá dentro, existe, mas não desenha nada, ele só carrega metadados.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Só o body aparece na tela. O title define o nome da aba do navegador.
Um exemplo real do que o <title> importa: é ele que aparece escrito na aba do navegador, é ele que o Google costuma mostrar em azul nos resultados de busca, e é ele o nome sugerido quando alguém salva a página nos favoritos. Um site sem título (ou com um título genérico do tipo "Documento sem nome") perde identidade nessas três situações de uma vez.
Esquecer o <!DOCTYPE html> pode jogar o navegador num modo de compatibilidade antigo (chamado quirks mode), em que medidas e comportamentos ficam menos previsíveis, um problema clássico e difícil de diagnosticar. Colocar conteúdo visível dentro do <head> (um <h1>, por exemplo) não faz o navegador ignorá-lo: ele fecha o head sozinho e joga esse conteúdo, e tudo o que veio depois dele, para dentro do body. O texto até aparece, mas a estrutura que você escreveu não é a que o navegador montou, e o que estava depois sai do lugar. Abra as ferramentas do navegador (aba Elements) e compare. E deixar o <title> vazio é um problema silencioso: a página funciona, só fica com uma identidade fraca nas abas e nas buscas.
Se você escreve em português e, ao abrir o arquivo, vê "ação" em vez de "ação", o navegador leu o arquivo com a codificação errada. A correção é a linha <meta charset="UTF-8"> dentro do <head>, de preferência logo no começo, e salvar o arquivo também como UTF-8 no editor. Os exemplos deste curso já trazem essa linha; mantenha-a em todo arquivo que você criar.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Complete o title e o conteúdo do body.