Quizás debería haber hablado sobre los saltos de linea en HTML5, cuando vimos las primeras etiquetas en el post Etiquetas, atributos y valores-HTML5 y CSS3. Pero nunca es tarde si la dicha es buena, como se suele decir.
Ya estudiamos para que servia y como se usaba la etiqueta <p>. Dentro de ellas poníamos un texto y este, se "convertía" en un párrafo. ¿Y porque hablo de la etiqueta <p> si lo que queremos ver son los saltos de linea?. Sencillo, porque no quiero que te confundas ya que después de haber cerrado la etiqueta </p>, ya se produce un salto de línea.
Pero en HTML5, existe una etiqueta para provocar un salto de línea sin tener que esperar a cerrar el párrafo. Estoy hablando de la etiqueta <br> y es la encargada de definir los saltos de línea en HTML5. Esta es una etiqueta que no lleva su correspondiente etiqueta de cierre, y hace unos años se escribía con la barra al final de esta manera <br />. Hoy día no lleva barra y solo hace falta definirla de esta manera <br>. Una puntualización, en Blogger, cuando estas escribiendo un post en modo html sigue siendo <br />, un dato de poca importancia que creía que debía comentar.
Puedes usar los saltos de línea en HTML5 siempre que quieras que un elemento aparezca en la línea siguiente. Esto no solo ocurrirá dentro de los párrafos. Si por ejemplo tienes varios enlaces que te aparecen en la misma línea y deseas que aparezcan uno bajo el otro, puedes colocar la etiqueta <br> al final de cada uno de los códigos de los enlaces para conseguirlo.
Colocamos la etiqueta de salto de línea <br> tras los dos primeros enlaces, así:
<h1>Menú de Contenidos</h1> <a href="#titulouno" title="Ir al título uno">Ir al título uno</a><br> <a href="#titulodos" title="Ir al título dos">Ir al título dos</a><br> <a href="#titulotres" title="Ir al título tres">Ir al título tres</a> <h2>Título Uno</h2>Del mismo modo, si insertamos la etiqueta de salto de línea en medio del texto de un párrafo, provocaremos un salto de línea justo en esa parte, aunque el párrafo aún no haya terminado. También aparecen saltos cuando empiezas un título con <h1>,<h2>, etc.
Debes saber también que no aparecen saltos de linea automáticamente, cuando quieres insertar una imagen. Lo vemos en el siguiente ejemplo:
<img src="imagen1.png" alt="imagen-1"><br> <img src="imagen2.png" alt="imagen-2"><br> <img src="imagen3.png" alt="imagen-3">Creo que con esto está casi todo dicho sobres los saltos de linea en HTML5, o al menos por ahora y para seguir avanzando a buen ritmo no vas a necesitar saber más. Con estos dos sencillos ejemplos que hemos visto hoy debe haberte quedado claro. Si no es así también puedes pasarte por la comunidad de Facebook y preguntarnos las dudas que tengas al respecto.
0 Comentarios