Introducción a XHTML

3.6. Codificación de caracteres

Una consideración importante directamente relacionada con el texto de las páginas HTML es la codificación de los caracteres y la inserción de caracteres especiales. Algunos de los caracteres que se utilizan habitualmente en los textos no se pueden incluir directamente en las páginas web:

  • Los caracteres que utiliza HTML para definir sus etiquetas (<, > y ") no se pueden utilizar libremente.
  • Los caracteres propios de los idiomas que no son el inglés (ñ, á, ç, ¿, ¡, etc.) pueden ser problemáticos dependiendo de la codificación de caracteres utilizada.

La solución a la primera limitación consiste en sustituir los caracteres reservados de HTML por unas expresiones llamadas entidades HTML y que representan a cada carácter:

Entidad Carácter Descripción Traducción
&lt; < less than signo de menor que
&gt; > more than signo de mayor que
&amp; & ampersand ampersand
&quot; " quotation mark comillas
&nbsp; (espacio en blanco) non-breaking space espacio en blanco
&apos; ' apostrophe apóstrofo

De esta forma, si se considera el siguiente texto:

Los caracteres <, >, " y & pueden dar problemas con los textos en HTML

Para mostrar correctamente el texto anterior en una página HTML, se debe sustituir cada carácter especial por su entidad HTML:

<p>Los caracteres &lt;, &gt;, &quot; y &amp; pueden dar problemas con los textos en HTML</p>

Ejercicio 5

Determinar el código HTML que corresponde al siguiente documento:

Texto HTML que incluye caracteres especiales

Figura 3.19 Texto HTML que incluye caracteres especiales

Ver solución

Por otra parte, los caracteres propios de los idiomas diferentes al inglés también pueden ser problemáticos. El motivo es que desde que se crea una página web hasta que llega al navegador del usuario, intervienen numerosos procesos:

  • El diseñador crea la página web con su editor HTML (por ejemplo Dreamweaver).
  • Si se trata de una aplicación dinámica, el programador recorta la página HTML del diseñador y la mezcla con el resto del código de la aplicación (por ejemplo PHP).
  • El servidor web almacena las páginas HTML estáticas o el código de la aplicación web y sirve las páginas solicitadas por los usuarios.
  • El usuario solicita y visualiza las páginas web a través de su navegador.

Si en todos los procesos anteriores se utiliza la misma codificación de caracteres, los caracteres propios de los idiomas se pueden escribir directamente:

<p>Este párrafo contiene caracteres acentuados y se almacena en formato UTF-8</p>

La palabra párrafo del ejemplo anterior incluye la letra á. Si el editor HTML del diseñador utiliza la codificación UTF-8, el entorno de desarrollo del programador también utiliza UTF-8, el servidor web sirve las páginas con esa codificación y el navegador del usuario es capaz de visualizar las páginas con formato UTF-8, el texto anterior se verá correctamente en el navegador del usuario.

Sin embargo, muchas veces no es posible que todos los procesos involucrados utilicen la misma codificación de caracteres. Por limitaciones técnicas o por decisiones de los diseñadores y programadores, los textos pueden pasar de codificación UTF-8 a codificación ISO-8859 en cualquier momento. Si se produce este cambio sin realizar una conversión correcta, el navegador del usuario mostrará caracteres extraños en todos los acentos y en todas las letras como la ñ.

La solución más sencilla para asegurar que todos estos caracteres potencialmente problemáticos se van a visualizar correctamente en el navegador del usuario consiste en sustituir cada carácter problemático por su entidad HTML:

Entidad Carácter Descripción oficial
&ntilde; ñ latin letter n with tilde
&Ntilde; Ñ latin capital n letter with tilde
&aacute; á a acute
&eacute; é e acute
&iacute; í i acute
&oacute; ó o acute
&uacute; ú u acute
&Aacute; Á A acute
&Eacute; É E acute
&Iacute; Í I acute
&Oacute; Ó O acute
&Uacute; Ú U acute
&euro; euro

Así, el párrafo de texto del ejemplo anterior, se podría escribir de la siguiente manera:

<p>Este p&aacute;rrafo contiene caracteres acentuados y se almacena en formato UTF-8</p>

Si se utilizan las entidades HTML en vez de los caracteres problemáticos, es indiferente pasar de una codificación de caracteres a otra diferente. En la Wikipedia se puede consultar la lista completa de las 252 entidades HTML definidas.