What is the correct character encoding for HTML?

UTF-8. The HTML Living Standard requires that the document's actual encoding be UTF-8 and that any declaration use the utf-8 label.

Where should meta charset go?

As the first element inside head. The whole element must be within the first 1024 bytes of the document, so put it before the title, scripts and styles.

Is meta charset="utf-8" still needed with an HTTP header?

The W3C recommends declaring the encoding inside the document even when the server sends it, because the header is lost when the file is saved or opened locally. If you use both, they must say the same thing.

Why does my page show Ã© instead of é?

The text is UTF-8 but is being decoded as a legacy Western encoding such as Windows-1252. Usually the server header or meta tag declares the wrong charset. Make both say UTF-8.

What is the difference between ANSI and UTF-8?

ANSI usually refers to a Windows legacy code page such as Windows-1252, which covers only Western European characters. UTF-8 can represent every Unicode character in every language, and it is the only encoding the HTML standard allows for new documents.

Codificación de caracteres en HTML: explicación del metaconjunto de caracteres UTF-8

Resume este post con: 9 minutos de lectura

ChatGPT

Perplejidad

Grok

Inteligencia artificial de Google

La codificación de caracteres de una página HTML es la regla que convierte los bytes del archivo nuevamente en letras. Para cada página moderna la respuesta es la misma: guarde el archivo como UTF-8 y declarelo con <meta charset="utf-8"> como primer elemento interior <head>, dentro de los primeros 1024 bytes del documento. El estándar HTML requiere UTF-8, y si su servidor también envía un Content-Type encabezado con un conjunto de caracteres, los dos deben estar de acuerdo.

Conclusiones clave

Utilice UTF-8. El estándar HTML dice que la codificación real del documento “debe ser UTF-8” y Tecnologías W3 informó en septiembre de 2026 que el 99,1% de los sitios web con codificación conocida ya la utilizan.
Declararlo con <meta charset="utf-8"> justo después <head>. Debe caber en los primeros 1024 bytes.
Declarar no es suficiente: el archivo en sí, su base de datos y el encabezado de su servidor también deben ser UTF-8.
Cuando las declaraciones no coinciden, una marca de orden de bytes supera al encabezado HTTP, que supera al <meta> tag.
Texto confuso como Ã© en lugar de é casi siempre significa que los bytes UTF-8 se leen como una codificación heredada o que el texto se convirtió dos veces.

Qué es una codificación de caracteres

Las computadoras almacenan texto como números. Una codificación es la tabla que asigna esos números a caracteres. Las codificaciones más antiguas, como ISO-8859-1 o Windows-1252, cubren un byte por carácter y sólo un par de cientos de caracteres, suficiente para los idiomas de Europa occidental y nada más. UTF-8 codifica todos los caracteres en Unicode, por lo que inglés, árabe, hindi, japonés y emoji pueden estar en la misma página, utilizando de uno a cuatro bytes por carácter.

El W3C explica el riesgo claramente: si no especifica la codificación “corre el riesgo de que los caracteres de su contenido se interpreten incorrectamente” y agrega que también se necesita una declaración de codificación para procesar texto que no sea ASCII que los usuarios escriben en formularios (Internacionalización del W3C).

La única línea que necesitas

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>…</title>
  </head>
</html>

Algunos detalles en los que la gente se equivoca:

Posición. El estándar HTML dice que el elemento que contiene la declaración “debe serializarse completamente dentro de los primeros 1024 bytes del documento” (Nivel de vida HTML). Ponlo primero <head>, antes del título, guiones y comentarios largos.
Sólo uno. Un documento sólo puede tener uno <meta>Declaración de codificación basada en .
El caso no importa. UTF-8 y utf-8 Ambos están bien. El W3C señala la forma más larga, <meta http-equiv="Content-Type" content="text/html; charset=utf-8">, funciona de la misma manera pero es más para escribir.
Ningún otro valor es válido para páginas nuevas. El estándar de codificación dice “Los autores deben usar la codificación UTF-8” y deben etiquetarla utf-8 (Estándar de codificación WHATWG). Etiquetas más antiguas como iso-8859-1 Todavía funcionan en navegadores, pero no son compatibles con documentos nuevos.

La declaración debe coincidir con los bytes

El <meta> la etiqueta describe el archivo. No lo convierte. Si su editor guarda el archivo como Windows-1252 (al que algunas herramientas de Windows llaman “ANSI”) y la etiqueta dice UTF-8, todos los caracteres acentuados o no latinos se romperán. El W3C recuerda a los autores que usar UTF-8 significa “que también debes guardar tu contenido como UTF-8” (W3C).

Verifique el formato de guardado de su editor. En la mayoría de los editores de código, la codificación actual se muestra en la barra de estado, con la opción “Guardar con codificación” o “Reabrir con codificación”. Elija UTF-8.

ANSI frente a UTF-8. “ANSI” no es una codificación única. En Windows significa la página de códigos heredada del sistema, que en los sistemas de Europa occidental suele ser Windows-1252. No puede representar árabe, chino o la mayoría de los otros scripts, y los archivos guardados de esa manera se mostrarán incorrectamente cuando la página declare UTF-8. Para la web, elija siempre UTF-8.

Qué declaración gana cuando no están de acuerdo

Un navegador puede encontrar la codificación en tres lugares. El W3C enumera los precedentes:

Marca de orden de bytes (BOM). Unos pocos bytes invisibles al comienzo del archivo. Si está presente, anula todo lo demás “incluido el encabezado HTTP”.
HTTP Content-Type cabecera, por ejemplo Content-Type: text/html; charset=utf-8. Es mejor que las declaraciones en documentos.
El <meta charset> elemento.

Entonces, si su servidor envía charset=iso-8859-1 y tu página dice UTF-8, el servidor gana y la página se rompe. El consejo del W3C es declarar la codificación en el documento en cualquier caso, y si también utiliza el encabezado, asegurarse de que diga lo mismo.

Cómo configurar el encabezado en servidores comunes:

Apache: AddDefaultCharset utf-8 agrega el conjunto de caracteres a text/html y text/plain respuestas (Documentos de Apache). Apache señala que solo debes usarlo cuando todos los archivos afectados realmente estén en esa codificación.
nginx: el charset utf-8; directiva en el http, server o location El bloque agrega el conjunto de caracteres al Content-Type encabezado (Documentos de Nginx).
PHP: header('Content-Type: text/html; charset=utf-8'); antes de cualquier salida.

Puedes ver con qué envía tu servidor curl -I https://your-site.example/ o en las herramientas para desarrolladores del navegador, en Red, encabezados de respuesta.

Corrección de caracteres confusos (mojibake)

El texto confuso sigue patrones reconocibles. Aquí te explicamos cómo leerlos:

Lo que ves	Qué pasó	Fijar
`cafÃ©` en lugar de `café`	Los bytes UTF-8 se leen como Windows-1252 o ISO-8859-1	Haga que tanto el encabezado como el meta digan UTF-8
`caf�` (un diamante con un signo de interrogación)	Los bytes heredados se leen como UTF-8	Vuelva a guardar el archivo o convierta los datos como UTF-8
`cafÃƒÂ©`	Texto convertido a UTF-8 dos veces	Encuentre la doble conversión, generalmente al importar o en la conexión a la base de datos
`???` en lugar de todo carácter no latino	Caracteres perdidos cuando se guardan en una columna o archivo que no puede contenerlos	Cambie el almacenamiento a UTF-8 y vuelva a importarlo desde la fuente

Trabaje a través de la cadena en orden: el archivo en el disco, la base de datos, la conexión entre ellos, el encabezado HTTP y el <meta> tag. Cada enlace tiene que ser UTF-8.

Bases de datos. En MySQL, lo antiguo utf8 el conjunto de caracteres es un alias para utf8mb3, que almacena como máximo tres bytes por carácter y, por lo tanto, no puede contener caracteres “suplementarios” como la mayoría de los emoji. Documentos MySQL utf8mb3 como obsoleto (Manual de referencia de MySQL). Uso utf8mb4 para mesas y para la conexión.

Entidades HTML: cuando todavía las necesitas

Con UTF-8 puedes escribir é, ü, ж o 中 directamente a la fuente. Solo necesitas referencias de personajes como &, < y > para caracteres que tienen significado en el marcado HTML. Las entidades también son útiles para caracteres invisibles que son difíciles de detectar en la fuente, como un espacio sin interrupción ( ) o marcas direccionales en texto de derecha a izquierda.

Codificación en sitios multilingües

Los problemas de codificación aparecen en el momento en que un sitio agrega idiomas. Una página que solo ha mostrado inglés puede ocultar una declaración incorrecta durante años, porque las letras simples en inglés son las mismas en UTF-8 y en las codificaciones occidentales heredadas. La primera traducción al polaco, griego o japonés lo expone.

Antes de agregar idiomas, verifique tres cosas:

Cada plantilla y archivo estático se guarda como UTF-8 y declara <meta charset="utf-8">.
El lang El atributo se establece por idioma, por ejemplo <html lang="ja">, y las páginas de derecha a izquierda también se obtienen dir="rtl". La codificación dice cómo leer los bytes; lang dice en qué idioma está el texto, lo cual es importante para las fuentes, la separación de palabras y los lectores de pantalla.
Las URL con caracteres no latinos son UTF-8 y están codificadas en porcentaje. La guía de Google sobre sitios multilingües dice que las palabras localizadas en las URL están bien, pero “usar codificación UTF-8 en la URL (de hecho, recomendamos usar UTF-8 siempre que sea posible)” y escapar de las URL correctamente al vincular (Centro de búsqueda de Google).

ConveyThis traduce el texto de sus páginas a cualquiera de sus 210 idiomas admitidos, incluidas escrituras como árabe, chino, hindi y hebreo, y sirve páginas traducidas desde sus propias URL de idiomas. Sin embargo, no puede corregir una plantilla que declara una codificación incorrecta, así que ejecute primero las comprobaciones anteriores. Para los idiomas de derecha a izquierda hay una configuración para Cambiar la dirección del texto en las páginas traducidas; nuestro Guía de diseño RTL cubre el lado del diseño. Ver el completo lista de características y cómo se manejan las páginas traducidas SEO multilingüe, o comparar planes y precios.

Lista de verificación rápida

Archivo guardado como UTF-8 (sin lista de materiales, a menos que tenga un motivo para conservar una)
<meta charset="utf-8"> es el primer elemento en <head>
El encabezado del servidor dice charset=utf-8, o nada, nunca un conjunto de caracteres diferente
Tablas de bases de datos y uso de conexiones utf8mb4 (MySQL/MariaDB)
Los formularios y las API envían y aceptan UTF-8
lang (y dir para idiomas RTL) establecido en cada versión de idioma

Preguntas frecuentes

¿Cuál es la codificación de caracteres correcta para HTML?

UTF-8. El estándar de vida HTML requiere que la codificación real del documento sea UTF-8 y que cualquier declaración utilice la etiqueta utf-8.

¿A dónde debe ir meta charset?

Como primer elemento dentro de la cabeza. El elemento completo debe estar dentro de los primeros 1024 bytes del documento, así que colóquelo antes del título, los scripts y los estilos.

¿Aún se necesita meta charset=“utf-8” con un encabezado HTTP?

El W3C recomienda declarar la codificación dentro del documento incluso cuando el servidor lo envía, porque el encabezado se pierde cuando el archivo se guarda o se abre localmente. Si usas ambos, deben decir lo mismo.

El texto es UTF-8 pero se está decodificando como una codificación occidental heredada, como Windows-1252. Generalmente, el encabezado del servidor o la metaetiqueta declara el conjunto de caracteres incorrecto. Haga que ambos digan UTF-8.

¿Cuál es la diferencia entre ANSI y UTF-8?

ANSI generalmente se refiere a una página de códigos heredada de Windows, como Windows-1252, que cubre solo caracteres de Europa occidental. UTF-8 puede representar todos los caracteres Unicode en todos los idiomas y es la única codificación que el estándar HTML permite para documentos nuevos.

¿Listo para agregar idiomas?

Una vez que sus páginas estén limpias en UTF-8, agregar idiomas es principalmente una tarea de contenido. Puedes crear una cuenta ConveyThis para traducir su sitio y publicar cada idioma en su propia URL.

Codificación de caracteres en HTML: uso correcto del metaconjunto de caracteres UTF-8