Cabeçalho da página HTML
Para que serve o <head> no documento HTML?
O cabeçalho de uma página HTML é representado pelo elemento <head> e contém informações não visuais que desempenham um papel fundamental na configuração e descrição do documento. Dentro do <head> estão incluídos elementos como:
- Título da janela/aba do navegador.
- Descrição do conteúdo.
- Nome do autor.
- Ícone da janela (favicon).
- Metadados.
- Importação de estilos e scripts.
Essas informações não aparecem no corpo visível da página, mas são essenciais para buscadores, redes sociais e para o próprio funcionamento do site.
Tags comuns do <head>
| Tag | Descrição |
|---|---|
<title> | Define o título do documento que aparece na aba do navegador. |
<meta> | Fornece informações adicionais (metadados) sobre o conteúdo. |
<link> | Importa arquivos externos, como folhas de estilo (CSS). |
<style> | Permite inserir blocos de código CSS diretamente no documento. |
<script> | Adiciona código JavaScript ou importa scripts externos. |
Título do documento
O elemento <title> define o título do documento, que será exibido na aba/janela do navegador e utilizado por buscadores e redes sociais ao compartilhar a página.
Exemplo:
<head>
<title>Minha primeira página web!</title>
</head>
Nota: Esse título não aparece no corpo visível da página. Para exibir um título no conteúdo, use <h1> dentro do <body>:
Exemplo:
<body>
<h1>Minha primeira página web!</h1>
</body>
Metadados do cabeçalho HTML
Use o elemento <meta> para fornecer informações descritivas sobre a página, como autor, descrição e palavras-chave. Esses dados ajudam mecanismos de busca a entender o conteúdo e a relevância do documento.
Exemplos comuns de <meta>:
| Tag | Descrição |
|---|---|
<meta name="author" content="Arthur Ronconi"> | Define o nome do autor do conteúdo da página. |
<meta name="description" content="Tutorial sobre HTML5"> | Adiciona uma breve descrição sobre o conteúdo da página. |
<meta name="keywords" content="HTML, CSS, JavaScript"> | Define palavras-chave relacionadas ao conteúdo. |
<meta name="robots" content="noindex, nofollow"> | Define como os robôs de busca devem indexar a página. |
Dica: Sempre insira as tags <meta> dentro do <head>.
Importando arquivos externos
Use <link> para para importar arquivos externos, como folhas de estilo CSS ou o favicon da página.
| Tag | Descrição |
|---|---|
<link href="style.css" rel="stylesheet"> | Importa um arquivo de estilos CSS. |
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> | Define o ícone da página (favicon). |
Dica: Assim como as tags <meta>, sempre insira as tags <link> dentro do <head>.
Como adicionar estilos CSS?
Use o elemento <style> para inserir diretamente um bloco de código CSS dentro do <head>.
Exemplo:
<style>
body { background: lightyellow }
p { font-size: 18px }
</style>
No exemplo acima, mudamos a cor da página HTML alterando a propriedade background do elemento body e o tamanho padrão da fonte dos parágrafos para 18px.
Como adicionar código JavaScript?
Use <script> para adicionar scripts JavaScript, seja diretamente ou importando um arquivo externo.
| Tag | Descrição |
|---|---|
<script src="app.js"></script> | Importa um arquivo JavaScript externo. |
<script>alert('Bem vindo ao site!')</script> | Adiciona um bloco de código em JavaScript. |
Dica: O elemento <script> pode ser inserido no <head> ou no <body>. A escolha depende da ordem de carregamento desejada:
- Use no
<head>para scripts que devem ser carregados antes do conteúdo da página. - Use no final do
<body>para otimizar o carregamento do conteúdo.