En este tutorial básico te enseñaremos cómo poner 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 poner 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.
¿Este contenido te fue útil? Invítame un cafecito y ayúdame seguir creando más contenido. ¡Gracias! ♥︎
Invítame un cafecito
para el weight recomiendo que sea adaptable y no px fijo. ej: weight: 80%;