Antes de comenzar a introducir texto en una página web, deberemos entender cómo el navegador interpreta los saltos de línea y espaciados. Empecemos con una característica que suele molestar al principio: todos los espaciados múltiples, tabulados o saltos de línea que se hayan incluido en los textos serán interpretados como un único espacio.
Vamos a probarlo utilizando como base una estructura básica de una página web. Entre las etiquetas <body> y </body>, introducimos texto tabulado, saltos de línea, etc. Tras guardar el archivo con extensión .htm o .html lo abrimos desde un navegador y, como podemos comprobar, por mucho que metamos tabulaciones y espacios en el texto, el navegador mostrará solamente un espacio entre las palabras. Además, si cambiamos el tamaño de la ventana del navegador, los saltos de línea se adaptarán a dicho tamaño.
Para poder hacer todas estas operaciones en condiciones, deberemos usar etiquetas que indiquen cómo debe ser interpretado el texto por el navegador. Empecemos con la descripción de algunas etiquetas que nos serán de utilidad a este respecto:
- <br /> sirve para crear saltos de línea. Es decir, tras esta etiqueta, el texto se mostrará en la línea siguiente.
- <p> </p> sirve para crear y separar párrafos entre sí.
- <hr /> sirve para crear una línea horizontal para separar un párrafo de otro.
- <blockquote> </blockquote> sirve para añadir una cita. Generalmente, esta etiqueta crea un nuevo párrafo pero con márgenes tanto a la derecha como a la izquierda. También se le puede dar formato a través de CSS y hacer efectos como el de añadir una imagen de fondo.
Véamoslas en acción. En el mismo archivo que habíamos creado anteriormente, escribimos lo siguiente entre las etiquetas <body> y </body>:
<p>Este es un ejemplo de salto de línea con la etiqueta BR.<br /> Como podemos observar, el salto de línea es sencillo.</p>
ahora añadamos una línea horizontal detrás del ejemplo: <hr />
y veamos un segundo ejemplo con la etiqueta <p> añadiendo:
<p> Este es un ejemplo de salto de línea entre párrafos.</p>
<p>Como podemos observar, el salto de línea entre párrafos es doble.</p>
añadamos otra línea horizontal para separar un tercer ejemplo: <hr />
y por último, veamos un ejemplo de cita:
<blockquote>To be or not be, <br /> that's the question</blockquote>
Si os dais cuenta, no ha hecho falta poner dos líneas en la cita para que así aparezca en pantalla. La etiqueta <br /> ya indica al navegador que hay un salto de línea detrás de ella.
Como siempre, es hora de guardar nuestro archivo con extensión .htm o .html y salir del editor de textos. Si abrimos nuestro archivo de nuevo desde el navegador, veremos que la separación entre párrafos usando la etiqueta <p> es mayor que si la realizáramos con la etiqueta <br />. Esto hace que mucha gente utilice erróneamente la etiqueta, y que para crear un espacio mayor entre líneas, por ejemplo para un espaciado triple, utilice la etiqueta <p>. Pero esa no es la función de esta etiqueta, y lo correcto sería utilizar la etiqueta <br /> repetidamente. No todos los navegadores funcionan igual, y aunque en nuestro navegador no tengamos problemas, si usamos de manera incorrecta las etiquetas, en otros muchos si que tendremos problemas. Por ello os recomiendo utilizar HTML correctamente.
Vamos a tomar como ejemplo el caso de crear un espaciado triple. Para ello, deberemos utilizar tres veces la etiqueta <br />, pero si la ponemos tal cual, solo se producirá un salto de línea, porque el navegador interpretará solamente una vez la instrucción. ¿Como solucionar esto? Pues añadiendo detrás una serie de letras que parecen no tener sentido: . En realidad, con este código creamos un espacio en blanco, algo como lo que hay entre estas comillas: ” “. Al “escribir” algo detrás de cada salto de línea, el navegador ya no ignora la repetición de etiquetas.
Así pues, vamos a hacer un espaciado triple. Detrás del texto que hemos escrito antes, añadimos:
<hr>
<p>Este es un ejemplo de salto de línea triple con la etiqueta BR.
<br />
<br />
<br />
Y conseguido, tenemos un espaciado triple.</p>
y tras guardar estas modificaciones, comprobamos en el navegador que efectivamente hemos creado un espaciado triple.
Bueno, creo que con estos ejemplos podemos entender mejor cómo un navegador interpreta el código HTML para crear los saltos de línea y el espaciado de párrafos. Alguna de las etiquetas que he nombrado en esta entrada, tienen atributos específicos. Por ello, les dedicaré su propio espacio mas adelante en esta sección.
