Aula 25 - Elemento Head do HTML

Introdução

O elemento <head> faz parte da estrutura básica de um documento HTML e contém informações importantes sobre a página.

Essas informações normalmente não aparecem diretamente para o usuário, mas são utilizadas pelo navegador, mecanismos de busca e outras ferramentas.

📌 O elemento <head> contém os metadados e configurações da página Web.

Onde fica o elemento <head>?

O elemento <head> fica localizado logo após a tag de abertura <html> e antes do elemento <body>.



<html>


<head>

Informações da página


</head>



<body>


Conteúdo visível


</body>



</html>

Estrutura Completa do HTML



<!doctype html>


<html lang="pt-BR">



<head>


<meta charset="UTF-8">


<title>
Minha Página
</title>



</head>



<body>


Conteúdo do site


</body>



</html>

Função do elemento <head>

Função	Descrição
Configurações	Define características do documento HTML.
Metadados	Fornece informações sobre a página.
Recursos externos	Carrega CSS, fontes e scripts.
SEO	Auxilia mecanismos de busca.

Principais Elementos Dentro do <head>

Elemento	Utilização
<title>	Define o título da página.
<meta>	Define informações adicionais.
<link>	Importa arquivos externos.
<style>	Adiciona CSS interno.
<script>	Adiciona códigos JavaScript.

Elemento <meta>

As tags <meta> fornecem informações sobre a página para navegadores e mecanismos de pesquisa.

Exemplo:



<meta charset="UTF-8">


<meta 
name="viewport"
content="width=device-width,
initial-scale=1.0">

Charset UTF-8

O atributo charset define o padrão de codificação dos caracteres utilizados na página.

UTF-8 permite utilizar:

✔ Letras acentuadas
✔ Símbolos
✔ Caracteres especiais

Viewport

O viewport informa ao navegador como a página deve se adaptar aos diferentes tamanhos de tela.



<meta 
name="viewport"
content="width=device-width,
initial-scale=1.0">

É fundamental para criação de páginas responsivas.

Importação de Arquivos CSS

O elemento <link> permite adicionar arquivos externos à página.



<link 
rel="stylesheet"
href="style.css">

Favicon

Favicon é o pequeno ícone exibido na aba do navegador.



<link 
rel="shortcut icon"
href="icone.png">

Exemplo de Head Profissional



<head>


<meta charset="UTF-8">


<meta 
name="viewport"
content="width=device-width,
initial-scale=1.0">



<title>
Curso HTML
</title>



<link 
rel="stylesheet"
href="style.css">



</head>

Boas Práticas no Uso do Head

Sempre definir charset UTF-8.
Utilizar viewport para responsividade.
Criar títulos claros.
Organizar corretamente os recursos externos.
Utilizar metadados para melhorar SEO.

Resumo da Aula

O head contém informações da página.
Não apresenta conteúdo visual diretamente.
Utiliza meta, title, link e scripts.
É essencial para configuração do documento HTML.
Contribui para SEO e responsividade.

🧠 Elemento <head> do HTML