Curso de HTML / Definir o título, a descrição, o idioma e a codificação de uma página

O head de um documento HTML contém informações como o title de sua aba de navegador, a codificação de caracteres e a descrição da página. O idioma padrão do documento deve ser colocado no atributo lang do elemento html. Esses parâmetros ajudam os navegadores e outras ferramentas a interpretar e descrever a página, mas não substituem o conteúdo legível no body.

Comece com um documento completo

<!doctype html>

<html lang="pt-BR">

<head>

  <meta charset="utf-8">

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

  <title>Pequeno Jardim | Guia de cuidados com plantas</title>

  <meta name="description"

        content="Descubra plantas adequadas para iniciantes e seus cuidados essenciais com o guia Pequeno Jardim.">

</head>

<body>

  <h1>Pequeno Jardim</h1>

  <p>Aprenda a cuidar das plantas.</p>

</body>

</html>

Salve o código como index.html e abra-o em um navegador. O title aparece na aba do navegador, enquanto o h1 é visível na página. Eles têm funções diferentes, mas devem descrever a mesma página de forma consistente. O h1 do exemplo está dentro de um documento de exemplo, e não como um segundo título neste post tutorial. Comece pela distinção entre head/body em Estrutura básica de um documento HTML.

A maior parte do conteúdo head não é exibida como texto normal na página. Coloque as instruções e explicações que os leitores deveriam ver em body. Em um site com várias páginas, escreva um título e uma descrição distintos e precisos para cada página, em vez de copiar o mesmo nome do site em todos os lugares.

Defina o idioma e a codificação de caracteres

lang="pt-BR" indica que o idioma padrão do documento é o português do Brasil. Isso pode ajudar a tecnologia assistiva a pronunciar e processar o conteúdo. Use o idioma real da página; uma frase ocasional em outro idioma não requer a alteração de todo o documento lang. Um trecho mais longo em um idioma diferente pode ter seu próprio atributo de idioma. O idioma e a estrutura também suportam verificações de leitura e interação em Acessibilidade básica: títulos, links, imagens e teclado.

meta charset="utf-8" declara a codificação de caracteres. Salve também o próprio arquivo em UTF-8. Se caracteres aparecerem corrompidos, verifique tanto a codificação de salvamento do editor quanto, quando for servido online, os cabeçalhos de resposta do servidor. Mudar apenas a tag não pode corrigir um arquivo salvo em uma codificação diferente.

Compreender a descrição e a janela de exibição

Os metadados description devem resumir o que os leitores encontrarão nesta página específica, e não listar palavras-chave. Os mecanismos de busca podem gerar um trecho de resultado a partir do texto ou dos metadados da página, portanto, a descrição escrita não aparecerá necessariamente palavra por palavra. Veja a documentação de trechos de pesquisa do Google .

O parâmetro viewport afeta a janela de exibição de layout e a escala inicial em dispositivos móveis. É útil com CSS responsivo, mas a tag por si só não faz com que cada elemento se adapte a um telefone. Não restrinja o zoom apenas porque o texto parece pequeno; corrija o CSS e o tamanho da fonte. Veja a referência meta do MDN e a referência do título.

Identifique o local e a verificação de cada configuração

lang não é uma tag separada dentro do head. Coloque-a no elemento do documento, como <html lang="pt-BR">, e use um atributo de linguagem em um elemento específico para um trecho em outra língua.

1. Se os caracteres estiverem ilegíveis, abra o original correto e verifique sua codificação real ao salvar. Mantenha uma cópia antes de salvar um texto que já pode ter sido decodificado incorretamente.
2. Salve um arquivo UTF-8 conhecido e correto, mantenha a declaração de charset próxima do início e reabra-o. Alterar a declaração não corrige um texto já danificado.
3. Se o arquivo local estiver correto, mas a página servida pelo servidor não estiver, examine o Content-Type e o charset da resposta do documento na Rede. Alinhe a declaração do servidor com a codificação real do arquivo.

Atributo global lang MDN

Verifique a página antes de compartilhá-la

Verifique se cada título de aba distingue sua página, se o título visível descreve o mesmo assunto e se os caracteres são exibidos corretamente. Se você escreveu uma descrição, compare-a com o corpo atual em vez de uma versão antiga. Abra a página em uma largura do tipo telefone e teste o zoom e a rolagem horizontal; os metadados e o layout devem funcionar juntos.