miércoles, 27 de abril de 2011

Espacios en blanco en HTML

Hoy toca de hablar de los espacios en blanco en documentos HTML.

Lo cierto es que, aunque este tema puede parecer algo trivial, estoy seguro de que más de uno no tiene 100% claro cómo funcionan exactamente este tema (incluido yo).

Lo primero que hay que aclarar es que HTML tratará de igual forma una serie de caracteres que para él son todos lo mismo, es decir, tanto un espacio en blanco como un tabulador, un retorno de carro o una nueva línea, todos ellos tienen el mismo tratamiento… son ignorados!

El comportamiento predeterminado de HTML es ignorar cualquiera de esos caracteres, es decir, no trabaja con los espacios sobrantes (lógicamente queda fuera de ese tratamiento el espacio en blanco que separa palabras).

De este modo, podemos escribir un código HTML como el siguiente (donde hay espacios, tabuladores, nuevas líneas, etc.) y observar como se ve en el navegador

clip_image001

clip_image003

El resultado no hace sino afirmar que HTML ignora los espacios en blanco.

Si lo queremos es solucionar el problema de nuevas líneas, HTML nos ofrece la etiqueta <br> (<br /> en XHTML). Esta etiqueta fuerza al navegador a insertar una nueva línea, pero fíjate como esto sigue sin afectar a los tabuladores y espacios en blanco.

clip_image004

clip_image005

Para los espacios en blanco sobrantes, de nuevo HTML nos da una solución. Esta vez tendremos que utilizar la entidad HTML &nbsp;. Esta entidad fuerza al navegador a mostrar un espacio en blanco (fíjate que para separar palabras no es necesario porque ese es el único espacio en blanco que HTML trata de forma automática). Por ejemplo:

clip_image006

clip_image007

Como curiosidad te puedo decir que &nbsp; significa NonBreakingSpace y que además de forzar al navegador a mostrar espacios en blanco, tiene otro efecto no tan obvio y es que fuerza al navegador a no partir los textos. Es decir, si yo escribo en HTML “Sergio”, jamás veré “Ser” en una línea y “gio” en otra (esto de cajón, ¿Quién se cree HTML para partir mí nombre?).

Pues bien, si escribo “Sergio&nbsp;León” pasará exactamente lo mismo, siempre veré Sergio seguido de León. Un momento… ¡Entonces esto significa que nunca mi apellido se mostrará en una nueva línea! ¿Era esto lo que quería? Lo cuento así porque lo que intento evitar es la “sobredosis de &nbsp;” (que te juro existe y puede ser un dolor de cabeza). De hecho, si lo que quieres es que no se parta el texto, lo que debería utilizar es la propiedad white-space y el valor nowrap.

Finalmente, la conclusión a la que llegamos es que da igual como luzca nuestro código  HTML (en lo relativo a espacios en blanco), porque después el navegador lo interpretará como es menester. Y que además tenemos que tener cuidado con &nbsp; porque recuerda: “es un espacio en blanco no divisible”.

Un saludo!

11 comentarios:

  1. muy bien, me ha servido... 

    ResponderEliminar
  2. Gracias!!! Lo usé en mi página www.gaudia.pe

    ResponderEliminar
  3. Me alegro que te haya servido! ;-)
    Gracias por comentar.

    ResponderEliminar
  4. Buena aclaración, la verdad es que siempre hay cositas sueltas en esto del diseño web que es bueno ir entendiendo.

    Gracias

    ResponderEliminar
  5. Vos sos un maestro.....porque enseñas de verdad....y estoy tratando de buscar como escribir espacios en blanco en El maldito facebook ijo de re mil puta...porque quiero escribir un poema deonde alguna s palabras empizan luago del margen. Y nada estoy tratando de investigarlo, pero ni idea si ese sistema es html o no, si te pinta decir como se escribe "espacio en blanc" en el sistema de face, te lo agradeceria asi no tengo que trabajar al pedo.....
    igual soy peronista si vos no me lo decis yo lo ovoy a encontrar, salute compáñeorls, ya tu forma de hablar me cae muy bien...espero que no hayas copiado a un autor, sino lo estaras traiccionando,

    YO VEO TODO, Amén.

    y viva peron caraji!

    jeje :P


    la risita la escribi ehe

    ResponderEliminar
  6. NO me lo digas capo, quiero descubrirlo, sabes por que? porque soy el unico que puede hacerlo, chau un beso gracias totales..

    ResponderEliminar
  7. Como yo se que no me vas a hackear, si es que sabe hacerlo, porque "se ve" que sos s una buena persona, (porque hablas de verdad) yo te digo que me llamo nahuel dirassar, y si entras a mi face, te habras dado cuenta que es lo que estoy tratando de hacer, y diras: es una boludez, porque nadie se lo dice??

    y te responderás: porque nadie lo sabe, solo dios puede saberlo..

    repito mi nombre NAHUEL DIRASSAR.

    SAludos.!

    ResponderEliminar
  8. Y una cosa mas: Yo se que sos una buena persona, pero sabes porque lo se??

    PORQUE YO LO DIGO

    Quien sepa oír que oiga. Tú ya lo sabes.

    Amén.

    ResponderEliminar
  9. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  10. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  11. Para los espacios en blanco sobrantes, de nuevo HTML nos da una solución. Esta vez tendremos que utilizar la entidad HTML  . Esta entidad fuerza al navegador, https://doctorariobo.com/5-maneras-de-continuar-aumentando-tus-ganancias/

    ResponderEliminar