Validación HTML: La codificación de caracteres no fue declarada. Procediendo usando "windows-1252".

Acerca de este problema HTML

La codificación de caracteres le dice al navegador cómo mapear los bytes sin procesar de tu archivo HTML en caracteres legibles. Cuando no se declara ninguna codificación, los navegadores deben depender de heurística o valores predeterminados para averiguar qué codificación usar. El recurso del validador a “windows-1252” refleja el comportamiento descrito en la especificación HTML: si no se encuentra información de codificación, los analizadores pueden usar por defecto esta codificación heredada. Esto puede causar problemas serios — caracteres como comillas tipográficas, rayas largas, letras acentuadas, emoji y escrituras no latinas pueden aparecer como texto distorsionado (a menudo llamado “mojibake”) si la codificación real del archivo no coincide con lo que asume el navegador.

Por qué esto importa

Corrección: Si tu archivo se guarda como UTF-8 (que es el predeterminado en la mayoría de editores modernos) pero el navegador lo interpreta como windows-1252, los caracteres multibyte se renderizarán incorrectamente.
Cumplimiento de estándares: El WHATWG HTML Living Standard requiere que esté presente una declaración de codificación de caracteres. La codificación también debe declararse dentro de los primeros 1024 bytes del documento.
Seguridad: La codificación ambigua puede ser explotada en ciertos ataques de cross-site scripting (XSS) donde un atacante aprovecha las discrepancias de codificación.
Interoperabilidad: Diferentes navegadores pueden elegir diferentes codificaciones de respaldo, llevando a renderizado inconsistente entre plataformas.

Cómo solucionarlo

La solución más simple y recomendada es añadir <meta charset="utf-8"> como el primer elemento hijo dentro de <head>, antes de <title> o cualquier otro elemento. Debe aparecer dentro de los primeros 1024 bytes del documento para que el analizador lo encuentre lo suficientemente temprano.

UTF-8 es el estándar universal para la web. Puede representar cada carácter en Unicode, es compatible hacia atrás con ASCII, y es la codificación recomendada por la especificación WHATWG HTML. A menos que tengas una razón muy específica para usar otra codificación, siempre usa UTF-8.

También debes asegurarte de que tu editor de texto o herramienta de construcción esté realmente guardando el archivo en codificación UTF-8. Declarar <meta charset="utf-8"> mientras el archivo se guarda en una codificación diferente aún producirá texto distorsionado.

Un enfoque alternativo (menos común) es declarar la codificación a través de un header HTTP Content-Type enviado por el servidor, como Content-Type: text/html; charset=utf-8. Sin embargo, la etiqueta <meta> sigue siendo recomendada como respaldo para cuando los archivos se ven localmente o se almacenan en caché sin headers.

Ejemplos

❌ Falta la declaración de codificación de caracteres

Este documento no tiene declaración de codificación, provocando la advertencia del validador:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My Page</title>
</head>
<body>
  <p>Héllo, wörld! — enjoy "quotes" and emöji 🎉</p>
</body>
</html>

✅ Solucionado con `<meta charset="utf-8">`

Añadir la etiqueta <meta charset="utf-8"> como el primer elemento en <head> resuelve el problema:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Page</title>
</head>
<body>
  <p>Héllo, wörld! — enjoy "quotes" and emöji 🎉</p>
</body>
</html>

❌ Codificación declarada demasiado tarde

El <meta charset> debe venir antes de otro contenido en el <head>. Colocarlo después de un <title> que contiene caracteres no-ASCII significa que el analizador puede ya haber confirmado una codificación incorrecta:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Café Menu</title>
  <meta charset="utf-8">
</head>
<body>
  <p>Welcome to the café.</p>
</body>
</html>

✅ Codificación declarada antes de todo otro contenido

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Café Menu</title>
</head>
<body>
  <p>Welcome to the café.</p>
</body>
</html>

La clave para recordar: siempre coloca <meta charset="utf-8"> como el primer elemento dentro de <head>. Esta es una pequeña adición que previene toda una clase de problemas de renderizado de caracteres y seguridad.