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.

Si quieres recibir artículos como este en tu móvil únete al Canal de Escape Digital en Telegram o en Twitter
FV

FV

Diseñador gráfico y web, con ganas de trabajar y aprender todo lo posible de este campo tan variado. Creativo tanto en la vida laboral como personal. Diseñar es el arte de transmitir gráficamente lo que uno imagina. Imagina, crea, diseña.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *