¿Qué es la declaración charset?
La meta etiqueta charset indica al navegador qué codificación de caracteres debe usar al renderizar tu página. Sin ella, el navegador tiene que adivinarlo, lo que puede provocar texto ilegible, especialmente con caracteres no ASCII.
¿Por qué es importante?
Problemas de codificación
Sin una declaración charset:
- Los caracteres acentuados pueden aparecer como basura: “café” → “café”
- Los emojis pueden no mostrarse correctamente
- Los alfabetos no latinos (chino, árabe, japonés, etc.) pueden ser completamente ilegibles
- Los caracteres especiales como guiones largos, comillas tipográficas y símbolos pueden romperse
Seguridad
- La ausencia de la declaración charset puede facilitar ataques XSS con UTF-7 en navegadores antiguos
- La especificación HTML5 requiere una declaración charset por razones de seguridad
Rendimiento
- Cuando el navegador tiene que adivinar la codificación, puede necesitar volver a analizar la página una vez que la identifica
- Esto provoca un parpadeo o re-renderizado breve
Cómo solucionarlo
Añade esto como el primer elemento dentro de tu <head>:
<meta charset="UTF-8" />¿Por qué UTF-8?
UTF-8 es el estándar universal para contenido web:
- Soporta todos los caracteres de todos los idiomas
- Es compatible con ASCII
- Lo utilizan más del 98% de los sitios web en todo el mundo
- Es requerido por la especificación HTML5
- Es la codificación predeterminada para JSON, JavaScript y muchas APIs
Buenas prácticas
- Usa siempre UTF-8 — No hay razón para usar otra codificación en la web moderna
- Colócalo primero en el
<head>— El navegador necesita conocer la codificación antes de analizar cualquier otro contenido - Mantenlo dentro de los primeros 1024 bytes — Es un requisito de la especificación HTML para la detección de codificación
- Que coincida con las cabeceras del servidor — Asegúrate de que tu servidor envíe
Content-Type: text/html; charset=UTF-8 - Guarda tus archivos como UTF-8 — Verifica que tu editor de texto y herramientas de compilación generen archivos con codificación UTF-8
La sintaxis alternativa
También puedes encontrar esta sintaxis más antigua y equivalente:
<!-- HTML5 (recomendado) -->
<meta charset="UTF-8" />
<!-- HTML4/XHTML (más antiguo, aún funciona) -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />La sintaxis HTML5 (<meta charset="UTF-8" />) es la preferida por su simplicidad.