Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

 

head de um documento HTML é a parte que não é exibida no navegador da Web quando a página é carregada. Contém informações como title , links para <css> (se você deseja modelar seu conteúdo HTML com CSS), links para favicons personalizados e outros metadados (dados sobre o HTML, como quem o escreveu, e palavras-chave importantes que descrevem o documento.) Neste artigo, abordaremos todas as coisas acima e mais, para dar-lhe uma boa base para lidar com marcação e outros códigos que deve viver na sua cabeça.

Pré-requisitos:
Familiaridade básica em HTML, tal como Iniciando com HTML.
Objetivo: Explicar sobre o cabeçalho HTML, qual é o propósito, os itens mais importantes que pode conter e o efeito que pode ter no documento HTML.

O que há no cabeçalho HTML?

Vamos rever o simples Documento HTML que abordamos no artigo anterior:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Minha página de teste</title>
  </head>
  <body>
    <p>Essa é minha página</p>
  </body>
</html>

O cabeçalho HTML é o conteúdo do elemento <head> . Ao contrário do conteúdo do elemento <body> (que são exibidos na página quando carregados no navegador), o conteúdo do cabeçalho não é exibido na página, em vez disso, o trabalho do cabeçalho é conter metadata  sobre o documento. No exemplo sequinte, o cabeçalho é bem simples:

<head>
  <meta charset="utf-8">
  <title>Minha página de teste</title>
</head>

Em páginas maiores, o cabeçalho pode ter mais conteúdo — tente acessar um dos seus sites favoritos e use as ferramentas de desenvolvimento para verificar o conteúdo do cabeçalho. Nosso objetivo aqui não é mostrar a você como usar tudo o que é possível pôr no cabeçalho, mas te ensinar a usar as coisas mais obvias que você vai querer incluir no cabeçalho, e lhe dar alguma familiaridade. Vamos começar.

Adicionando um título

Nós já vimos o elemento <title> em ação — ele pode ser usado para adicionar um título ao documento, mas pode ser confundido com o elemento <h1>, que é usado para adicionar um título de nível superior ao conteúdo do body — as vezes também é associado como o título da página. Mas são coisas diferentes!

  • O elemento <h1> aparece na página quando é carregado no navegador — geralmente isso deve ser usado uma vez por página, para marcar o título do conteúdo da sua página, (o título da história, ou da notícia, ou o que quer que seja apropriado para o uso).
  • O elemento <title> é um metadado que representa o título de todo o document HTML (não o conteúdo do documento).

Aprendizado ativo: observando um exemplo simples

  1. Para começar esta aprendizagem ativa, gostaríamos que você fosse ao nosso depósito GitHub e baixasse uma cópia do nosso titulo-exemplo.html. Para fazer isso:
    1. Copie e cole o código em um novo arquivo de texto no seu editor e salve-o com o nome de index.html em um lugar de fácil acesso.
  2. Agora abra o arquivo no seu navegador. Você deve ver algo assim:

    A simple web page with the title set to <title> element, and the <h1> set to <h1> element.Agora deve ser completamente óbvio onde o conteúdo <h1> aparece e onde o conteúdo  <title> aparece!

  3. Você também deve tentar abrir o código no seu editor, editar o conteúdo desses elementos e atualizar a página no seu navegador. divirta-se.

O conteúdo do elemento <title> também é usado de outras maneiras. Por exemplo, se você tentar marcar a página, (Favoritos > Marcar essa página) você verá o conteúdo <title> preenchido como o nome do marcador sugerido.

A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element

Os conteúdos <title> também são usados nos resultados de pesquisa, conforme você verá abaixo.

Metadados: o elemento <meta>

Metadados descrevem dados em HTML, que possui uma maneira "oficial" de adicionar metadados a um documento - o elemento <meta>. Claro, as outras coisas em que estamos falando neste artigo também podem ser pensadas como metadados. Existem muitos tipos diferentes de elementos <meta>  que podem ser incluídos no <head> da sua página, mas não tentaremos explicar todos eles nesta fase, pois seria muito confuso. Em vez disso, explicaremos algumas coisas que você pode ver comumente, apenas para lhe dar uma idéia.

Especificando a codificação de caracteres do seu documento

No exemplo que vimos acima, esta linha foi incluída:

<meta charset="utf-8">

Este elemento simplesmente especifica a codificação de caracteres do documento - o conjunto de caracteres que o documento está autorizado a usar.  utf-8 é um conjunto de caracteres universal que inclui praticamente qualquer caactere de qualquer linguagem humana. Isso significa que sua página da Web poderá lidar com a exibição de qualquer idioma; Portanto, é uma boa idéia configurar isso em todas as páginas da Web que você cria! Por exemplo, sua página poderia lidar com o inglês e o japonês bem:

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,Se você definir sua codificação de caracteres para  ISO-8859-1, por exemplo (o conjunto de caracteres para o alfabeto latino), a renderização de sua página ficaria toda bagunçada:

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

Nota: Alguns navegadores (como o Chrome) corrigem automaticamente as codificações incorretas, então, dependendo do navegador que você usar, você pode não ver esse problema. Ainda assim, você deve definir uma codificação do utf-8 em sua página, para evitar problemas em outros navegadores.

Aprendizagem ativa: Experimente com a codificação de caracteres

Para experimentar isso, revise o modelo HTML simples que você obteve na seção anterior em <title> (a página  titulo-exemplo.html ), tente alterar o valor do meta charset para ISO-8859-1 e adicione o japonês à sua página . Este é o código que usamos:

<p>Exemplo japonês:ご飯が熱い</p>

Adicionando um autor e descrição

Muitos elementos <meta> incluem atributos de name e  content:

  • name especifica o tipo de elemento meta que é; que tipo de informação contém.
  • content especifica o conteúdo real do meta.

Dois desses meta-elementos que são úteis para incluir na sua página definem o autor da página e fornecem uma descrição concisa da página. Vejamos um exemplo:

<meta name="author" content="Chris Mills">
<meta name="description" content="A Área de Aprendizagem do MDN tem como objetivo 
proporcionar novatos completos à Web com tudo o que eles precisam saber
para começar a desenvolver sites e aplicativos.">

Especificar um autor é útil de algumas maneiras: é útil poder descobrir quem escreveu a página, se quiser enviar perguntas sobre o conteúdo. Alguns sistemas de gerenciamento de conteúdo possuem instalações para extrair automaticamente as informações do autor da página e disponibilizá-las para tais fins.

Especificar uma descrição que inclua palavras-chave relacionadas ao conteúdo da sua página é útil porque tem potencial para tornar sua página mais alta nas pesquisas relevantes realizadas nos mecanismos de busca (tais atividades são denominadas Search Engine Optimization ou SEO.

Aprendizagem ativa: Uso da descrição nos motores de busca

A descrição também é usada nas páginas de resultados do mecanismo de pesquisa. Vamos passar por um exercício para explorar isso

  1. Vá para a página inicial da Mozilla Developer Network.
  2. Veja a fonte da página (botão direito do mouse/Ctrl, escolha exibir fonte da página no menu de contexto).
  3. Encontre a meta tag de descrição. Isso parecerá assim:
    <meta name="description" content="A Mozilla Developer Network (MDN) fornece
    informações sobre tecnologias Open Web, incluindo HTML, CSS e API para ambos
    Sites e aplicativos HTML5. Ele também documenta produtos Mozilla, como o sistema operacional Firefox.">
  4. Agora, procure por "Mozilla Developer Network" no seu motor de busca favorito (Utilizamos o Yahoo.) Você notará a descrição <meta> e <title> elemento usado no resultado da pesquisa - definitivamente vale a pena ter!

    A Yahoo search result for "Mozilla Developer Network"

Nota: No Google, você verá algumas subpáginas relevantes do MDN listadas abaixo do principal link da página inicial do MDN - estes são chamados de sitelinks e são configuráveis nas Ferramentas para webmasters do Google - uma maneira de melhorar os resultados de pesquisa do seu site no mecanismo de pesquisa do Google.

Nota: Muitos recursos <meta> simplesmente não são mais usados. Por exemplo, a palavra-chave <meta> elemento (<meta name="keywords" content="fill, in, your, keywords, here">) - que é suposto fornecer palavras-chave para os motores de busca para determinar a relevância dessa página para diferentes termos de pesquisa - são ignorados pelos motores de busca, porque os spammers estavam apenas preenchendo a lista de palavras-chave com centenas de palavras-chave, resultados de polarização.

Outros tipos de metadados

Ao navegar pela Web, você também encontrará outros tipos de metadados. Muitos dos recursos que você verá em sites são criações proprietárias, projetados para fornecer determinados sites (como sites de redes sociais) com informações específicas que podem usar.

Por exemplo, Abrir dados de gráfico é um protocolo de metadados que o Facebook inventou para fornecer metadados mais ricos para sites. No código-fonte MDN, você encontrará isso:

<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
<meta property="og:description" content="A Mozilla Developer Network (MDN) fornece
informações sobre tecnologias Open Web, incluindo HTML, CSS e APIs para ambos os sites da Web
e aplicativos HTML5. Ele também documenta produtos Mozilla, como o sistema operacional Firefox.">
<meta property="og:title" content="Mozilla Developer Network">

Um efeito disso é que, quando você liga a MDN no facebook, o link aparece junto com uma imagem e descrição: uma experiência mais rica para usuários.

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.O Twitter também possui seus próprios metadados proprietários, o que tem um efeito semelhante quando o URL do site é exibido no twitter.com. Por exemplo:

<meta name="twitter:title" content="Mozilla Developer Network">

Adicionando ícones personalizados ao seu site

Para enriquecer ainda mais o design do seu site, você pode adicionar referências a ícones personalizados em seus metadados, e estes serão exibidos em determinados contextos.

O favicon que tem sido durante muitos anos, (foi o primeiro ícone deste tipo), um ícone de 16 x 16 pixels usado em vários lugares. Você verá favicões exibidos na guia do navegador contendo cada página aberta e ao lado de páginas marcadas no painel de marcadores.

Um favicon pode ser adicionado à sua página por:

  1. Salvando-o no mesmo diretório que a página de índice do site, salvo no formato .ico (a maioria dos navegadores suportará favicons em formatos mais comuns como .gif ou .png, mas usar o formato ICO irá garantir que ele funcione tão bem como o Internet Explorer 6 .)
  2. Adicionando a seguinte linha ao HTML <head> para fazer referência a ele:
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Aqui está um exemplo de um favicon em um painel de marcadores:

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

Há muitos outros tipos de ícones para considerar estes dias também. Por exemplo, você encontrará isso no código-fonte da página inicial do MDN Web Docs:

<!-- iPad de terceira geração com tela retina de alta resolução: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
<!-- iPhone com tela retina de alta resolução: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
<!-- iPad de primeira e segunda geração: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
<!-- iPhone não-Retina, iPod Touch e dispositivos Android 2.1+: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
<!-- favicon básico -->
<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">

Os comentários explicam o que cada ícone é usado - esses elementos cobrem coisas como fornecer um ícone de alta resolução agradável para usar quando o site é salvo na tela inicial do iPad.

Não se preocupe muito com a implementação de todos esses tipos de ícone agora - este é um recurso bastante avançado, e você não deverá ter conhecimento disso para avançar no curso. O objetivo principal aqui é permitir que você saiba o que são essas coisas, no caso de você encontrá-las enquanto navega no código-fonte dos outros sites.

Aplicando CSS e JavaScript para HTML

Todos os sites que você usar nos dias atuais empregarão o CSS para torná-los legais e o JavaScript  para ativar a funcionalidade interativa, como players de vídeo, mapas, jogos e muito mais. Estes são mais comumente aplicados a uma página da web usando o elemento <link> e o elemento <script> , respectivamente.

  • O elemento <link> sempre passa na cabeça do seu documento. Isso requer dois atributos, rel = "stylesheet", que indica que é a folha de estilo do documento e href, que contém o caminho para o arquivo de folha de estilo:

    <link rel="stylesheet" href="my-css-file.css">
  • O elemento  <script> não precisa ir na cabeça; na verdade, muitas vezes é melhor colocá-lo na parte inferior do corpo do documento (antes da tag </ body> de fechamento), para garantir que todo o conteúdo HTML tenha sido lido pelo navegador antes de tentar aplicar o JavaScript para (se o JavaScript tentar acessar um elemento que ainda não existe, o navegador lançará um erro.)

    <script src="my-js-file.js"></script>

    Nota: O elemento <script> pode parecer um elemento vazio, mas não é, e, portanto, precisa de uma tag de fechamento. Em vez de apontar para um arquivo de script externo, você também pode escolher colocar seu script dentro do elemento <script>.

Aprendizagem ativa: aplicar CSS e JavaScript a uma página

  1. Para iniciar esta aprendizagem ativa, pegue uma cópia dos nossos arquivos  meta-exemplo.html, script.js e style.css e guarde-os em seu computador local no mesmo diretório. Verifique se eles são salvos com os nomes corretos e extensões de arquivo.
  2. Abra o arquivo HTML em seu navegador e seu editor de texto.
  3. Ao seguir as informações fornecidas acima, adicione os elementos <link><script> ao seu HTML, para que seu CSS e JavaScript sejam aplicados ao seu HTML.

Se for feito corretamente, quando você salvar seu HTML e atualizar seu navegador, verá que as coisas mudaram:

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

  • O JavaScript adicionou uma lista vazia à página. Agora, quando você clica em qualquer lugar da lista, uma caixa de diálogo aparecerá perguntando para que você, insira algum texto para um novo item de lista. Quando você pressiona o botão OK, um novo item da lista será adicionado à lista que contém o texto. Quando você clica em um item de lista existente, uma caixa de diálogo será exibida permitindo que você altere o texto do item.
  • O CSS fez com que o plano de fundo fique verde e o texto se tornasse maior. Ele também denominou parte do conteúdo que o JavaScript adicionou à página (a barra vermelha com a borda preta é o estilo que o CSS adicionou à lista gerada por JS).

Note: Se você ficar preso neste exercício e não conseguir o CSS / JS aplicar, tente verificar nossa página de exemplo css-and-js.html.

Definir o idioma principal do documento

Finalmente, vale a pena mencionar que você pode (e realmente deveria) definir o idioma da sua página. Isso pode ser feito adicionando o lang attribute à tag HTML de abertura (como visto no meta-exemplo.html e mostrado abaixo).

<html lang="en-US">

Isso é útil de várias maneiras. O seu documento HTML será indexado de forma mais eficaz pelos motores de busca se o seu idioma for definido (permitindo que ele apareça corretamente em resultados específicos do idioma, por exemplo), e é útil para pessoas com deficiências visuais usando leitores de tela (por exemplo, a palavra "seis" existe em francês e inglês, mas é pronunciado de forma diferente.)

Você também pode definir seções secundárias do seu documento para serem reconhecidas como idiomas diferentes. Por exemplo, podemos configurar nossa seção de idioma japonês para ser reconhecida como japonesa, assim:

<p>Exemplo japonês: <span lang="jp">ご飯が熱い。</span>.</p>

Esses códigos são definidos pelo padrão ISO 639-1. Você pode encontrar mais sobre eles em Tags de idioma em HTML e XML.

Resumo

Isso marca o fim de nossa turnê rápida pelo HTML - há muito mais que você pode fazer aqui, mas uma excursão exaustiva seria chata e confusa nesta fase, e nós só queríamos dar uma idéia das coisas mais comuns Você encontrará lá por agora! No próximo artigo, iremos analisar os fundamentos do texto em HTML.

Etiquetas do documento e colaboradores

Colaboradores desta página: RobMota, Gabriela-23, programando, mitlearning, stefanocbl, kenobll
Última atualização por: RobMota,