Juego de caracteres, charset, del documento HTML

  • Por
Cómo y por qué debemos especificar el juego de caracteres, también conocido como charset, en los documentos HTML.
HTML es un lenguaje para modelar páginas web que se utiliza en la Red Global y por tanto, debe permitir crear documentos escritos en varios idiomas. Bien sabemos que cada idioma tiene determinados caracteres, que forman las palabras, y algunos de ellos pueden ser hasta específicos de una lengua en concreto, como por ejemplo la letra Eñe "ñ" del español o la ce cedilla "ç" del catalán, portugués etc. Pero no solo están las letras de cada alfabeto, sino también algunos signos como el dólar o euro, que también deben poderse representar en una página web.

En el mundo informático en general los archivos de texto pueden escribirse con varios juegos de caracteres distintos. Esto es algo que la mayoría de las personas no tiene ninguna necesidad de saber, por lo que, cuando guardamos un archivo de texto en un programa como el Bloc de Notas, nadie nos pregunta qué juego de caracteres estamos utilizando o queremos usar.

Existen diversos juegos de caracteres, que tienen un conjunto mayor o menor de letras y símbolos, dependiendo para lo que fueron diseñados. Quizás alguien haya oído hablar, o visto nombrar por alguna parte, el juego de caracteres UTF-8, que es uno de los más comunes, o el ISO-8859-1, que es el predeterminado en la mayoría de los editores de texto plano, en Windows. Es decir, aunque no lo sepamos, cuando se guarda un archivo de texto en el ordenador, se codifica utilizando un juego de caracteres determinado.

Como ya podemos hacernos una idea, el juego de caracteres no es más que un conjunto de letras y símbolos utilizados en la escritura y ahora ya sabes que cualquier fichero informático que contiene texto plano (archivos .txt o .html por ejemplo) está codificado con un juego de caracteres. A la hora de crear páginas web en HTML debemos tener en cuenta esto porque, dependiendo del juego de caracteres utilizado, tendremos disponibles unos u otros símbolos a la hora de redactar los textos de una página web.

En este artículo, que escribimos para completar el Manual de HTML de DesarrolloWeb.com, pretendemos ofrecerte todas las claves sobre la elección y definición de los juegos de caracteres en tu página web, de manera que no tengas nunca el típico problema de no verse correctamente los acentos, letras como la ñ u otros símbolos como los mayores y menores que.

Informar sobre el juego de caracteres con la etiqueta META CHARSET

En un documento HTML tenemos la posibilidad de informar sobre qué juego de caracteres estamos utilizando. Aunque, en caso que no lo hagamos, los navegadores intentarán detectarlo automáticamente. Claro está que, si nosotros mismos indicamos qué juego de caracteres usamos, será mucho mejor porque el navegador no tendrá que deducirlo por su cuenta y nos ahorraremos posibles errores de interpretación.

Para informar en el código fuente HTML del conjunto de caracteres que utilizamos se dispone de una etiqueta META, que se coloca en la cabecera del documento (en el HEAD). Esa etiqueta tiene esta sintaxis.

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
Como vemos, dentro de esta etiqueta se está informando el "charset" (set o conjunto de caracteres) utilizado, que en este caso sería "ISO-8859-1". Si estamos trabajando con UTF-8 podríamos utilizar esta META para informar sobre ello:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Nota: En HTML indicar el juego de caracteres es meramente opcional, pero en XHTML siempre se debe señalar en el documento básico. XHTML utiliza por defecto el juego de caracteres UTF-8 y si lo indicamos en la etiqueta META, debemos tener en cuenta el cierre de esa etiqueta, utilizando un código como este:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
o bien:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>

Qué charset escoger y cómo guardar el documento para ello

Los lectores de este artículo, que entiendo escriben sus páginas web con contenidos en Español, generalmente se decantarán entre dos posibles charset. Uno es el UTF-8 y otro es el ISO-8859-1, que son adecuados justamente por contener los caracteres típicos de español y de otra serie de idiomas occidentales.

Cualquiera de estas dos opciones es bastante común y nos ofrecerá todo lo que podamos necesitar. La elección por tanto es un poco indiferente cuando estamos trabajando en HTML y quizás dependa un poco más del programa que usemos para editar el código fuente de nuestras páginas o de nuestro sistema operativo. En Windows, la mayoría de los programas guardan los archivos de texto bajo el juego de caracteres ISO-8859-1, por ello, lo más seguro es que estemos utilizando ese charset aunque ni siquiera lo sepamos.

Muchos programas, como el Bloc de Notas, no nos preguntan siquiera el juego de caracteres que queremos utilizar para guardar el archivo, pero hay otros editores más avanzados que sí permiten escoger el charset deseado. Dependiendo del programa se puede decidir ese juego de caracteres de diversas maneras. Muchos de ellos tienen cuadros de diálogo en la opción "Guardar como" que incluyen un menú para marcar el charset que queremos utilizar y otros se pueden configurar en las opciones de programa, para configurar el juego de caracteres predeterminado a utilizar cuando guardamos los archivos. Hay incluso programas que son suficientemente inteligentes para que, a vista del código HTML y el charset que hemos definido en el mismo en la etiqueta META, guarden por ellos mismos el archivo con la codificación correcta.

Por ejemplo, si vemos el código fuente de DesarrolloWeb.com veremos que nosotros hemos escogido el ISO-8859-1, pues la mayoría de los que editamos código fuente del sitio trabajamos en Windows tradicionalmente y los archivos están con el juego de caracteres predeterminado de la mayoría de los programas Windows. Otra manera de ver el juego de caracteres de una página es utilizando el navegador Firefox en la opción del menú "Ver / Codificación de caracteres".

Utilizar caracteres que no están en nuestro juego de caracteres

Si lo deseamos, en HTML también podemos colocar en el texto de nuestra página web un carácter que no se encuentre disponible en el juego de caracteres que estamos utilizando. Para ello se utilizan los caracteres especiales o entidades especiales del HTML , que no son más que unos códigos especiales para escribir caracteres que no están dentro del alfabeto inglés, como los acentos, ñ, ç, etc. e incluso símbolos como &, € o >.

Podemos encontrar en DesarrolloWeb.com una explicación más detallada de los caracteres especiales, así como una lista de los disponibles en HTML

Nota: Estaría bien comentar que estamos obligados a utilizar siempre los caracteres especiales cuando queramos colocar en el texto los mayores y menores que (">" o "<"), para no confundirlos con las aperturas y cierres de etiquetas.

Conclusión sobre los juegos de caracteres (charset) en HTML

Con estas notas espero que tendrás suficiente información como para no dejar la elección del juego de caracteres a la mera suerte o configuración de tus programas y, lo que es más importante, que los tengas en cuenta cuando generes código HTML para informar siempre tu charset y que no haya problemas de interpretación de tu página web.

Con esto espero que se solucionen también todas las dudas de las personas que experimentan problemas puntuales en sus páginas web, cuando algunos caracteres no se muestran correctamente. La mayoría de las veces, como hemos dicho, esos se soluciona simplemente especificando el juego de caracteres en el código fuente del HTML, en la etiqueta META para especificar el charset.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Henry

18/1/2011
Charset para otros idiomas
Muy interesante el artículo, pero que pasa mi mi página es multiidioma??, mi página es en Ingles, Español, Italiano, Aleman, Holandes y frances. Entonces significa que dependiendo el idioma en que este viendo el usuario tengo que cargar uno u otro charset??, cuales serian estos??

Russellhoff

01/2/2011
Multi idioma?
Si es multiidioma, create una funcion, ejemplo php, q en funcion de X idioma muestre un meta u otro (case-switch o ifs).

Dani

02/2/2011
Multiidioma
Si la web es multiidoma lo mejor es que simplifiques. No cambies de charset en función del idioma, usa un charset que contenga todos los carácteres que necesitas. Por ejemplo: UTF-8 para los que mencionas Italiano, Aleman, Ingles...

Si además necesitas japones... usa UTF16

ijcv

03/2/2011
Juego de caracteres, charset, del documento HTML
Simple pero no siempre ovbio el hecho de que haya que fijar el juego de caraceres. Muy buen aporte, gracias.

Saylin

25/8/2011
Juego de caracteres
Como se que juego de caracteres ando usando, para poder poner en la etiqueta charset mi juego de caracteres.