Lineas de separación en HTML

Seguro que muchas veces has entrado en una web y has visto que se utilizan líneas para separar los párrafos de texto. Algunas veces no dejan de ser simples líneas de un color uniforme, normalmente gris, pero otras veces llegan a ser verdaderas obras de arte.

Para poder ponerlas en nuestra web no hace falta que utilicemos imágenes pre-diseñadas por algún software gráfico. Tenemos una forma más sencilla para llevarlo a cabo.

La etiqueta HR

Para poder hacer esto el lenguaje HTML nos proporciona la etiqueta HR. El mero hecho de poner esta etiqueta en una página hace que ya nos aparezca una línea de separación entre párrafos.

Veamos como sería una página HTML utilizando esto:

<html>
<body>

Texto del párrafo uno
<hr></hr>
Texto del párrafo dos

</body>
</html>

Si lo cargamos en nuestro navegador veremos que aparece una línea entre los dos párrafos. Esta línea ocupa, normalmente, de un lado a otro de la página.

Personalizar con CSS

Si queremos modificar las propiedades de la línea de separación HR el lenguaje HTML nos daba (y digo daba) un conjunto de atributos: width, noshade, size… Pero todos ellos han quedado obsoletos dentro de la especificación.

Ahora, para modificar su visualización, deberemos de utilizar las hojas de estilo CSS. Pero esto lo dejaremos para otro día…

Víctor Cuervo

Programador, Arquitecto IT, álter ego de Línea de Código, amante de las tecnologías, generador de conocimiento y facilitador del aprendizaje.

Descarga el código de Lineas de separación en HTML

Se explica cómo crear líneas de separación en HTML utilizando la etiqueta HR y la importancia de CSS para su estilo.

Descargar código