charset y gestión de Unicode: caracteres especiales
Use UTF-8 y entidades HTML para mostrar correctamente cualquier carácter
charset y gestión de Unicode: caracteres especiales es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
La declaración de charset
Todo documento HTML debe declarar su codificación de caracteres. El estándar es UTF-8: <meta charset="utf-8"> como primer elemento de <head>. Sin esta declaración, el navegador intenta adivinar la codificación, lo que suele producir errores con texto no ASCII.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page</title>¿Por qué UTF-8?
UTF-8 codifica todos los caracteres Unicode: todos los sistemas de escritura, todos los emojis y todos los símbolos. Es compatible con ASCII (a-z y 0-9 siguen ocupando un solo byte) y es la codificación predominante en la web moderna: más del 98 % de las páginas en 2024 utilizan UTF-8.
La ubicación es fundamental
La etiqueta meta de charset debe aparecer en los primeros 1024 bytes del documento, normalmente en la primera línea de <head>. El navegador detecta la codificación inspeccionando esos bytes; declarar charset más adelante puede no tener ningún efecto sobre el resultado de esa detección.
Guarde los archivos en UTF-8
La etiqueta meta declara la codificación, pero el editor debe guardar realmente el archivo con esa codificación. VS Code, IntelliJ y Sublime utilizan UTF-8 de forma predeterminada en sus versiones modernas. Los archivos guardados como Windows-1252 o ISO-8859-1 producen mojibake (caracteres ilegibles), incluso con la etiqueta meta correcta.
Entidades HTML
Los caracteres especiales de HTML (<, >, &, ") deben escaparse para evitar confusiones del analizador: < para <, > para >, & para & y " para ". Dentro de los valores de atributos, " es obligatorio cuando el valor está delimitado con comillas dobles.
Referencias numéricas de caracteres
Cualquier carácter Unicode puede representarse mediante su punto de código: ☃ o ☃ para el muñeco de nieve (☃). Utilícelo cuando no resulte práctico escribir directamente el carácter (por ejemplo, símbolos poco comunes o caracteres de control), pero prefiera el carácter Unicode literal cuando el editor lo admita.
Emojis y pares suplentes
Los emojis son caracteres Unicode por encima de U+FFFF y se representan como pares suplentes en UTF-16 (la codificación utilizada internamente en las cadenas de JavaScript). UTF-8 los codifica como secuencias de 4 bytes. Con charset="utf-8" establecido, los emojis se muestran de forma nativa sin necesidad de entidades.
Errores comunes de codificación
Que "Don't" se muestre como "Donât" significa que el archivo se está interpretando como Latin-1, pero se guardó como UTF-8. Soluciónelo guardando el archivo como UTF-8 y comprobando que esté presente <meta charset="utf-8">. Los navegadores modernos utilizan UTF-8 de forma predeterminada solo cuando falta la etiqueta meta y el archivo parece estar codificado plausiblemente como UTF-8.
Encabezado HTTP Content-Type
El servidor también puede declarar la codificación mediante el encabezado de respuesta: Content-Type: text/html; charset=utf-8. El encabezado tiene prioridad sobre la etiqueta meta, por lo que los servidores mal configurados pueden producir errores de codificación incluso con HTML perfectamente escrito.
Trabajo con formularios
De forma predeterminada, los formularios se envían utilizando la codificación de la página. Las páginas UTF-8 envían los datos del formulario en UTF-8, y el servidor debe decodificarlos como UTF-8. La discrepancia entre la codificación de la página y la decodificación del servidor es una fuente habitual de datos de usuario dañados en sitios multilingües.
Evite BOM
Los archivos UTF-8 pueden comenzar con una marca de orden de bytes (BOM, 0xEF 0xBB 0xBF). La mayoría de los navegadores la toleran, pero algunas herramientas y CDN no; además, la BOM aparece como un carácter visible en algunos editores de texto. Guarde los archivos como "UTF-8 sin BOM" para evitar sorpresas.
Comprobación de conocimientos
¿Por qué debe aparecer dentro de los primeros 1024 bytes de un documento HTML?
Resumen
Declare <meta charset="utf-8"> como primer hijo de <head> y guarde los archivos en UTF-8. UTF-8 codifica todos los caracteres Unicode, incluidos los emojis y todos los sistemas de escritura. Escape <, >, & y " como entidades; utilice referencias numéricas para caracteres poco comunes. Tenga en cuenta que HTTP Content-Type puede sobrescribir la etiqueta meta y que la BOM puede aparecer como un carácter visible en algunas herramientas.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 40
- Lecciones
- 159
Preguntas frecuentes
¿La lección «charset y gestión de Unicode: caracteres especiales» es gratis?
Sí — el texto completo de «charset y gestión de Unicode: caracteres especiales» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «charset y gestión de Unicode: caracteres especiales»?
Use UTF-8 y entidades HTML para mostrar correctamente cualquier carácter Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «charset y gestión de Unicode: caracteres especiales»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- El atributo lang y los lectores de pantalla
- dir=rtl para texto de derecha a izquierda
- Los elementos bdi y bdo
- charset y gestión de Unicode: caracteres especiales