Carregando...

O elemento head HTML

A sessão anterior focou em um filho do head do documento: title. Agora aproxime o zoom no próprio elemento head — a caixa que guarda metadados da página para navegadores, ferramentas de busca e recursos vinculados. Os visitantes não leem o head como leem uma história na vista principal. Eles sentem seus efeitos pelo rótulo da aba, caracteres corretos, escala em celular e folhas de estilo que carregam antes de o conteúdo do body ser pintado.

Para que serve o head

<head>...</head> fica dentro de <html>, normalmente logo após a tag de abertura html e antes de <body>. É a sala de controle do documento para metadados e links de recursos. Não é um banner visível. O banner visível da página que você pode construir depois com um elemento <header> é uma tag diferente com um trabalho diferente.

Resposta direta

Coloque metadados em <head>...</head>: um title, geralmente <meta charset="UTF-8">, muitas vezes uma meta viewport para layout móvel, e <link rel="stylesheet" href="..."> quando usar CSS externo. Coloque títulos visíveis, parágrafos, imagens e interface interativa em <body>. title é um filho importante de head — não substitui head.

Filhos comuns em um relance

📊 Filhos comuns de head

Elemento Função
title Rótulo da aba / do documento
meta charset Codificação de caracteres (UTF-8)
meta viewport Dica de largura e escala em celular
link stylesheet Arquivo CSS externo
style CSS interno opcional
script Scripts opcionais (hábitos de colocação variam; muitos iniciantes carregam no fim do body)

Um head inicial prático

Você não precisa de todas as tags meta possíveis no primeiro dia. Um head inicial confiável cobre codificação, viewport móvel, título do documento e um link de folha de estilo quando o CSS vive em um arquivo separado.

Um head inicial prático

html
HTML Code 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello</h1>
<p>Visible content lives in the body.</p>
</body>
</html>

Lendo o exemplo

  • meta charset="UTF-8" diz ao navegador como decodificar caracteres — incluindo emoji e texto não latino das sessões anteriores
  • viewport ajuda navegadores móveis a usar a largura do dispositivo em vez de um layout de desktop minúsculo e afastado
  • title rotula a aba, como você praticou na sessão de título de página
  • link rel="stylesheet" anexa styles.css sem colocar regras CSS dentro de cada arquivo HTML
  • Tudo o que o visitante lê na página fica sob body

Charset primeiro, cedo no head

Coloque a meta charset perto do topo do head para que o navegador conheça a codificação antes de interpretar o restante do texto do documento. UTF-8 é o padrão moderno que você deve usar, salvo uma restrição legada rara. Charset ausente ou tardio é uma causa clássica de caracteres quebrados que parecem corrupção «aleatória».

Viewport e navegadores móveis

Sem uma meta viewport, muitos telefones assumem uma tela de desktop larga e encolhem a página. O inicial comum width=device-width, initial-scale=1.0 diz ao navegador para combinar a largura do dispositivo e começar em zoom normal. Você refinará o design responsivo com CSS depois; o viewport é o aperto de mão do lado HTML que torna esses layouts usáveis em telefones.

Ligando CSS a partir do head

Folhas de estilo externas mantêm a apresentação separada da estrutura. O elemento link no head com rel="stylesheet" e um caminho href é a forma amigável para iniciantes de anexar CSS. Os caminhos seguem as mesmas ideias de caminhos de arquivo que você aprendeu antes. Se o arquivo CSS estiver ausente, o HTML ainda funciona — só fica sem estilo.

head vs body vs header

  • head — metadados e links de recursos; não o artigo principal legível
  • body — conteúdo visível que os visitantes leem e com o qual interagem
  • header — um elemento de seccionamento visível para banners ou blocos introdutórios dentro de body (você o usará em sessões de layout posteriores)
    Não renomeie head para header esperando que sejam aliases. São elementos diferentes. Confundi-los leva a marcação inválida ou ineficaz.

Scripts e head (nota para iniciantes)

Scripts podem aparecer em head ou body. Muitas páginas de ensino carregam scripts simples no fim do body para que a estrutura HTML exista primeiro. Estratégias avançadas de carregamento vêm depois. Para esta sessão, saiba que script é permitido como filho de head, mas o conteúdo visível ainda não pertence ao head.

Pratique no seu editor

  1. Comece com um esqueleto HTML básico com html, head e body.
  2. Dentro de head, adicione charset UTF-8, uma meta viewport e um title claro.
  3. Adicione um link para um styles.css simples se tiver um (ou crie um arquivo vazio para o caminho ser real).
  4. Mantenha todo o texto visível e os títulos apenas em body.
  5. Use Exibir código-fonte ou o painel Elements das DevTools para confirmar que a seção head corresponde à sua intenção.
  6. Remova temporariamente o viewport, recarregue em uma janela estreita ou emulador de telefone se puder, e note como a escala pode parecer diferente — depois restaure-o.

Erros fáceis

  • Colocar parágrafos, imagens ou títulos principais só dentro de head como se fosse a tela da página
  • Esquecer o charset e quebrar caracteres especiais e emoji
  • Pular o viewport e perguntar-se por que o layout móvel parece com zoom estranho
  • Confundir head (metadados) com header (seção visível mais adiante no curso)
  • Assumir que só title basta e omitir o charset em páginas multilíngues
  • Ligar uma folha de estilo com o caminho errado e culpar o HTML quando o CSS nunca carrega

Resumo

  • head guarda metadados e links de recursos; body guarda o conteúdo visível
  • Peças iniciais: charset, viewport, title e frequentemente um link CSS
  • title é um filho de head, não um substituto de head
  • head não é o mesmo elemento que o header visível
  • Coloque o charset cedo para o navegador decodificar o documento corretamente

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
6
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 1 de 1
Html Tutorial