Tag HTML <head>
A tag HTML <head> contém metadados da página (título, charset, viewport, links, scripts). Aprenda sua sintaxe, meta tags comuns e exemplos.
A tag <head> contém metadados (título do documento, conjunto de caracteres, estilos, links, scripts) — informações específicas sobre a página web que não são exibidas ao usuário. Os metadados fornecem aos navegadores e mecanismos de busca informações técnicas sobre a página web.
Onde o <head> é colocado
O <head> é o primeiro elemento dentro de <html>, posicionado diretamente antes do <body>. Enquanto o <body> contém o conteúdo visível da página, o <head> contém as informações de bastidores que o navegador precisa para renderizar e identificar a página:
<!DOCTYPE html>
<html>
<head>
<!-- metadata goes here -->
</head>
<body>
<!-- visible content goes here -->
</body>
</html>O <head> é tecnicamente obrigatório, mas se você omiti-lo, os navegadores criarão um silenciosamente e moverão os elementos de nível de cabeçalho (como <title> e <meta>) para dentro dele. Escrevê-lo explicitamente mantém o documento previsível e válido.
Elementos que podem ser colocados no <head>
O <head> inclui os seguintes elementos:
- A tag
<title>define o título de uma página web (obrigatório). Pode ser confundida com a tag<h1>, mas são diferentes. A tag<h1>especifica o título do conteúdo da página, enquanto a tag<title>é um metadado que representa o título de todo o conteúdo HTML, e não seu conteúdo. - A tag
<style>contém código CSS que define como os elementos HTML devem ser renderizados em um navegador. - A tag
<base>define uma URL absoluta (base) para todas as URLs relativas. - A tag
<link>define o relacionamento entre o documento HTML atual e o recurso ao qual ele se refere, ou contém um link para uma folha de estilos externa. Pode ter dois atributos: rel="stylesheet" e href. - A tag
<meta>fornece informações adicionais (metadados) sobre um documento HTML. O<head>de uma página pode incluir diferentes tipos de elementos<meta>que podem conter atributos name e content. - A tag
<script>contém um script (geralmente JavaScript) ou referência a um arquivo externo com scripts. Este elemento pode ser incluído no<head>. Às vezes, é melhor colocá-lo no final do<body>para melhorar o desempenho de carregamento da página. O elemento<script>pode parecer vazio, mas não é. - A tag
<noscript>define um texto alternativo, que é exibido caso o navegador não suporte scripts ou os scripts estejam desativados pelo usuário.
A tag <head> vem em pares. O conteúdo é escrito entre as tags de abertura (<head>) e fechamento (</head>).
Exemplos
Exemplo da tag HTML <head> usada com as tags <title> e <style>:
Exemplo de uma tag head HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<style>
body{
background-color: #d3d3d3;
}
p{
color: #1c87c9;
}
a{
color: red;
}
</style>
</head>
<body>
<p>Paragraph</p>
<a href="#">Link</a>
</body>
</html>No exemplo dado, a tag <head> é usada com as tags <title> e <style>. A tag <title> define o título do documento, que é exibido na janela do navegador. Na tag <style>, o estilo do documento é definido: o fundo do documento é cinza-claro, o texto nos parágrafos marcados com a tag <p> é azul, e os links dentro da tag <a> são vermelhos.
Exemplo da tag HTML <head> usada com a tag <link>:
O conteúdo da página
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<p>The content of the page</p>
</body>
</html>Aqui a tag <link> conecta a página a uma folha de estilos externa em css/style.css (um arquivo numa pasta css ao lado do arquivo HTML). Manter o CSS em um arquivo separado é a abordagem padrão para projetos reais, pois a mesma folha de estilos pode ser compartilhada entre muitas páginas e armazenada em cache pelo navegador. A página acima só exibirá estilos se o arquivo style.css existir no caminho indicado.
Exemplo da tag HTML <head> usada com a tag <meta>:
Tag HTML <head>
<!DOCTYPE html>
<html>
<head>
<meta name="title" content="HTML and CSS Books" />
<meta name="description" content="HTML and CSS Basics for Beginners" />
<meta http-equiv="refresh" content="30" />
</head>
<body>
<p>The content of the page</p>
</body>
</html>A tag <meta> fornece metadados sobre a página. O conteúdo de name="description" é usado pelos mecanismos de busca como trecho abaixo de um resultado de pesquisa. A linha http-equiv="refresh" recarrega a página a cada 30 segundos — isso raramente é adequado hoje em dia (prejudica a acessibilidade e normalmente é substituído por JavaScript ou cabeçalhos HTTP), portanto, use-o com moderação.
As tags <meta> que você quase sempre precisa
Algumas tags <meta> são tão comuns que praticamente todas as páginas modernas as incluem.
Codificação de caracteres e viewport
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My Page</title>
</head><meta charset="UTF-8">declara a codificação de caracteres para que letras acentuadas, símbolos e emojis sejam renderizados corretamente. Coloque-o primeiro no<head>.<meta name="viewport" content="width=device-width, initial-scale=1">instrui os navegadores móveis a corresponder a largura do layout à largura do dispositivo, em vez de dar zoom em uma página com tamanho de desktop. Omitir isso é a causa mais comum de páginas "minúsculas" em celulares, portanto, inclua-o em todas as páginas responsivas.
Tags Open Graph para compartilhamento em redes sociais
Quando alguém compartilha sua URL em plataformas como Facebook, LinkedIn ou Slack, esses serviços leem as tags meta Open Graph (og:) para construir o cartão de pré-visualização — o título, resumo e imagem em miniatura.
<head>
<meta property="og:title" content="Learn HTML - W3docs" />
<meta property="og:description" content="A beginner-friendly HTML tutorial." />
<meta property="og:image" content="https://www.example.com/preview.png" />
<meta property="og:url" content="https://www.example.com/learn-html" />
</head>Observe que as tags Open Graph usam o atributo property (não name). A URL de og:image deve ser absoluta (começar com https://), porque a plataforma social a busca em seus próprios servidores. Consulte o capítulo <meta> para a lista completa de tags <meta>.
Atributos
No HTML5, a tag <head> não possui atributos específicos. Ela suporta apenas os Atributos Globais e os Atributos de Evento.