< head >: a tag cabeça de um site em HTML

Em um grupo de uma empresa, por exemplo, sempre existe um cabeça. Geralmente é algum chefe ou líder.
Nos trabalhos de escola e de faculdade, também existe um cabeça.
Quando vemos uma quadrilha sendo presa na televisão, eles sempre falam do cabeça do grupo.

Na criação de sites, também temos uma tag cabeça no HTML, é a tag <head>, que será o alvo de estudo desse artigo de nosso curso de HTML.

A tag head: o que é e para que serve


Em HTML, a tag <head> é usada como cabeçalho, ou seja, um conjunto de informações de uma página de um site.

Se você lembrar bem, cabeçalho é um trecho de um documento que fica no início e fornece informações. Por exemplo, no cabeçalho de uma prova da escola você preenchia seu nome, número, nome do professor, nome da disciplina etc.

Na criação de sites, a tag head tem uma função similar: a tag head serve para armazenar informações de uma página de seu site. Essas informações são invisíveis, ou seja, os usuários que estiverem navegando pelo seu website não verão o que existe na tag head.

Ora, se ninguém vai ver, qual a função da tag <head> ?
Essa tag possui informações que serão importantes para seu navegador e para serviços de busca, como o Google..

Um exemplo de utilidade da tag head para o seu navegador, é para criar um título de uma página, através da tag <title>. O título é exibido na barra superior do seu browser (do lado dos botões de minimar, maximizar e fechar).

Já um exemplo de uso da tag head para os navegadores, é o uso das meta-tags, como a meta-tag description, onde fornecemos uma descrição da página (é aquele texto explicativo que aparece nos resultados de busca do Google.
(aprenderemos a criar um título e fazer a descrição de uma página de HTML nas próximas seções)

Uma outra grande utilidade da tag <head> </head> na criação de um site, é que lá ficam localizados scripts, como de JavaScript. Quando estudarmos CSS em nosso curso, veremos que a tag head também é importante para o CSS.

Como usar a tag  <head>

Agora que falamos da tag, do seu uso e importância, vamos mostrar como usar ela quando você for criar um site.

A tag <head> fica aninhada à tag <html>.e possui tag de abertura <head> e de fechamento </head>, e tudo que estiver entre a abertura e o fechamento será considerado como fazendo parte do cabeçalho do documento.

Caso não saiba o que é, leia nosso tutorial sobre aninhamento de tags e indentação de um código HTML.

Assim, baseado nos nossos conhecimentos de HTML aprendidos até este momento do curso, um website teria a seguinte estrutura:
<!DOCTYPE html>
 
<html>
 <head>
 
 </head>
</html>
Salve o seguinte código e renomeie o arquivo para .html e o execute.
Veja o que acontece em seu browser.
<!DOCTYPE html>
 
<html>
Estamos na tag html<br>
 
 <head>
  Cabeçalho <br>
  Curso HTML Progressivo - Como criar sites <br>
 </head>
 
Fim de nosso site.
</html>
Na próxima aula, iremos aprender como criar o título de uma página.

5 comentários:

luciano disse...

nos meus documentos o que eu to colocando entre a tag head esta aparecendo no site, não era para ser invisível?

Tutorial HTML Progressivo disse...

luciano, realmente não é para aparecer.

Verifique se escreveu correto mesmo e colocou as informações entre: < head > e , se não tem nenhuma tag a mais, ou a menos.

Anônimo disse...

no meu tbm esta aparecendo. eu conferi tudo e n tem um erro sequer. e msm assim aparece

Nando disse...

Parabens pelo conteudo.

Weslleyzitowsz disse...

O que está dentro da tag < head > aparece pelo fato de entre a abertura e o fechamento dessa tag são definidos os comportamentos da página e esses comportamentos são definidos com outras tags dentro < head >. Logo, como o que está dentro da tag é conteúdo (body), ele vai aparecer e nós conseguiremos visualizar. Tente colocar < title > Curso HTML Progressivo - Como criar sites < /title > dentro da tag < head > que tu não vai ver mais no conteúdo da página e, sim, no título dela. =D