Cómo insertar una línea en HTML

En este tutorial básico te enseñaremos cómo insertar una línea en HTML. Nos referimos a poder insertar una línea horizontal separadora. Puedas usarla para separar secciones, de forma decorativa y más.

Etiqueta de una línea horizontal en HTML

La etiqueta para insertar una línea horizontal en HTML es <hr>. Esta etiqueta viene de las palabras en inglés “horizontal rule”. Su objetivo era poder separar secciones que tienen contenido diferente, por eso nos referimos a ella como línea separadora o línea horizontal. Esta es una etiqueta te puede recordar a la de salto de línea.

Un ejemplo de su uso es el siguiente:

<h2>Tutoriales de Photoshop</h2>
<p>En Regardis publicamos muchos tutoriales de Photoshop.</p>
<hr>
<h2>Tutoriales de HTML/CSS</h2>
<p>En Regardis publicamos tutoriales de HTML y CSS.</p>

La línea horizontal <hr> por default es usualmente de color negro y usa todo el ancho de su contenedor. Sin embargo, podemos usar estilos de CSS para obtener líneas que se adecuen a tu gusto.

Ejemplos de líneas con estilos de CSS

La etiqueta <hr> es una línea y con CSS podemos cambiar varios estilos como: ancho, altura, borde, color, entre otros. A continuación, te mostramos algunos ejemplos.

Línea horizontal con ancho definido

<hr style="width:35px;">

Línea horizontal con ancho y altura definida

<hr style="width:35px; height:10px;background:#000">

Línea horizontal punteada de color

<hr style="border:0px; border-top: 1px dotted red;">

Línea horizontal doble

<hr style="border:0px; border-top: 5px double #000;">

Te recomendamos jugar un poco aplicando distintos estilos CSS a tus líneas horizontales. Así te acostumbrarás poco a poco, y podrás crear otros estilos. Cuéntanos si tienes alguna pregunta en los comentarios.

Si te sirvió, ¡compártelo!

También te interesaría...

Suscríbete a nuestra lista de correo

Agregue un comentario

Su dirección de correo no se hará público.


Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.