O QUE É "HEAD" ?
🧠 O que é uma tag <head>?
O elemento <head> é uma seção essencial de qualquer página HTML , onde ficam informações invisíveis ao visitante , mas fundamentais para o funcionamento da página , SEO , responsividade e integração com scripts e estilos .
Ele é lido pelos navegadores e motores de busca ( Google, Bing, etc. ), e não exibe conteúdo visual para quem acessa o site.
✅ Funções do <head>
Não <head>, você define e organiza:
🔹 O título da página ( o que aparece na aba do navegador )
🔹 Os arquivos CSS que definem o visual do site
🔹 Scripts em JavaScript que controlam comportamentos e funcionalidades
🔹 Metadados importantes para SEO ( como a descrição e palavras-chave )
🔹 O favicon ( ícone que aparece na aba do navegador )
🔹 Regras para a responsividade do layout ( com o viewport )
⚡ Estrutura básica de um <head>bem feito:
🔎 Explicando os principais elementos no <head>
| Elemento | Função |
|---|---|
<title> | Defina o título da página , exibido na aba do navegador e nos resultados da pesquisa. |
<meta> | Insira metadados , como charset , descrição , palavras-chave , e controle a responsividade . |
<link> | Faça a conexão com arquivos externos , como CSS , ícones e fontes . |
<style> | Adicionado CSS diretamente no documento ( não recomendado em projetos maiores ). |
<script> | Insira ou consulte scripts em JavaScript que controlam o comportamento da página. |
<base> | Defina uma URL base para todos os links relacionados à página. |
<noscript> | Exibe conteúdo alternativo para usuários que possuem o JavaScript desativado no navegador. |
🌟 Dicas de Ouro para o <head>
✅ O <head> sempre fica antes do <body> HTML.
✅ Nunca coloque conteúdo visível dentro do <head> ( nada de imagens, textos, etc. ).
✅ Use <meta charset="UTF-8"> no topo do head para garantir que acentuação e caracteres especiais funcionem.
✅ O <meta name="viewport"> é essencial para deixar seu site adaptável a celulares e tablets.
✅ Defina uma descrição bem pensada no <meta name="description"> para atrair visitantes nos buscadores .
✅ Adicione um favicon com <link rel="icon">para deixar seu site com uma carinha mais profissional .
✅ Scripts com deferou no final <body> ajudam no desempenho da página.
🔗 Veja também:
Esses são elementos que podem ser usados dentro do <head>, e cada um deles tem uma explicação mais específica no blog.
Clique para saber mais sobre cada um!
| Elemento | Link para o conteúdo |
|---|---|
<title> | Explicação completa sobre o <title> |
<base> | Como <base> usar corretamente |
<link> | Usando <link> estilos, fontes e ícones |
<style> | Estilizando com <style> (uso correto e dicas) |
<meta> | SEO e outras funções do <meta> |
<script> | Como e onde usar <script> |
<noscript> | Criando fallback com <noscript> |
✍️ Resumo rápido:
📌 <head> Prepare uma página para funcionar corretamente antes de ser exibida.
📌 Cuide do SEO , responsividade e velocidade de carregamento já nesta parte do HTML.
📌Mantenha a organização: um <head> limpo e bem estruturado é sinal de código de qualidade!
Comentários
Postar um comentário