Curso HTML: Separadores hr
El elemento hr representa una división temática o un quiebre en el texto. Este quiebre puede dividir al contenido en dos fragmentos con tópicos diferentes o dos escenas en una novela. Los navegadores habitualmente representan este quiebre visualmente, mediante una línea horizontal.
Para separar un texto de otro o un párrafo de otro podemos utilizar una línea horizontal de un tamaño o un grosor determinado por nosotros. Esa franja la escribimos con la etiqueta <hr>. La contrario que muchas etiquetas html, ésta no necesita ser cerrada. Sólo con escribir la etiqueta anterior ya la escribimos.
La etiqueta <hr>, como muchas otras etiquetas, puede variar de aspecto dependiendo de las reglas CSS que definamos.
Ahora, pongamos un quiebre entre dos párrafos pertenecientes a diferentes escenas de una novela.
<p>La pared estaba congelada y quemaba su oreja pero tenía que saberlo. Luego de unos cuantos minutos soportando el frío y un par de párpados pesados, Jhon se recostó en la cama y cayó inmediatamente en un pesado sueño.</p>
<hr>
<p>El vicecanciller abandonó su oficina apresuradamente. Estaba tenso y perturbado pero hizo un gran esfuerzo para intentar esconder su desesperación...</p>
La pared estaba congelada y quemaba su oreja pero tenía que saberlo. Luego de unos cuantos minutos soportando el frío y un par de párpados pesados, Jhon se recostó en la cama y cayó inmediatamente en un pesado sueño.
El vicecanciller abandonó su oficina apresuradamente. Estaba tenso y perturbado pero hizo un gran esfuerzo para intentar esconder su desesperación…
ALIGN
La alineación horizontal de la línea de quiebre. Existen tres valores posibles (insensibles a mayúsculas/minúsculas):
- left: la línea de quiebre se alinea a la margen izquierda.
- center: la línea de quiebre es centrada.
- right: la línea de quiebre se alinea a la margen derecha.
Ejemplo:
<hr align="left">
NOSHADE
Un valor booleano que indica si la línea debe ser plana o tener un estilo 3D. Si el atributo está presente, la línea será plana.
Ejemplo:
<hr noshade>
SIZE
Un número de píxeles para utilizar como la altura de la línea horizontal.
<hr size="3">
WIDTH
Un valor que indica el ancho de la línea, en píxeles o como un porcentaje relativo al espacio disponible horizontalmente.
<hr width="80%">
Ahora ya puedes personalizar tu separador a tu gusto.
Con la cantidad de opciones que has visto para adaptar el separador hr, seguro que encuentras alguna que te guste.
