Acerca de este problema HTML
El estándar HTML living establece UTF-8 como la única codificación de caracteres permitida para documentos HTML. Las codificaciones heredadas como windows-1252, iso-8859-1, shift_jis, y otras eran comunes en páginas web más antiguas, pero solo soportan un subconjunto limitado de caracteres. UTF-8, por otro lado, puede representar cada carácter en el estándar Unicode, haciéndolo universalmente compatible entre idiomas y escrituras.
Este problema típicamente surge por una o más de estas causas:
-
Declaración
<meta charset>faltante o incorrecta — Tu documento carece de una declaración charset o declara explícitamente una codificación heredada como<meta charset="windows-1252">. -
Archivo no guardado como UTF-8 — Incluso con la etiqueta
<meta>correcta, si tu editor de texto guarda el archivo en una codificación diferente, los caracteres pueden volverse ilegibles (mojibake). -
El servidor envía un encabezado
Content-Typeconflictivo — El encabezado HTTPContent-Typepuede anular la declaración charset del documento. Si tu servidor envíaContent-Type: text/html; charset=windows-1252, el navegador usará esa codificación sin importar lo que diga la etiqueta<meta>.
Por qué esto importa
- Cumplimiento de estándares: El estándar HTML living del WHATWG establece explícitamente que los documentos deben estar codificados en UTF-8. Usar una codificación heredada hace que tu documento no sea conforme.
-
Internacionalización: Las codificaciones heredadas como
windows-1252solo soportan un conjunto limitado de caracteres de Europa Occidental. Si tu contenido alguna vez incluye caracteres fuera de ese rango—emoji, caracteres CJK, cirílico, árabe, o incluso cierta puntuación—no se mostrarán correctamente. - Seguridad: Las codificaciones mixtas o ambiguas pueden llevar a vulnerabilidades de seguridad, incluyendo ciertos tipos de ataques de cross-site scripting (XSS) que explotan discrepancias de codificación.
- Consistencia: Cuando la codificación declarada no coincide con la codificación real del archivo, los navegadores pueden malinterpretar caracteres, llevando a texto ilegible que es difícil de debuggear.
Cómo solucionarlo
Paso 1: Declara UTF-8 en tu HTML
Añade una etiqueta <meta charset="utf-8"> como el primer elemento dentro de <head>. Debe aparecer dentro de los primeros 1024 bytes del documento para que los navegadores puedan detectarlo temprano.
Paso 2: Guarda el archivo como UTF-8
En la mayoría de editores de texto e IDEs modernos, puedes establecer la codificación del archivo:
- VS Code: Haz clic en la etiqueta de codificación en la barra de estado inferior y selecciona “Save with Encoding” → “UTF-8”.
- Sublime Text: Ve a File → Save with Encoding → UTF-8.
- Notepad++: Ve a Encoding → Convert to UTF-8.
Si tu archivo ya contiene caracteres codificados en windows-1252, simplemente cambiar la declaración sin re-codificar el archivo causará que esos caracteres se muestren incorrectamente. Necesitas convertir la codificación real del archivo.
Paso 3: Revisa la configuración de tu servidor
Si tu servidor envía un parámetro charset en el encabezado HTTP Content-Type, asegúrate de que especifique UTF-8. Por ejemplo, en Apache puedes añadir esto a tu archivo .htaccess:
AddDefaultCharset UTF-8En Nginx, puedes establecerlo en tu bloque de servidor:
charset utf-8;Ejemplos
Incorrecto: Codificación heredada declarada
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="windows-1252">
<title>My Page</title>
</head>
<body>
<p>Hello world</p>
</body>
</html>
Esto dispara el error porque windows-1252 es una codificación heredada.
Incorrecto: Usando la forma larga http-equiv con una codificación heredada
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">Esta sintaxis más antigua también dispara el error cuando especifica una codificación que no es UTF-8.
Correcto: UTF-8 declarado apropiadamente
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Page</title>
</head>
<body>
<p>Hello world</p>
</body>
</html>
La etiqueta <meta charset="utf-8"> aparece como el primer hijo de <head>, y el archivo mismo debería estar guardado con codificación UTF-8.
Correcto: Usando http-equiv con UTF-8
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Mientras que la forma más corta <meta charset="utf-8"> es preferida, esta sintaxis más larga también es válida siempre que especifique UTF-8.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.
Más información: