<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" />
CuriousMind
fonte
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.

Quentin
fonte
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 .

CodeBoy
fonte
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.

Simon White
fonte
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

Omar
fonte
2
Em relação ao link, consulte meta.stackoverflow.com/questions/280478/why-not-w3schools-com
tripleee
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.

esquilo
fonte
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

Timo Huovinen
fonte
2

Há algumas notícias baseadas na Mozilla Foundation e sitepoint

Não use esse valor ( http-equiv=content-type), pois é obsoleto. Prefira o charsetatributo no metaelemento < >. insira a descrição da imagem aqui

user10089632
fonte
finalmente, algo um pouco mais recente
Ayyash 31/03
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.

chelder
fonte