Saltos de línea con la etiqueta break y control de espacios con nonbreaking space

Logo de html 5

También puedes mirar el video en Youtube de este ejercicio.

Cuando utilizamos las etiquetas de formato básico de html (mencionadas en el artículo anterior) al terminar con una etiqueta y comenzar con otra, visualmente nos dará un salto doble de línea. Por ejemplo, el siguiente código:

<p>Primer Párrafo</p>
<p>Segundo Párrafo</p>

Nos dará como resultado en el navegador:

Vista de dos párrafos en el navegador.

Una etiqueta que no cierra

Para que eso no ocurra se puede utilizar la etiqueta <br/>. Nuestro código quedaría de la siguiente forma:

<p>Primer Párrafo<br/>
Segundo Párrafo</p>

Y en el navegador se mostraría:

Dos renglones usando la etiqueta break

Un <br/> es de esas pocas etiquetas que no llevan la parte de cierre. Sería incorrecto escribir:

<br>Mi texto</br>

¿La razón de esto? No es un elemento que contenga información, simplemente es una indicación. Por ello, se recomienda que se escriba <br/> para establecer su término (y que el documento se procese bien como XML). Sin embargo, la mayoría de los navegadores no tienen problema en entenderla si simplemente se escribe <br>.




Separación extra entre palabras y caracteres.

Dentro del código de html, cuando queremos que exista un espacio entre una letra y otra, o una palabra con otra, no hay problema. Sin embargo, muchas veces queremos hacer un ajuste visual para que exista más separación (para hacer tabulación, por ejemplo). En esos casos, por más espacios que se deseen poner, no habrá diferencia:

Esta larga                     separación no funciona.

Dará como resultado:

Fallida separación de palabras

Y la razón por la que no funciona es que toda indicación de formato debe tener una representación. Vaya, debe haber algún código que lo represente, así como <br> indica salto y no simplemente con apretar la tecla de “Enter”. Entonces, para que existan más espacios, la indicación correspondiente es &nbsp; (non breaking space) por cada espacio. Corrigiendo el código anterior:

Esta larga &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;separación funciona.

Ya nos arrojaría más separaciones:

Resultado del non breaking space

Recomendaciones.

Tanto <br/> como &nbsp; son maneras de darle formato al código. Sin embargo, se recomendará que por el uso de css se resuelvan esas situaciones, ya que permitirán un mejor control. Por ejemplo, si quiero más saltos de línea, podría usar varias veces <br/>, pero esto siempre estaría regido por el tamaño de la fuente del navegador. En cambio, por estilos puedo determinar si la separación es por pixeles, centímetros, pulgadas u otra unidad. Por lo tanto, su uso debe ser moderado. La regla sería que si se utiliza más de un <br/> seguido o más de un &nbsp; seguido, está mal porque habría una mejor manera de realizarlo.

También puedes mirar el video en Youtube de este ejercicio.

Be the first to comment

Leave a Reply

Your email address will not be published.


*