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

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" />

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.

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 .

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.

<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

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.

Ú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

Hay algunas noticias basadas en la Fundación Mozilla y el punto del sitio

No use este valor ( http-equiv=content-type) ya que está obsoleto. Prefiera el charsetatributo en el metaelemento < >.

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.