HTML: Un par de asuntillos importantes

Ya sabemos construir páginas webs con HTML (y si no sabes empieza a leer a partir de aquí). Pero, como dije antes, no pararemos de aprender el lenguaje HTML a lo largo de nuestra vida. Voy a dejar aquí escritas un par de cosillas que se debe saber para no crear confusiones.

Los espacios en el texto

Estamos acostumbrados a usar programas para redactar como el Microsoft Word o el Word Office. Pero cuando desarrollamos una web el sistema es absolutamente diferente. Por más que escribas espacios en blanco y saltos de línea en los párrafos del código la máquina no hará distinción entre éstos. De hecho tan solo hará un espacio entre palabra y palabra, por más que las separes.

Lo bueno de éso es que permite escribir el código de la página como tu te sientas más cómodo en tu editor. Por ejemplo, yo siempre pongo una sangria de espacios a los contenidos de un elemento como por ejemplo el "head", para remarcar visualmente que ese texto está dentro de otro. Son recursos y cada uno usa los que le sean más útiles.

Si necesitas poner espacios en blanco en la web (algo que no acostumbra a tener mucha utilidad, por cierto) debes saber que la manera correcta es con la "etiqueta" (no es una etiqueta, se explica después)   (sí, el punto y coma va incluido) y representan las siglas de no-break space.

Te pondré un ejemplo para que te quede claro:

• Código: <p>Hola     Adiós</p>
  Texto: Hola Adiós
• Código: <p>Hola&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Adiós</p>
  Texto: Hola          Adiós

Desde mi punto de vista es algo bastante inútil, feo y molesto de usar. Para este tipo de manipulación de la presentación está el lenguaje CSS.

Lo mismo pasa con los saltos de línea, que por más que los escribes solo formarán un único espacio en blanco. La etiqueta correcta es <br></br>, pero ésta etiqueta no es necesario ponerle el cierre (aunque se puede usar así), por lo cual se puede escribir <br> para HTML4 o <br/> para XHTML. En HTML5 puedes usar las dos anteriores. Se recomienda usar la segunda por mayor compatibilidad.

Caracteres especiales

Hay caracteres que son considerados especiales por no ser reconocidos en todos los ordenadores, como por ejemplo nuestra querida "Ñ". Ésta letra se escribe digitalmente con un caracter especial que no siempre será identificado en otros países.

Hay un sistema para escribir estos caracteres especiales y que puedan ser leídos en todos los ordenadores. Todos los caracteres tienen un nombre o número de referencia (referencia de caracter) y debes escribirlo entre los símbolos "&" y ";" (exacto, la etiqueta que hemos visto antes para escribir espacios en blanco es una referencia de caracter también). A este proceso se le llama "escapar caracteres".

Si por ejemplo queremos poner el símbolo "&" en el texto que queremos mostrar en la web, como comprenderás no basta con escribirlo porque éste caracter es un elemento del lenguaje HTML (igual que "<") y confundiría al navegador. Para ello deberás escribir &amp; y entoncés sí aparecerá el caracter "&" en el texto de tu web.

En la web hay varias listas de las referencias de caracteres. Aquí dejo la lista oficial.

Para las referencias de caracteres numéricas decimales se escribe &#número; y las referencias de caracteres numéricas exadecimales se escribe con &#xnúmero; (muy pocas veces tendrás que hacer uso de ésto).

El problema de ésto es que hay tutoriales donde explican que los símbolos como por ejemplo las vocales acentuadas deben escribirse con su referencia de caracter, porque en otros paises (como los de habla inglesa) no usan tilde en ninguna vocal. Pero eso es un error porque las cosas han avanzado mucho y actualmente las páginas web se implementan eligiendo el juego de caracteres adecuado, que en nuestro caso es el ISO-8859-1 (también llamado Latin1 o UTF-8).

Si lo deseas puedes consultar mi proyecto del Módulo 2 del curso iDESWEB. En él he construido una página web, tocando todos los temas tratados hasta ahora (incluidos el prototipado). Lo he dejado todo detallado para que veas un buen ejemplo.