Hoy vamos a hablar un poco de cómo debe estar diseñado el texto de tu página web. Como usuario activo de Internet, seguramente estás buscando información y a menudo te encuentras con sitios en los que la información se presenta de esta forma:
Por no hablar de que no hay subrayados (lo principal del texto), ni negrita ni saltos de línea. El texto puede ser correcto en cuanto a ortografía y su temática, pero visualmente es incómodo.
¿Estás de acuerdo en que la siguiente vista es mucho más legible y no “asusta” a los usuarios?:
Tanto si tu sitio es comercial como si es un blog normal y corriente, hay que tener en cuenta todos estos matices. Por eso hoy voy a mostrarte tres formas diferentes de hacer saltos de líneas en párrafos dentro de tu código HTML.
En aras de la claridad, tomaremos de muestra el texto “Lorem Ipsum”, muy popular entre diseñadores y programadores, y algunos párrafos del mismo, para ser exactos:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet imperdiet urna vehicula elementum. Sed scelerisque luctus nisi, quis lacinia augue rutrum sit amet. Nullam vel erat quis urna tristique eleifend. Donec finibus eros in dui ornare, ut efficitur ante elementum.
Mauris est lorem, blandit nec turpis et, elementum imperdiet diam. Quisque eu pulvinar ipsum. Vivamus sit amet tortor a orci commodo convallis eget ac arcu.
Nulla lacinia augue orci, nec consequat eros viverra sit amet. Phasellus scelerisque, arcu eget hendrerit fringilla, elit urna commodo ante, a semper elit diam ut felis.Saltos de Línea en HTML con Etiqueta <br>
Así pues, la etiqueta <br> es la más popular y, al mismo tiempo, la creada especialmente para los saltos de línea en el texto:
<br />También puedes haber visto esta etiqueta sin la barra (slash) al final:
<br>Ambas cumplen su función por igual, sólo que la primera es la versión correcta (*válida) según la especificación XHTML 1.0 (las etiquetas que no tienen cierre deben contener una barra al final).
*Si bien XHTML requiere el cierre de la etiqueta, es un tema de XHTML. Si estás escribiendo HTML, puedes permitirte usar solo <br>.
Ejemplo de uso:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet imperdiet urna vehicula elementum. Sed scelerisque luctus nisi, quis lacinia augue rutrum sit amet. Nullam vel erat quis urna tristique eleifend. Donec finibus eros in dui ornare, ut efficitur ante elementum.
<br>
Mauris est lorem, blandit nec turpis et, elementum imperdiet diam. Quisque eu pulvinar ipsum. Vivamus sit amet tortor a orci commodo convallis eget ac arcu.
<br>
Nulla lacinia augue orci, nec consequat eros viverra sit amet. Phasellus scelerisque, arcu eget hendrerit fringilla, elit urna commodo ante, a semper elit diam ut felis.Puedes utilizarla tantas veces como quieras. Un uso es un salto de línea, por lo que dos de estas etiquetas seguidas duplicarán el salto de línea.
Nota
(de la que hablaremos más adelante).
Ten en cuenta que si quieres dejar un gran espacio entre dos líneas, utilizar la etiqueta <br> no es la mejor solución. El objetivo de la etiqueta es deslizar la línea, no sangrarla. Un número aceptable de etiquetas consecutivas es 1-2.
Dividir Texto en HTML en Párrafos con Etiqueta <p>
Como puedes ver por el subtítulo, los párrafos son un concepto en HTML (y no sólo). Existe una etiqueta de tipo especial para ellos: <p>
<p></p>Todo el texto encerrado en él se mueve a una nueva línea. Por defecto (si no hay estilos globales) tiene su propia sangría. El uso es el siguiente:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet imperdiet urna vehicula elementum. Sed scelerisque luctus nisi, quis lacinia augue rutrum sit amet. Nullam vel erat quis urna tristique eleifend. Donec finibus eros in dui ornare, ut efficitur ante elementum.</p>
<p>Mauris est lorem, blandit nec turpis et, elementum imperdiet diam. Quisque eu pulvinar ipsum. Vivamus sit amet tortor a orci commodo convallis eget ac arcu.</p>
<p>Nulla lacinia augue orci, nec consequat eros viverra sit amet. Phasellus scelerisque, arcu eget hendrerit fringilla, elit urna commodo ante, a semper elit diam ut felis.</p>
Lo que vale la pena señalar aquí es que el uso de una etiqueta de tipo vacío:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet imperdiet urna vehicula elementum. Sed scelerisque luctus nisi, quis lacinia augue rutrum sit amet. Nullam vel erat quis urna tristique eleifend. Donec finibus eros in dui ornare, ut efficitur ante elementum.</p>
<p></p> <!-- Vacío -->
<p>Mauris est lorem, blandit nec turpis et, elementum imperdiet diam. Quisque eu pulvinar ipsum. Vivamus sit amet tortor a orci commodo convallis eget ac arcu.</p>
Como puedes comprobar en la imagen de arriba, una etiqueta <p> vacía no producirá un salto línea. Sin embargo, con un pequeño truco en la etiqueta vacía todavía puedes conseguir una salto de línea extra:
<p> </p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet imperdiet urna vehicula elementum. Sed scelerisque luctus nisi, quis lacinia augue rutrum sit amet. Nullam vel erat quis urna tristique eleifend. Donec finibus eros in dui ornare, ut efficitur ante elementum.</p>
<p> </p> <!-- Etiqueta con código de espacio -->
<p>Mauris est lorem, blandit nec turpis et, elementum imperdiet diam. Quisque eu pulvinar ipsum. Vivamus sit amet tortor a orci commodo convallis eget ac arcu.</p>
Para establecer la sangría deseada entre párrafos, utiliza estilos globales:
p {
margin: 0;
padding: 0 0 10px 0; // relleno 10px desde abajo
}También puedes asignar a un párrafo un identificador propio, con el que podrás aplicar tu estilo personal:
<p class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet imperdiet urna vehicula elementum. Sed scelerisque luctus nisi, quis lacinia augue rutrum sit amet. Nullam vel erat quis urna tristique eleifend. Donec finibus eros in dui ornare, ut efficitur ante elementum.</p>
<style>
p.block {
margin: 0;
padding: 0 0 10px 0; // relleno 10px desde abajo
}
}
</style>Dividir Texto en HTML en Bloques con Etiqueta <div>
Esta variante es similar a la visualización de párrafos, sólo que en lugar de la etiqueta <p> se utiliza la etiqueta <div>.
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet imperdiet urna vehicula elementum. Sed scelerisque luctus nisi, quis lacinia augue rutrum sit amet. Nullam vel erat quis urna tristique eleifend. Donec finibus eros in dui ornare, ut efficitur ante elementum.</div>
<div>Mauris est lorem, blandit nec turpis et, elementum imperdiet diam. Quisque eu pulvinar ipsum. Vivamus sit amet tortor a orci commodo convallis eget ac arcu.</div>
<div>Nulla lacinia augue orci, nec consequat eros viverra sit amet. Phasellus scelerisque, arcu eget hendrerit fringilla, elit urna commodo ante, a semper elit diam ut felis.</div>
El principio es el mismo: cada bloque de texto envuelto en esta construcción comienza en una nueva línea. Una etiqueta vacía no proporciona una nueva línea adicional. En cuanto a la sangría, a diferencia de los párrafos, no hay sangría. Pero puedes ajustarla tú mismo mediante estilos globales:
div {
padding: 0 0 10px 0; // relleno 10px desde abajo
}o mediante un identificador de bloque independiente:
<div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet imperdiet urna vehicula elementum. Sed scelerisque luctus nisi, quis lacinia augue rutrum sit amet. Nullam vel erat quis urna tristique eleifend. Donec finibus eros in dui ornare, ut efficitur ante elementum.</div>
<style>
div.block {
margin: 0;
padding: 0 0 30px 0; // relleno 30px desde abajo
}
</style>
La etiqueta <div>, al igual que la etiqueta <p>, admite el atributo “align“, así como un atributo “title” para indicar la información sobre herramientas al pasar el ratón por encima:
<div class="block" title="Texto sugerido">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet imperdiet urna vehicula elementum. Sed scelerisque luctus nisi, quis lacinia augue rutrum sit amet. Nullam vel erat quis urna tristique eleifend. Donec finibus eros in dui ornare, ut efficitur ante elementum.</div>Todas las opciones anteriores son las formas más populares de hacer saltos de líneas en tu texto usando HTML.
