<meta charset = "utf-8"> vs <meta http-equiv = "Tipo de conteúdo">


1535

Para definir o conjunto de caracteres para o Documento HTML5 , qual notação devo usar?

  1. Baixo:

    <meta charset="utf-8" /> 
  2. Longo:

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

94
Usar uma tag <meta> para algo como tipo de conteúdo e codificação é altamente irônico, pois sem saber essas coisas, você não pode analisar o arquivo para obter o valor da metatag.
— Mark

321
Você pode analisá-lo como ASCII até alcançá-lo. O algoritmo de análise HTML5 leva isso em consideração.
— Quentin

41
Deve-se notar que nenhum deles é usado para análise quando a página é veiculada na web. Em vez disso, o Content-Typecabeçalho de resposta HTTP será usado. A metatag é usada apenas quando a página é carregada do sistema de arquivos em disco local.
— precisa saber é o seguinte

38
O elemento meta é usada através de HTTP, sob certas condições (incluindo a ausência dos dados que estão no cabeçalho HTTP)
— Quentin

78
Também é irônico o nome de charset, quando é realmente para especificar uma codificação. (o conjunto de caracteres é Unicode, a codificação é UTF-8)
— Ryan

Respostas:


1084

No HTML5, eles são equivalentes. Use o menor, é mais fácil lembrar e digitar. O suporte ao navegador é bom, pois foi projetado para compatibilidade com versões anteriores.


23
E o suporte ao navegador? Funciona <meta charset='utf-8'>no IE6?
— Šime Vidas

11
Tanto quanto eu sei, sim.
— Quentin

4
Aqui está um link atualizado para a página do Google Code mencionada pela @ Šime Vidas. Ele diz, em relação ao IE 6, 7 e 8, "Em navegadores que não são do IE, você pode usar document.characterSet. No IE, você pode pensar que poderia documentar.getElementsByTagName ('meta') [0] .charset, mas isso retorna apenas a codificação de caracteres que você especificou, não a codificação que o IE está realmente usando. "
— precisa saber é o seguinte

7
Eu sei que esse segmento é antigo, mas gtmetrix.com/specify-a-character-set-early.html indica que o uso <meta>para definir a codificação de caracteres desativa o download do lookahead no IE8, o que pode afetar o tempo de carregamento da página. Sim, sim, eu sei ... solte o IE8. O @ MészárosLajos pode voltar aqui daqui a alguns anos e quebrar nossas bolas por ainda apoiar o IE8. ;-)
— erturne

3
Hoje tive um problema em que os símbolos coreanos não estavam aparecendo no IE11. Descartar a sintaxe curta em favor da sintaxe mais longa corrigiu o problema. Não sei se isso é devido a algum tipo de configuração do servidor ou se é um problema com o IE11 e o conjunto de caracteres. A combinação exata de símbolos em que estava falhando era 베라.
— James Donnelly

250

Ambas as formas da declaração de meta charset são equivalentes e devem funcionar da mesma forma nos navegadores. Porém, há algumas coisas que você precisa lembrar ao declarar o conjunto de caracteres dos arquivos da web como UTF-8:

  1. Salve seus arquivos na codificação UTF-8 sem a marca de ordem de bytes (BOM).
  2. Declare a codificação em seus arquivos HTML usando o meta charset (como acima).
  3. Seu servidor da web deve veicular seus arquivos, declarando a codificação UTF-8 no cabeçalho HTTP do tipo de conteúdo.

Os servidores Apache são configurados para servir arquivos em ISO-8859-1 por padrão, portanto, você precisa adicionar a seguinte linha ao seu .htaccessarquivo:

AddDefaultCharset UTF-8

Isso configurará o Apache para servir seus arquivos que declaram a codificação UTF-8 no cabeçalho de resposta do Tipo de conteúdo, mas os arquivos devem ser salvos em UTF-8 (sem BOM) para começar.

O bloco de notas não pode salvar seus arquivos no UTF-8 sem a BOM. Um editor gratuito que pode ser o Notepad ++ . Na barra de menus do programa, selecione "Codificação> Codificar em UTF-8 sem BOM". Você também pode abrir arquivos e salvá-los novamente em UTF-8 usando "Codificação> Converter em UTF-8 sem BOM".

Mais sobre a Byte Order Mark (BOM) na Wikipedia .


20
@ CodeBoy Gostaria de alterar sua resposta para dizer "Você deve salvar ... sem BOM". A página a seguir diz "... geralmente é melhor a interoperabilidade omitir a BOM ..." indicando uma prática recomendada, mas não um requisito: w3.org/International/questions/qa-byte-order-mark
— Johann

3
No IIS pode definir o charset em cabeçalhos HTTP com <globalization fileEncoding = "utf-8" responseEncoding = "utf-8" /> em Web.Config - adicioná-lo à <system.web>
— Chris Moschini

3
como eu entendo as coisas, não importa se você salvar com o nosso sem BOM.
— David天宇Wong

3
Por que você diz que o HTML UTF-8 deve estar sem uma BOM. Ter uma lista técnica deve funcionar bem. Além disso, você não precisa de metaum cabeçalho HTTP. Você só precisa de um metacabeçalho BOM ou HTTP.
— hsivonen

5
Summing up: don't use BOM for UTF-8Eu não posso concordar com isso. A lista técnica em UTF-8 é muito útil para sinalizar o tipo de codificação. Caso contrário, temos que adivinhar ou usar coisas como as meta tags às quais essa pergunta se refere. O interessante da BOM é que ela faz parte da especificação Unicode e, portanto, pode ser usada para todos os dados codificados em Unicode, não apenas em HTML. O que devemos fazer é usar BOMs em qualquer lugar, deixar o software legado explodir, relatar esses bugs e corrigi-los.
— Stijn de Witt

82

Outro motivo para acompanhar o curto é que ele corresponde a outras instâncias em que você pode especificar um conjunto de caracteres na marcação. Por exemplo:

<script type="javascript" charset="UTF-8" src="/script.js"></script>

<p><a charset="UTF-8" href="http://example.com/">Example Site</a></p>

A consistência ajuda a reduzir erros e tornar o código mais legível.

Observe que o atributo charset não diferencia maiúsculas de minúsculas. Você pode usar UTF-8 ou utf-8, no entanto, o UTF-8 é mais claro, mais legível e mais preciso.

Além disso, não há absolutamente nenhuma razão para usar outro valor que não seja UTF-8 no atributo meta charset ou no cabeçalho da página. UTF-8 é a codificação padrão para documentos da Web desde HTML4 em 1999 e a única maneira prática de criar páginas da Web modernas.

Além disso, você não deve usar entidades HTML no UTF-8. Caracteres como o símbolo de direitos autorais devem ser digitados diretamente. As únicas entidades que você deve usar são os 5 caracteres de marcação reservados: menor que, maior que, e comercial, prime, double prime. As entidades precisam de um analisador de HTML, que você nem sempre deseja usar daqui para frente; elas introduzem erros, tornam seu código menos legível, aumentam o tamanho do arquivo e, às vezes, decodificam incorretamente em vários navegadores, dependendo de quais entidades você usou. Aprenda a digitar / inserir direitos autorais, marca registrada, cotação aberta, cotação fechada, apóstrofo, traço, traço, marcador, euro e qualquer outro caractere que você encontrar no seu conteúdo e usar esses caracteres reais no seu código. O Mac possui um Visualizador de caracteres que você pode ativar na Preferência do sistema de teclado, e você pode encontrar e arrastar e soltar os caracteres necessários ou usar o Visualizador de Teclado correspondente para ver quais teclas digitar. Por exemplo, a marca registrada é a opção + 2. UTF-8 contém todos os caracteres e símbolos de todas as línguas humanas escritas. Portanto, não há desculpa para usar - em vez de um traço em. Não é uma má idéia aprender também as regras de pontuação e tipografia ... por exemplo, sabendo que um período está dentro de uma citação próxima, não fora.

Usar uma tag para algo como tipo de conteúdo e codificação é altamente irônico, pois sem saber essas coisas, você não poderia analisar o arquivo para obter o valor da metatag.

Não, isso não é verdade. O navegador começa a analisar o arquivo como a codificação padrão do navegador, UTF-8 ou ISO-8859-1. Como US-ASCII é um subconjunto de ISO-8859-1 e UTF-8, o navegador pode ler muito bem de qualquer maneira ... é o mesmo. Quando o navegador encontra a tag meta charset, se a codificação é diferente da que o navegador já está usando, o navegador recarrega a página na codificação especificada. É por isso que colocamos a tag meta charset no topo, logo após a tag head, antes de qualquer outra coisa, até o título. Dessa forma, você pode usar caracteres UTF-8 em seu título.

Você deve salvar seu (s) arquivo (s) na codificação UTF-8 sem BOM

Isso não é estritamente verdade. Se você tiver apenas caracteres US-ASCII em seu documento, poderá salvá-lo como US-ASCII e servi-lo como UTF-8, porque é um subconjunto. Mas se houver caracteres Unicode, você está correto, você deve Salvar como UTF-8 sem BOM.

Se você deseja um bom editor de texto que salve seus arquivos em UTF-8, recomendo o Notepad ++.

No Mac, use o Bare Bones TextWrangler (gratuito) da Mac App Store ou o Bare Bones BBEdit, que está na Mac App Store por US $ 39,99 ... muito barato para uma ferramenta tão boa. Nos dois aplicativos, há um menu na parte inferior da janela do documento em que você especifica a codificação do documento e pode escolher facilmente "UTF-8 no BOM". E é claro que você pode definir isso como padrão para novos documentos nas Preferências.

Mas se o seu servidor da Web exibir a codificação no cabeçalho HTTP, o que é recomendado, as duas [metatags] serão desnecessárias.

Isso está incorreto. Obviamente, você deve definir a codificação no cabeçalho HTTP, mas também no atributo meta charset, para que a página possa ser salva pelo usuário, fora do navegador para armazenamento local e, em seguida, aberta novamente mais tarde. Nesse caso, a única indicação da codificação que estará presente é o atributo meta charset. Você também deve definir uma tag de base pelo mesmo motivo ... no servidor, a tag de base é desnecessária, mas quando aberta do armazenamento local, a tag de base permite que a página funcione como se estivesse no servidor, com todos os ativos no local e assim por diante, sem links quebrados.

AddDefaultCharset UTF-8

Ou você pode simplesmente alterar a codificação de tipos de arquivos específicos, como:

AddType text/html;charset=utf-8 html

Uma dica para veicular arquivos UTF-8 e Latin-1 (ISO-8859-1) é atribuir aos arquivos UTF-8 uma extensão "text" e os arquivos Latin-1 "txt".

AddType text/plain;charset=iso-8859-1 txt
AddType text/plain;charset=utf-8 text

Por fim, considere Salvar seus documentos com as terminações de linha Unix, não as DOS herdadas ou as finais de linha Mac (clássicas), que não ajudam e podem prejudicar, especialmente no final da linha, à medida que nos distanciamos cada vez mais desses sistemas legados. Um documento HTML com HTML5 válido, codificação UTF-8 e finais de linha Unix é um trabalho bem feito. Você pode compartilhar e editar e armazenar, ler e recuperar e confiar nesse documento em muitos contextos. É a lingua franca. É papel digital.


20
"Se você tiver apenas caracteres ISO-8859-1 em seu documento, poderá salvá-lo como ISO-8859-1 e servi-lo como UTF-8, porque é um subconjunto" - incorreto. Seria correto se você alterar "ISO-8859-1" para "US-ASCII". US-ASCII é compatível com UTF-8 porque é um subconjunto, ISO-8859-1 não. Para converter ISO-8859-1 (contendo caracteres não ASCII) em UTF-8, você precisará codificar os caracteres não ASCII. Os pontos de código para ISO-8859-1 existem em Unicode, mas o UTF-8 codifica os que estão fora do US-ASCII de maneira diferente da ISO-8859-1.
— thomasrutter

2
Seu ponto de vista sobre entidades HTML é bom. No passado, eu usei entidades apenas para descobrir que elas foram convertidas em seus caracteres UTF-8 após serem salvas em diferentes sistemas e / ou abertas em diferentes editores. Vale ressaltar, no entanto, que espaços sem quebra (& nbsp;) podem produzir resultados confusos, já que você normalmente não os vê em seu editor; portanto, é melhor mantê-los como entidades para maior clareza (na minha experiência).
— Squidbe

"You should also set a base tag..."deve vir com as advertências descritas aqui .
— Mafuba

Outro motivo para você preferir entidades HTML é se estiver usando algo como ionicons . Prefiro ver do &#xf101;que o glifo padrão ou algum personagem estranho que não reconheço.
— Daniel Lubarov

30

<meta charset="utf-8"> foi introduzido com / para HTML5.

Conforme mencionado na documentação, ambos são válidos. No entanto, <meta charset="utf-8">é apenas para HTML5 (e mais fácil de digitar / lembrar).

No devido tempo, o estilo antigo deverá ficar obsoleto no futuro próximo. Eu me ateria ao novo <meta charset="utf-8">.

Só há um caminho, mas para cima. No caso da tecnologia, isso está eliminando o antigo (realmente, REALMENTE rápido)

Documentação: Atributo do meta charset HTML - W3Schools



18

Embora não conteste as outras respostas, acho que vale a pena mencionar a seguir.

  1. A http-equivnotação “longa” ( ) e a “curta” são iguais, o que ocorrer primeiro ganha;
  2. Os cabeçalhos do servidor da Web substituirão todas as <meta>tags;
  3. A lista técnica (byte order mark) substituirá tudo e, em muitos casos, afetará o html 4 (e provavelmente outras coisas também);
  4. Se você não declarar nenhuma codificação, provavelmente receberá seu texto em "codificação de texto substituto", que é definida no seu navegador. Nem no Firefox nem no Chrome é utf-8;
  5. Na ausência de outras pistas, o navegador tentará ler seu documento como se estivesse em ASCII para obter a codificação; portanto, você não pode usar nenhuma codificação estranha (o utf-16 com BOM deve fazer);
  6. Enquanto as especificações dizem que a declaração de codificação deve estar dentro dos primeiros 512 bytes do documento, a maioria dos navegadores tenta ler mais do que isso.

Você pode testar executando echo 'HTTP/1.1 200 OK\r\nContent-type: text/html; charset=windows-1251\r\n\r\n\xef\xbb\xbf<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta charset="windows-1251"><title>привет</title></head><body>привет</body></html>' | nc -lp 4500e apontando seu navegador para localhost:4500. (É claro que você desejará alterar ou remover partes. A parte da lista técnica é \xef\xbb\xbf. Cuidado com a codificação do seu shell.)

Lembre-se de que é muito importante que você declare explicitamente a codificação. Deixar os navegadores adivinharem pode levar a problemas de segurança.


1
Bons pontos, mas você pode detalhar a quais problemas de segurança se refere?
— Armfoot 4/16/16

1
A anotação longa não deve substituir a curta - simplesmente a primeira no documento deve vencer.
— gsnedders

1
@ Armfoot No passado, costumava haver problemas com o UTF-7que eu lembro. Farejar também na web geralmente é ruim, por exemplo, quando você carrega uma imagem, algo que é farejado como conteúdo de script.
— Php 23/09/16

@gsnedders testado em chrome e firefox, você está certo. editou a resposta de acordo. Armfoot: era algo sobre codificação de 7 bits, não lembro exatamente o que.
— esquilo

1
O @CraigMcQueen tem certeza de que o fallback do navegador ainda (em 2018) é o padrão da Europa Ocidental na Europa Ocidental, então eu imagino que ele seja o padrão para qualquer codificação pré-unicode que tenha sido dominante em cada região. Os usuários podem definir o fallback como utf-8, mas isso apenas expõe toda a codificação de baixa qualidade que milhares de sites ainda usam como caracteres ascii de alto byte com falha, por isso não é comum. Mais é uma pena. Não vejo como isso vai mudar sem um pouco de coerção dos fornecedores de navegadores, e eles não estão interessados ​​em quebrar coisas herdadas.
— Brennanyoung 13/08/19

13

Use <meta charset="utf-8" />para navegadores da web ao usar HTML5.

Use <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />ao usar HTML4 ou XHTML, ou para analisadores dom desatualizados, como DOMDocumentno php 5.3



1

Para incorporar uma assinatura em um email, eu usaria a versão longa:

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

O motivo é que muitos leitores de email não usam o html5; portanto, é sempre melhor usar estilos antigos de html. Na verdade, é melhor usar tabelas do que divs + css também.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.