<meta charset = "utf-8"> vs <meta http-equiv = "Content-Type">


1535

Para definir el juego de caracteres para HTML5 Doctype , ¿qué notación debo usar?

  1. Corto:

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

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

94
El uso de una etiqueta <meta> para algo como el tipo de contenido y la codificación es muy irónico, ya que sin saber esas cosas, no podría analizar el archivo para obtener el valor de la metaetiqueta.
Mark

321
Puedes analizarlo como ASCII hasta que lo alcances. El algoritmo de análisis HTML5 tiene esto en cuenta.
Quentin

41
Se debe tener en cuenta que ninguno de los dos se utiliza para analizar cuando la página se sirve en la web. En su lugar, Content-Typese utilizará el del encabezado de respuesta HTTP . La metaetiqueta solo se usa cuando la página se carga desde el sistema de archivos del disco local.
BalusC

38
El metaelemento se usa sobre HTTP bajo ciertas condiciones (incluida la ausencia de datos en el encabezado HTTP)
Quentin el

78
También es irónico que se llame charset, cuando realmente es para especificar una codificación. (el juego de caracteres es Unicode, la codificación es UTF-8)
Ryan

Respuestas:


1084

En HTML5, son equivalentes. Use el más corto, es más fácil de recordar y escribir. El soporte del navegador está bien ya que fue diseñado para ser compatible con versiones anteriores.


23
¿Qué pasa con el soporte del navegador? ¿ <meta charset='utf-8'>Funciona en IE6?
Šime Vidas

11
Que yo sepa, sí.
Quentin

44
Aquí hay un enlace actualizado para la página de códigos de Google que mencionó @ Šime Vidas. Dice, con respecto a IE 6, 7 y 8: "En navegadores que no son de IE, puede usar document.characterSet. En IE, podría pensar que podría document.getElementsByTagName ('meta') [0] .charset, pero esto solo devuelve la codificación de caracteres que especificó, no la codificación que IE está usando realmente ".
hotshot309

77
Sé que este hilo es antiguo, pero gtmetrix.com/specify-a-character-set-early.html indica que usar <meta>para configurar la codificación de caracteres deshabilita el descargador anticipado en IE8, lo que puede afectar los tiempos de carga de la página. Sí, sí, lo sé ... suelta IE8. @ MészárosLajos puede volver aquí en un par de años y reventarnos por seguir apoyando a IE8. ;-)
erturne

3
Hoy tuve un problema donde los símbolos coreanos no aparecían en IE11. Soltar la sintaxis corta en favor de la sintaxis más larga solucionó el problema. Sin embargo, no sé si esto se debe a algún tipo de configuración del servidor o si es un problema con IE11 y el juego de caracteres. La combinación de símbolos exacta en la que estaba fallando era 베라.
James Donnelly

250

Ambas formas de la declaración de metacaracteres son equivalentes y deberían funcionar igual en todos los navegadores. Pero, hay algunas cosas que debe recordar al declarar el conjunto de caracteres de sus archivos web como UTF-8:

  1. Guarde su archivo (s) en codificación UTF-8 sin la marca de orden de bytes (BOM).
  2. Declare la codificación en sus archivos HTML usando meta charset (como arriba).
  3. Su servidor web debe servir sus archivos, declarando la codificación UTF-8 en el encabezado HTTP Content-Type.

Los servidores Apache están configurados para servir archivos en ISO-8859-1 de manera predeterminada, por lo que debe agregar la siguiente línea a su .htaccessarchivo:

AddDefaultCharset UTF-8

Esto configurará Apache para servir sus archivos declarando la codificación UTF-8 en el encabezado de respuesta de tipo de contenido, pero sus archivos deben guardarse en UTF-8 (sin BOM) para empezar.

El Bloc de notas no puede guardar sus archivos en UTF-8 sin la lista de materiales. Un editor gratuito que puede es Notepad ++ . En la barra de menú del programa, seleccione "Codificación> Codificar en UTF-8 sin BOM". También puede abrir archivos y volver a guardarlos en UTF-8 usando "Codificación> Convertir a UTF-8 sin BOM".

Más información sobre la marca de orden de bytes (BOM) en Wikipedia .


20
@CodeBoy Modificaría su respuesta para decir " Debería guardar ... sin BOM". La siguiente página dice "... generalmente es mejor para la interoperabilidad omitir la lista de materiales ...", lo que indica una mejor práctica, pero no un requisito: w3.org/International/questions/qa-byte-order-mark
Johann

3
En IIS, puede configurar el conjunto de caracteres en los encabezados HTTP con <globalization fileEncoding = "utf-8" responseEncoding = "utf-8" /> en Web.Config: agréguelo a <system.web>
Chris Moschini el

3
Según tengo entendido, no importa en absoluto si ahorras con nuestro sin BOM.
David 天宇 Wong

3
¿Por qué dice que UTF-8 HTML debería estar sin una lista de materiales? Tener una lista de materiales debería funcionar bien. Además, no necesita metaun encabezado HTTP. Solo necesita uno de BOM metao encabezado HTTP.
hsivonen

55
Summing up: don't use BOM for UTF-8No puedo estar de acuerdo con esto. La lista de materiales en UTF-8 es muy útil para señalar el tipo de codificación. De lo contrario, tenemos que adivinar o usar cosas como las metaetiquetas a las que se refiere esta pregunta. Lo bueno de la lista de materiales es que es parte de la especificación Unicode y, por lo tanto, puede usarse para todos los datos codificados en Unicode, no solo HTML. Lo que debemos hacer es usar listas de materiales en todas partes, dejar que el software heredado explote, informar esos errores y solucionarlos.
Stijn de Witt

82

Otra razón para ir con el corto es que coincide con otras instancias en las que puede especificar un conjunto de caracteres en el marcado. Por ejemplo:

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

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

La consistencia ayuda a reducir los errores y hacer que el código sea más legible.

Tenga en cuenta que el atributo charset no distingue entre mayúsculas y minúsculas. Puede usar UTF-8 o utf-8, sin embargo, UTF-8 es más claro, más legible y más preciso.

Además, no hay absolutamente ninguna razón para usar cualquier valor que no sea UTF-8 en el atributo meta charset o encabezado de página. UTF-8 es la codificación predeterminada para documentos web desde HTML4 en 1999 y la única forma práctica de crear páginas web modernas.

Tampoco debe usar entidades HTML en UTF-8. Los caracteres como el símbolo de copyright deben escribirse directamente. Las únicas entidades que debe usar son para los 5 caracteres de marcado reservados: menor que, mayor que, ampersand, prime, double prime. Las entidades necesitan un analizador HTML, que no siempre querrá usar en el futuro, introducen errores, hacen que su código sea menos legible, aumentan el tamaño de sus archivos y, a veces, decodifican incorrectamente en varios navegadores dependiendo de las entidades que haya utilizado. Aprenda cómo escribir / insertar derechos de autor, marca registrada, comillas abiertas, comillas cerradas, apóstrofo, em dash, en dash, viñeta, euro y cualquier otro carácter que encuentre en su contenido, y use esos caracteres reales en su código. La Mac tiene un Visor de caracteres que puede activar en la Preferencia del sistema del teclado, y puede buscar y luego arrastrar y soltar los caracteres que necesita, o usar el Visor de teclado correspondiente para ver qué teclas escribir. Por ejemplo, la marca registrada es la Opción + 2. UTF-8 contiene todos los caracteres y símbolos de cada lenguaje humano escrito. Por lo tanto, no hay excusa para usar, en lugar de un guión em. No es una mala idea aprender las reglas de puntuación y tipografía también ... por ejemplo, sabiendo que un punto va dentro de una cita cerrada, no afuera.

Usar una etiqueta para algo como tipo de contenido y codificación es muy irónico, ya que sin saber esas cosas, no se podría analizar el archivo para obtener el valor de la metaetiqueta.

No, eso no es verdad. El navegador comienza a analizar el archivo como la codificación predeterminada del navegador, ya sea UTF-8 o ISO-8859-1. Dado que US-ASCII es un subconjunto de ISO-8859-1 y UTF-8, el navegador puede leer bien de cualquier manera ... es lo mismo. Cuando el navegador encuentra la etiqueta meta charset, si la codificación es diferente de lo que el navegador ya está usando, el navegador vuelve a cargar la página en la codificación especificada. Es por eso que colocamos la etiqueta meta charset en la parte superior, justo después de la etiqueta head, antes que nada, incluso el título. De esa manera puede usar caracteres UTF-8 en su título.

Debe guardar su archivo (s) en codificación UTF-8 sin BOM

Eso no es estrictamente cierto. Si solo tiene caracteres US-ASCII en su documento, puede guardarlo como US-ASCII y servirlo como UTF-8, porque es un subconjunto. Pero si hay caracteres Unicode, está en lo correcto, debe Guardar como UTF-8 sin BOM.

Si desea un buen editor de texto que guarde sus archivos en UTF-8, le recomiendo Notepad ++.

En Mac, use Bare Bones TextWrangler (gratis) de Mac App Store, o Bare Bones BBEdit que está en Mac App Store por $ 39.99 ... muy barato para una herramienta tan genial. En cualquiera de las aplicaciones, hay un menú en la parte inferior de la ventana del documento donde puede especificar la codificación del documento y puede elegir fácilmente "UTF-8 sin BOM". Y, por supuesto, puede configurarlo como predeterminado para los nuevos documentos en Preferencias.

Pero si su servidor web sirve la codificación en el encabezado HTTP, lo cual se recomienda, ambas [metaetiquetas] son ​​innecesarias.

Eso es incorrecto. Por supuesto, debe establecer la codificación en el encabezado HTTP, pero también debe establecerla en el atributo meta charset para que el usuario pueda guardar la página, salir del navegador en el almacenamiento local y luego abrirla nuevamente más tarde, en cuyo caso La única indicación de la codificación que estará presente es el atributo meta charset. También debe establecer una etiqueta base por la misma razón ... en el servidor, la etiqueta base no es necesaria, pero cuando se abre desde el almacenamiento local, la etiqueta base permite que la página funcione como si estuviera en el servidor, con todos los activos en su lugar, etc., sin enlaces rotos.

AddDefaultCharset UTF-8

O simplemente puede cambiar la codificación de tipos de archivos particulares de esta manera:

AddType text/html;charset=utf-8 html

Un consejo para servir los archivos UTF-8 y Latin-1 (ISO-8859-1) es dar a los archivos UTF-8 una extensión de "texto" y los archivos Latin-1 "txt".

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

Finalmente, considere Guardar sus documentos con terminaciones de línea Unix, no con terminaciones de línea DOS o Mac (clásicas) heredadas, que no ayudan y pueden dañar, especialmente a medida que avanzamos más y más de esos sistemas heredados. Un documento HTML con HTML5 válido, codificación UTF-8 y terminaciones de línea Unix es un trabajo bien hecho. Puede compartir, editar, almacenar, leer, recuperar y confiar en ese documento en muchos contextos. Es lingua franca. Es papel digital.


20
"Si solo tiene caracteres ISO-8859-1 en su documento, puede guardarlo como ISO-8859-1 y servirlo como UTF-8, porque es un subconjunto" - incorrecto. Sería correcto si cambia "ISO-8859-1" a "US-ASCII". US-ASCII es compatible con UTF-8 porque es un subconjunto, ISO-8859-1 no lo es. Para convertir ISO-8859-1 (que contiene caracteres no ASCII) a UTF-8, necesitará codificar los caracteres no ASCII. Los puntos de código para ISO-8859-1 existen en Unicode, pero UTF-8 codifica los que están fuera de US-ASCII de manera diferente a ISO-8859-1.
thomasrutter

2
Su punto sobre las entidades HTML es bueno. En el pasado, he usado entidades solo para descubrir que se convirtieron a sus caracteres UTF-8 después de guardarse en diferentes sistemas y / o abrirse en diferentes editores. Sin embargo, vale la pena señalar que los espacios que no se rompen (& nbsp;) pueden producir resultados confusos ya que generalmente no los verá en su editor, por lo que generalmente es mejor mantenerlos como entidades por razones de claridad (en mi experiencia).
squidbe

"You should also set a base tag..."debería venir con las advertencias descritas aquí .
Mafuba

Otra razón por la que podría preferir entidades HTML es si está usando algo como ionicones . Prefiero ver &#xf101;el glifo predeterminado, o algún personaje extraño que no reconozco.
Daniel Lubarov

30

<meta charset="utf-8"> fue introducido con / para HTML5.

Como se menciona en la documentación, ambos son válidos. Sin embargo,<meta charset="utf-8"> es solo para HTML5 (y más fácil de escribir / recordar).

A su debido tiempo, el viejo estilo seguramente quedará obsoleto en el futuro cercano. Me apegaría a lo nuevo <meta charset="utf-8">.

Solo hay un camino, pero arriba. En el caso de la tecnología, eso está eliminando gradualmente lo viejo (realmente, REALMENTE rápido)

Documentación: Atributo de metacaracteres HTML : W3Schools



18

Si bien no cuestiono las otras respuestas, creo que vale la pena mencionar lo siguiente.

  1. La http-equivnotación "larga" ( ) y la "corta" son iguales, lo que ocurra primero gana;
  2. Los encabezados del servidor web anularán todas las <meta>etiquetas;
  3. BOM (marca de orden de bytes) anulará todo y, en muchos casos, afectará html 4 (y probablemente otras cosas también);
  4. Si no declara ninguna codificación, probablemente obtendrá su texto en "codificación de texto alternativo" que se define en su navegador. Ni en Firefox ni en Chrome es utf-8;
  5. En ausencia de otras pistas, el navegador intentará leer su documento como si estuviera en ASCII para obtener la codificación, por lo que no puede usar codificaciones extrañas (sin embargo, utf-16 con BOM debería hacerlo);
  6. Si bien las especificaciones dicen que la declaración de codificación debe estar dentro de los primeros 512 bytes del documento, la mayoría de los navegadores intentarán leer más que eso.

Puede probar ejecutando 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 4500y apuntando su navegador a localhost:4500. (Por supuesto, querrá cambiar o eliminar partes. La parte BOM es \xef\xbb\xbf. Tenga cuidado con la codificación de su shell).

Tenga en cuenta que es muy importante que declare explícitamente la codificación. Dejar que los navegadores adivinen puede generar problemas de seguridad.


1
Buenos puntos, pero ¿puede detallar a qué problemas de seguridad se refiere?
Armfoot

1
La notación larga no debería anular a la corta, simplemente la primera en el documento debería ganar.
gsnedders

1
@Armfoot En el pasado solía haber problemas con UTF-7lo que recuerdo. Por lo general, el rastreo en la web es malo, por ejemplo, cuando sube una imagen, algo que se olfatea como contenido de script.
phk

@gsnedders probados en Chrome y Firefox, tienes razón. editó la respuesta en consecuencia. Armfoot: era algo sobre una codificación de 7 bits, no recuerdo exactamente qué.
Ardilla

1
@CraigMcQueen está bastante seguro de que el respaldo del navegador sigue siendo (en 2018) el valor predeterminado de Europa occidental en Europa occidental, por lo que imagino que por defecto cualquier codificación pre-unicode ha sido dominante en cada región. Los usuarios pueden configurar el respaldo a utf-8, pero esto solo expone toda la codificación de mierda que miles de sitios todavía usan como caracteres ascii de alto byte, por lo que todavía no es común. Más es la pena. No puedo ver cómo va a cambiar esto sin un poco de coacción por parte de los proveedores de navegadores, y no están interesados ​​en romper cosas heredadas.
brennanyoung

13

Úselo <meta charset="utf-8" />para navegadores web cuando use HTML5.

Úselo <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />cuando use HTML4 o XHTML, o para analizadores dom obsoletos, como DOMDocumenten php 5.3



1

Para incrustar una firma en un correo electrónico, usaría la versión larga:

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

La razón es que no muchos lectores de correo electrónico usan html5, por lo que siempre es mejor usar viejos estilos html. En realidad, es mejor usar tablas que divs + css también.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.