16

Alguém me pode explicar este código de HTML5?

<meta charset="utf-8">

Para que é que serve e por que é que é utilizada esta norma?

2

5 Respostas 5

15

Segundo a especificação do HTML, o elemento <meta>, que deve sempre estar no <head>, "representa vários tipos de metadados que não podem ser representados com os elementos title, base, link, style ou script" tradução livre. Exemplos desses metadados são resumo do conteúdo, palavras-chaves, indicações a robôs de busca, entre outras.

Ele pode ter um atributo content, e deve ter um atributo name, http-equiv ou charset (e nunca mais de um entre esses três). No caso de haver um charset, ele é usado para indicar o formato de codificação de caracteres usado no documento.

Para além dos 128 caracteres básicos do ASCII, um mesmo símbolo gráfico pode ser codificado internamente de maneiras diferentes. Isso vale, por exemplo, para todos os caracteres acentuados do português. Se um arquivo HTML é salvo com a codificação Latin 1 (ISO 8859-1, ou Windows 1252, que é similar), o caractere ã utiliza apenas um byte para ser armazenado. Já em UTF-8, o mesmo caractere utiliza 2 bytes, com valores diferentes do byte usado em Latin 1. Por isso, se você mandar o browser exibir com uma codificação e o documento estiver sendo servido com outra, os caracteres especiais quebram.

É importante lembrar que o elemento <meta> não deve ser o principal método a ser usado para indicar ao browser qual o charset utilizado. O método preferencial é que o servidor envie um cabeçalho HTTP com essa informação. O uso de <meta> é uma segunda linha de defesa contra problemas de encoding – altamente recomendada, não deixe seu HTML sem isso (veja por exemplo o caso mencionado pelo Miguel Angelo: um HTML pode ser aberto diretamente, e não enviado por um servidor, e nesse caso não haveria cabeçalho com indicação do charset usado, não fosse a presença desse elemento do HTML).

5
  • +1 por indicar que essa não deve ser usada como a principal forma de indicar a codificação, apesar de eu achar que sempre deve estar presente por motivo de manter a codificação ao salvar o arquivo por exemplo. Commented 5/04/2014 às 22:25
  • Incluí outra frase no final reforçando que o uso do meta charset também é recomendado.
    – bfavaretto
    Commented 5/04/2014 às 22:31
  • @bfavaretto, como posso visualizar o cabeçalho HTTP enviado pelo servidor ao meu browser?
    – user3628
    Commented 6/04/2014 às 12:41
  • 1
    @Tiago: Você pode usar o fiddle, que é um programa para visualizar as requisições feitas, o que permite ver os headers. Commented 6/04/2014 às 15:46
  • 1
    @Tiago Depende do browser. No Chrome, nas ferramentas de desenvolvedor, aba "Network", você pode ver a lista de todas as requisições, e para cada um pode ver os cabeçalhos de requisição e resposta.
    – bfavaretto
    Commented 6/04/2014 às 16:03
6

Isso serve para indicar qual é a codificação do arquivo html servido.

Neste caso está indicando a codificação utf-8, que é um padrão definido pelo Unicode:

Unicode UTF-8

O unicode UTF-8 é um formato de codificação que tem um tamanho variável de caractere, podendo ter de 1 até 4 bytes. Os caracteres mais comuns são mapeados para códigos de 1 byte, outros menos comuns, como a maioria dos caracteres acentuados, possuem 2 bytes.

Tag Meta

A tag meta do HTML, permite indicar metainformações, ou seja, informações sobre o próprio documento.

Como funciona o mata charset?

Essa tag, usada com charset serve para indicar a codificação do próprio documento. Note que há uma certa incoerência nessa afirmação, então vem a pergunta: Como poderia ser possível ler a codificação do documento, de dentro do próprio documento? Afinal, conhecer a codificação do documento de antemão é o que permite ler o arquivo.

Resposta: A maioria das codificações são muito parecidas para os caracteres principais, então em grande parte das codificações é possível ler partes do arquivo, considerando a codificação ASCII. É assim que o browser consegue ler, até encontrar a tag <meta charset="utf-8">... quando isso acontece, ele recomeça a leitura do arquivo, considerando a codificação que acabou de encontrar dentro do próprio HTML.

Duas formas de indicar charset em forma de metadados

Existem duas formas de indicar o charset do documento HTML, com meta-informação:

Forma recomendada pelo padrão HTML5:

<meta charset="utf-8">

ou assim:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Essas duas formas são equivalentes. Em ambos os casos essas tags devem aparecer dentro da tag head do documento HTML... e quanto antes, melhor, pois quando a tag for encontrada, a leitura do arquivo terá de ser reiniciada.

Referência

Por que isso existe?

Por que existe essa forma de indicar a codificação do documento HTML? Já não existe, no protocolo HTTP, uma forma de indicar o charset usando um header na resposta?

Isso não é apenas por garantia. Acontece que um documento HTML servido através do protocolo HTTP poderia ser salvo pelo receptor, de forma independente dos headers com que o arquivo foi servido.

Não existe no HTML nenhuma restrição quanto ao protocolo que deve ser usado para servir o documento, portanto a tag meta com charset, para mim é quase que uma obrigação: ela permite que o documento continue coerente, mesmo que o protocolo/storage não suportem indicar o charset do arquivo.

2
  • Se não me engano, das duas formas que você indicou, a primeira é a recomendada em HTML5.
    – bfavaretto
    Commented 5/04/2014 às 22:05
  • @bfavaretto: Obrigado, vou deixar isso claro na minha resposta de forma a não induzir a práticas não recomendadas. Commented 5/04/2014 às 22:14
0

Esta Tag meta charset="utf-8" é usada para poder mostrar ao navegador o tipo de codificação que sera utilizada em seu site

-3

-meta charset= utf-8 é uma metatag responsável por chavear qual tabela de caractéres a página está utilizando. -As tags meta são muito utilizadas porque são elementos capazes de definir qualquer tipo de informação em HTML. -Logo após o atributo meta, temos o atributo charset: é ele quem define que a informação a ser comunicada pelo atributo meta é um formato de codificação.

  • Ao utilizar a tag meta charset="UTF-8”, estamos informando ao navegador a informação de que a codificação daquela página é a UTF-8, o padrão de codificação mais utilizado, também chamado de Unicode — ou Conjunto de Caracteres Codificados Universal.Esse padrão uniformiza as informações ao redor do mundo fazendo com que os navegadores renderem todos os conteúdos a partir das regras estabelecidas pelo UTF-8.
-3

A meta charset=”utf-8” é uma metatag responsável por chavear qual tabela de caractéres a página está utilizando. A Web é acessada por pessoas do mundo inteiro. Ter um sistema ou um site que limite o acesso e pessoas de outros países é algo que vai contra a tradição e os ideais da internet. Por isso, foi criado uma tabela que suprisse essas necessidades, essa tabela se chama Unicode. A tabela Unicode suporta algo em torno de um milhão de caracteres.

Você deve fazer log-in para responder a esta pergunta.