HTML: caracteres especiales

A veces necesitamos escribir una serie de caracteres que pueden entrar en conflicto con las propias etiquetas HTML, o que pueden no ser interpretados correctamente en todos los navegadores del mundo. Estos caracteres son conocidos como "caracteres especiales" y para poder insertarlos en nuestro documento HTML debemos sustituirlos por un juego de caracteres basados en el código ASCII.

Pongamos el caso de que queremos construir un blog similar a este donde vamos a querer mostrar porciones de código HTML. Tendremos entonces que decirle al navegador que no interprete las etiquetas, porque de lo contrario no serían vistas por los usuarios y además podrían distorsionar la estructura de nuestro documento.

Supongamos que queremos mostrar el siguiente bloque:

<div>
<strong>¡Hola Mundo!</strong>
</div>

Si escribiéramos esto tal cual en nuestro documento, el navegador mostraría únicamente el texto "¡Hola Mundo!" r en negrita. Por lo tanto debemos sustituir los símbolos "<" y ">" por sus respectivos códigos "&lt;" y "&gt;". De esta forma, nuestro bloque quedaría así:

&lt;div&gt;
&lt;strong&gt;¡Hola Mundo!&lt;/strong&gt;
&lt;/div&gt;

Horrible ¿verdad? Pues es lo que hay. :P

En este enlace podéis ver la tabla ASCII de todos los caracteres especiales y sus respectivos códigos HTML:
http://ascii.cl/es/codigos-html.htm

Pero no os asustéis, tened en cuenta que no necesitaremos la mayoría de ellos. Otros conjuntos de caracteres que nos van a interesar son los que representan un espacio en blanco ("&nbsp;") y el símbolo & ("&amp;").

Se me olvidó comentarios que los navegadores únicamente dejan un espacio en blanco, si existe, a no ser que se les indique lo contrario. Fijaros que a pesar del indentado del código fuente que os he pasado en los apuntes, estos espacios no se veían reflejados en el navegador. Sin embargo, puede ser que a veces sí nos interese mostrar varios espacios. Para ello no tendremos más que sustituirlos por su código HTML. Un ejemplo:

Palabaras   separadas   por   tres   espacios
Palabaras &nbsp;&nbsp;separadas &nbsp;&nbsp;por &nbsp;&nbsp;tres &nbsp;&nbsp;espacios

Por otro lado, tenemos el caso del signo ampersand ("&"). Si escribimos este signo directamente en nuestro documento es probable que se visualice correctamente en todos los navegadores. Sin embargo, la W3C indica que debe sustituirse por su respectivo código HTML para evitar conflictos debido a que este es el símbolo del que nos servimos para escribir los caracteres especiales.

Comments

You must sing in to post a comment.

There are no comments for this article.