Charset HTML

Los enlaces de favicon dicen al navegador qué imagen diminuta mostrar en la pestaña. El juego de caracteres (charset) responde a una pregunta más fundamental: ¿cómo debe el navegador convertir los bytes de tu archivo HTML en letras que las personas puedan leer? Cuando la codificación es incorrecta, el persa, el árabe, el latín acentuado, el chino y los emoji suelen convertirse en mojibake: secuencias corruptas que parecen rotas aunque el resto del marcado esté bien.

Qué significa charset

Un juego de caracteres (y su codificación) asigna bytes en disco a caracteres. Los archivos HTML son flujos de bytes. Sin una regla de decodificación correcta, el navegador puede adivinar mal. Declarar UTF-8 en head es la costumbre moderna de la web que mantiene texto multilingüe y símbolos fiables entre editores, servidores y navegadores.

Respuesta directa

Coloca <meta charset="UTF-8"> cerca de la parte superior de head — idealmente dentro de los primeros 1024 bytes del archivo para que el navegador aprenda la codificación pronto. UTF-8 es la codificación que debes usar en casi todas las páginas nuevas. Guarda también el propio archivo HTML como UTF-8 en tu editor. La declaración y el guardado del archivo deben coincidir; una sin la otra sigue produciendo caracteres rotos.

Declarar, guardar e idioma — trabajos distintos

Una demo UTF-8 multilingüe

Un documento corto muestra charset en acción. La meta va primero en head, luego un título, luego texto del body que mezcla sistemas de escritura.

Lectura del ejemplo

• <meta charset="UTF-8"> está temprano en head, antes de la mayor parte del resto del contenido
• lang="en" nombra un idioma principal para las herramientas; no sustituye a charset
• El párrafo incluye latín, persa, árabe, chino y un emoji — todo correcto bajo UTF-8 cuando el archivo se guarda bien
• Si esos caracteres se rompen, revisa la codificación al guardar antes de reescribir la estructura HTML

Por qué poner charset pronto

Los navegadores empiezan a leer el archivo desde arriba. Si charset aparece solo después de un bloque enorme de texto o scripts, algunos caracteres ya pueden haberse interpretado con una conjetura incorrecta. Mantén la meta cerca del inicio de head. En las cabeceras iniciales de sesiones anteriores, charset iba a propósito primero por esta razón.

Mojibake: el síntoma de un desajuste

El mojibake parece puntuación aleatoria, restos latinos o caracteres de reemplazo donde deberían haber palabras reales. Causas comunes: declarar UTF-8 mientras el archivo se guardó en una codificación antigua, u omitir charset y esperar que el navegador acierte. Corrige el par de codificación — meta más guardado del archivo — en lugar de «arreglar» las letras reescribiéndolas para siempre.

lang no es charset

El atributo lang en html (y a veces en elementos concretos) ayuda a lectores de pantalla, la separación silábica y las herramientas de búsqueda a entender el idioma. Charset se ocupa de decodificar bytes. Normalmente quieres ambos: lang para la identidad del idioma, charset para la codificación. No quites charset porque ya pusiste lang="fa" o lang="ar".

Servidores y despliegues reales (nota para principiantes)

Los servidores de producción también pueden enviar un charset en la cabecera Content-Type de HTTP. En este curso, domina primero el hábito de la meta HTML y el guardado UTF-8. Cuando un sitio en vivo discrepa de tu meta, pide a un mentor que revise las cabeceras — pero la mayoría de los problemas de práctica local son la codificación al guardar en el editor o una meta ausente.

Practica en tu editor

1. Crea una página con <meta charset="UTF-8"> al inicio de head.
2. Añade una frase que incluya letras no inglesas y un emoji.
3. Confirma que la barra de estado del editor diga que el archivo es UTF-8 y guarda.
4. Abre la página en un navegador y confirma que los caracteres se ven bien.
5. (Opcional, con cuidado) Guarda una copia en una codificación antigua, vuelve a abrir y observa el mojibake — luego restaura UTF-8 para reconocer el modo de fallo.

Errores fáciles

• Olvidar meta charset y confiar en la suerte del navegador
• Guardar el archivo en una codificación antigua mientras se declara UTF-8
• Poner la meta charset muy tarde en un head enorme
• Confundir charset con el título visible de la página o con lang
• Asumir que los problemas de emoji son siempre «bugs de HTML» cuando la codificación es la causa real
• Arreglar mojibake borrando lang en lugar de corregir el guardado UTF-8 + la meta

Resumen

• Charset declara cómo decodificar los bytes del archivo HTML en caracteres
• Usa UTF-8 en casi todas las páginas nuevas y coloca meta charset pronto en head
• Guarda el archivo como UTF-8 para que la declaración y la codificación en disco coincidan
• lang nombra el idioma; charset nombra la codificación — trabajos distintos
• El mojibake suele significar un desajuste de codificación, no un fallo misterioso de una etiqueta