Nessa aula vamos aprender um pouco mais sobre a tag head e os metadados, que em resumo podem ser considerados como os dados sobre a página HTML.

Como vimos um pouco na aula anterior, o seu arquivo HTML é composto de duas partes: O head e o body.

Dentro do head (cabeçalho) vamos inserir todas as informações úteis para o carregamento correto de sua página HTML, como por exemplo o título da página (aquele que aparece na aba do navegador), os arquivos externos (CSS e javascript) e os dados que descrevem a página.

Essas informaçõs não são mostradas na tela em sua página HTML, ficam invisíveis aos usuários que visitam seu site.

Head

Podemos imaginar quando vamos realizar uma prova na escola e antes de começarmos a de fato responder os conteúdos, precisamos preencher a identificação como o nosso nome, série, etc.

O head do HTML segue essa linha, precisamos colocar informações que idetifiquem por exemplo quem foi o autor daquela página, uma descrição sobre a página, título e outros dados que vão auxiliar os navegadores e sistemas de buscas a renderizar a página corretamente.

A tag meta

O HTML possui uma maneira oficial de inserir os metadados da página através da tag <meta>, e ao utilizar essa tag para criar os metadados de sua página, perceba que serão elementos vazios, pois só é preciso usar a tag de abertura + atributos.

O primeiro metadado que podemos criar com a tag meta é informando o tipo de caractere da página:

<meta charset=”utf-8″>

Esse atributo charset informa a codificação de caracteres do seu documento HTML.

Utf-8 é o conjunto de caracteres universal, e isso significa que ele pode lidar com qualquer idioma e suas especificidades. Então quando você usa por exemplo acentos e “ç” em sua página, o utf-8 vai garantir que serão mostrados corretamente.

Para as próximas identificações de metadados, vamos utilizar o atributo “name”. Esse atributo vai informar qual tipo de metadados você vai inserir.

O autor da página HTML

O nosso primeiro exemplo da tag meta com o atributo name será para inserir o nome do autor da página HTML. Para isso utilizamos:

<meta name=”author” content=”Caio Cerqueira”>

O atributo content vem para informar o valor do atributo name, nesse caso, onde name é o nome do autor, o content é o lugar que informo meu nome.

Descrição da página

Nosso próximo exemplo é para criar uma descrição sobre a página HTML. Para isso usamos no atributo “name” o nome “description”, e no atributo “content” inserimos uma descrição sobre a página criada, como visto abaixo:

<meta name=”description” content=”Essa página fala sobre a tag head e os metadados”>

Palavras-chave

Agora que já criamos as informações da página sobre codificação, autor e descrição, vamos finalizar o uso da tag meta com as palavras-chave. Essas palavras vão ajudar os sistemas de buscas a classificar seu conteúdo.

Para isso, vamos colocar no atributo “name” o valor: “keywords” e em “content” valor informar as palavras que identificam nossa página, separadas por vírgulas da seguinte forma:

<meta name=”keywords” content=”head, metadados, meta”>

Resumo de códigos da aula:

Agora que você já sabe sobre head e metadados no HTML, vamos evoluir mais ainda na próxima aula.