¿Qué es el atributo charset en la etiqueta «meta»?
La etiqueta en HTML define la codificación de caracteres de tu web, asegurando que acentos y símbolos se muestren correctamente.
La etiqueta <meta charset="UTF-8"> es una declaración crucial en HTML que especifica la codificación de caracteres que utiliza tu documento web. Esta se coloca dentro de la sección <head>.
¿Qué es la codificación de caracteres?
Cada carácter que ves en una pantalla (letras, números, símbolos como la «ñ», acentos como «á», o emojis como 😊) necesita ser representado internamente por el ordenador mediante un código numérico (bytes).
Una codificación de caracteres es, en esencia, el sistema o «diccionario» que define la correspondencia entre esos caracteres y sus representaciones numéricas.
Si no se especifica una codificación, o si se usa una incorrecta, el navegador podría interpretar mal estos códigos numéricos. El resultado es que el texto podría mostrarse con caracteres extraños (a menudo llamados «mojibake», como por ejemplo �), haciendo que tu contenido sea ilegible, especialmente si usas caracteres que no pertenecen al alfabeto inglés básico.
UTF-8: El estándar recomendado
Para el desarrollo web moderno, la codificación de caracteres universalmente recomendada y más utilizada es UTF-8. Las razones principales son:
- Universalidad:
UTF-8puede representar prácticamente cualquier carácter de casi todos los idiomas del mundo, así como una amplia gama de símbolos y emojis. Esto lo hace ideal para sitios web con contenido multilingüe o que simplemente quieren asegurar la correcta visualización de cualquier carácter. - Compatibilidad: Es compatible con ASCII, un estándar más antiguo que cubre los caracteres básicos del inglés.
- Eficiencia: Para los caracteres más comunes (como los del alfabeto latino sin acentos),
UTF-8usa solo un byte, siendo eficiente. Para otros caracteres, puede usar hasta cuatro bytes. - Estándar web: Es la codificación por defecto y recomendada para documentos HTML5.
Al declarar <meta charset="UTF-8">, le estás diciendo al navegador de forma explícita que use este «diccionario» UTF-8 para interpretar los bytes del archivo HTML y convertirlos en el texto que el usuario ve.
Sintaxis y ubicación correcta
La forma estándar y simplificada de declarar la codificación de caracteres en HTML5 es la siguiente:
<!DOCTYPE <strong>html</strong>>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Título de mi Página</title>
</head>
<body>
<h1>¡Bienvenido!</h1>
<p>Esta página utiliza UTF-8 para mostrar correctamente la «ñ», los acentos como «á», «é», «í», «ó», «ú», y símbolos como «€».</p>
</body>
</html>
Lenguaje del código: PHP (php)Es muy importante colocar la etiqueta <meta charset="UTF-8"> lo más arriba posible dentro del elemento <head>. Idealmente, debería ser el primer elemento hijo de <head>, o al menos encontrarse dentro de los primeros 1024 bytes del documento. Esto asegura que el navegador conozca la codificación antes de empezar a procesar la mayoría del contenido de la página, previniendo que intente «adivinar» la codificación y se equivoque.
