Tag hr HTML Línea Horizontal - Atributos y estilos

La etiqueta hr nos permite generar una separación entre secciones de contenido. Se puede combinar con otros tags como encabezados h1- h6 y párrafos p.

Tag hr HTML Línea Horizontal - Atributos y estilos | Aprender HTML | La etiqueta hr nos permite generar una separación entre secciones de contenido. Se puede combinar con otros tags como encabezados h1- h6 y párrafos p
COMPÁRTELO:

Cuando en una página tenemos mucho texto es conveniente, de cara a la presentación, separar de forma clara y visible. Para ello, la solución más simple, aunque sumamente eficaz, es el uso de las líneas horizontales entre los distintos bloques de contenidos, así como lo hace la agencia Dónde Está Mi Web.

Para generar una línea empleamos el tag <hr>. Las letras hr son el acrónimo de horizontal rule (línea horizontal). Vamos a ver un código de ejemplo, que grabemos con el nombre lineas_1.html

<html>
                <head>
                               <title>
                               L&iacute;neas horizontales
                             </title>
                </head>
           <body>
               <p>
                              Esto es un p &aacute;rrafo de texto
                <p>
                <hr>
               <p>
                               Esto es otro p &aacuterrafo.
                </p>
                </body>
</html>

El código mostrará la página en la siguiente figura:

html

Como ve, hemos trazado una línea divisora entre ambos párrafos. Esta línea cubre todo el ancho del área de navegación, de lado a lado. (excepto los márgenes por defecto de los que hablamos antes en este mismo capítulo). Éste es el comportamiento por defecto de este tag, pero eso podemos modificarlo, si nos conviene. Este tag puede recibir el atributo width, que permite especificar la anchura que va a cubrir la línea. Esta anchura se puede especificar en un valor absoluto, dándole un número de pixeles, o en un valor relativo, indicando qué porcentaje del área de navegación cubrirá la línea.

Vamos a ver un ejemplo de ambos, para aclara este concepto. En primer lugar, teclee el código que aparece a continuación y grábelo como líneas_2.htm.

<html>
                <head>
                               <title>
                               L&iacute;neas horizontales
                            </title>
               </head>
             <body>
                <p>
                               Esto es un p &aacute;rrafo de texto
                <p>
                <hr width=400>
            <p>
                               Esto es otro p &aacute;rrafo.
             </p>
               </body>
</html>

Fíjese en el resultado de este código como se ve en la figura:

html

La línea tiene ahora 400 pixeles de largo (cubre una anchura de 400 pixeles). Observe que, si cambia el tiempo de ejecución el tamaño de la ventana del navegador, la línea no varía del tamaño: sigue teniendo 400 pixeles. Ahora mire esta variante del código, que grabaremos como líneas_3.htm.

<html>
                <head>
                               <title>
                               L&iacute;neas horizontale
                               </title>
               </head>
                            <body>
                             <p>
                                               Esto es un p &aacute;rrafo de texto 
                              <p>
                             <hr width=50%>
                          <p>
                                              Esto es otro p &aacute;rrafo.
                             </p>
         </body>
</html>

Observe que el resultado es parecido al caso anterior, pero en esta ocasión el tamaño es un porcentaje del ancho de la ventana, de forma que, si varía la anchura de la ventana durante la ejecución, también cambia el tamaño de la línea, para tener siempre el porcentaje indicado. A este respecto (y ya para que lo sepa en el futuro) le comento que si tiene en su monitor una resolución de 800 x 600 píxeles (resolución muy habitual hoy en día), el tamaño del área de navegación, con la ventana del navegador maximizada es de 760 x 420 píxeles. Si la resolución de su monitor es de 1024 x 768 el tamaño del área de navegación es de 955 x 600 píxeles.  Ahora, puede no parecer importante esto, pero cuando usemos otros elementos en nuestra página será vital tener en cuenta estos tamaños para lograr un buen diseño.

Fíjese en una cosa: así como el texto se alinea, por defecto, a la izquierda de la página, las líneas horizontales toman, por defecto la alineación centrada. Esto también podemos modificarlo, usando, para ello, el atributo align, que podrá recibir los valores “left", “center" (defectivo) o “right". Observe el siguiente código, que grabaremos como lineas_4.htm.

<html>
               <head>
                             <title>
                            L&iacute;neas horizontales
                            </title>
               </head>
            <body>
                              <p>
                                             Esto es un p &aacute;rrafo de texto
                              <p>
                          <hr width=50%  align="right">
                            <p>
                                          Esto es otro p &aacute;rrafo
                             </p>
             </body>
</html>

El resultado de éste código es similar a los anteriores, pero con la línea colocada a la derecha de la página, tal como muestra la figura:

html

Además de todo esto, también podemos controlar el espesor de la línea. Para ello, emplearemos el atributo size. Al contrario de lo que ocurriría con width, al atributo size, sólo puede recibir el valor absoluto, en píxeles, y no como un porcentaje de nada. Observe el siguiente código, que grabaremos como líneas_5.htm.

<html>
                <head>
                             <title>
                              L&iacute:neas horizontales
                             </title>
           </head>
           <body>
                          <p>
                                            Esto es un p &aacute;rrafo de texto
                             <p>
                           <hr width=50%  align="right" size=20>
                        <p>
                                             Esto es otro p &aacuterrafo.
                         </p>
       </body>
</html>

Este código genera una página como se muestra a continuación:

html

En ella, puede apreciar el efecto de transparencia de la barra horizontal. No se trata de un efecto muy ortodoxo (no era la idea cuando se creó este tag), pero puede resultar interesante en un momento dado. En seguida aprenderemos a dar color a la barra.

Cómo ve la línea tiene ahora un espesor de 20 píxeles. Además la línea es transparente, es decir, adopta el color de fondo; esto lo puede verificar cambiando el color de fondo. El valor máximo que le podemos pasar al atributo size es 100, es decir, para lograr una línea con un espesor de 100 píxeles (que ya está bien). Si no quiere que la línea sea transparente, sino opaca, añade el atributo noshade, con el valor “noshade". El código aparece a continuación, lo grabaremos como líneas_6.htm.

<html>
                <head>
                               <title>
                               L&iacute;neas horizontales
                               </title>
                </head>
         <body>
                               <p>
                                               Esto es un p&aacute;rrafo de texto
                               <p>
                               <hr width=50%  align="right"  size=10   noshade="noshade">
                               <p>
                                               Esto es otro p&aacute;rrafo.
                               </p>
                </body>
</html>

El resultado lo ve en la siguiente figura:

html

Como puede apreciar, lo que hemos hecho es que la línea aparezca sombreada en gris obscuro. El gris es un color al que se acostumbrará pronto, ya que es muy socorrido en muchos casos (textos de menor importancia, algunas líneas etc.).

Además podemos cambiar el color de la línea, mediante el atributo color. Este atributo puede recibir el valor que indique el color cualquiera de las dos formas que conocemos: mediante el nombre, en ingles, del color o mediante su código hexadecimal. Lo vemos en el siguiente código, que llamaremos lineas_7.hmt.

<html>
                <head>
                               <title>
                               L&iacuteneas horizontales
                              </title>
             </head>
               <body>
                              <p>
                                             Esto es un p&aacuterrafo de texto
                              <p>
                          <hr width=50%  align="right"  size=20 color="#FF0000">
                            <p>
                                         Esto es otro p&aacuterrafo.
                            </p>
              </body>
</html>

El resultado de este código es la página que puede ver en la figura siguiente:

html

Observe como la línea sale en color rojo. Cuando le damos a la línea un color, es indiferente que usemos el sombreado (noshade) o que no lo usemos. La línea es de ese color sin más.

Tag hr HTML Línea Horizontal - Atributos y estilos

La etiqueta hr nos permite generar una separación entre secciones de contenido. Se puede combinar con otros tags como encabezados h1- h6 y párrafos p
🤖

ChatGPT Gratis
Realiza preguntas sobre cualquier tema

¡Participa!

¡Compártelo en tus Redes Sociales!
Compartir en:

CITAR ARTÍCULO


Para tareas, investigaciones, tesis, libros, revistas, blogs ó artículos académicos

Referencia en Formato APA:

Delgado, Hugo. (2013).
Tag hr HTML Línea Horizontal - Atributos y estilos.
Recuperado 10 de December, 2024, de
https://disenowebakus.net/domine-html-y-dhtml-separar-bloques-de-texto.php

Profesor en la Universidad de Guadalajara

Hugo Delgado Desarrollador y Diseñador Web en Puerto Vallarta

Profesional en Desarrollo Web y Posicionamiento SEO desde hace más de 15 años continuos.
Contamos con más de 200 constancias y reconocimientos en la trayectoria Académica y Profesional, incluidos diplomados certificados por Google.

CONTINÚA APRENDIENDO

Menú categoría


Aprender HTML

TAMBIÉN MERECE LA PENA VISITAR:

Temas relacionados - Tags

Efectos HTML Texto en la Web HTML

¿Todavía no encuentras lo que necesitas?

Usa nuestro buscador interno para descubrir más información
Contenido relacionado:

2 Comentarios en "Tag hr HTML Línea Horizontal - Atributos y estilos"

  1. Avatar usuario
    Jose Carlos

    Muchas gracias, Me ha sido de mucha utilidad.

  2. Avatar usuario
    Jose

    Cuando le damos a la lí­nea un color, es indiferente que usemos el sombreado (noshade) o que no lo usemos. La lí­nea es de ese color sin más.

 

Deja tu Comentario

PATROCINADOR

Tu negocio también puede aparecer aquí. Más información
Anunciate aquí

Tu navegador ha bloqueado la publicidad.
Por favor 🙏 permite visualizar los anuncios para poder acceder, gracias.