Formato línea o separador horizontal en HTML: hr

En HTML para crear una linea horizontal utilizamos

<hr />

Si queremos dar color a la línea horizontal lo hacemos así:

<hr style="color: #0056b2;" />

Si queremos variar el grosor de la línea, pondremos: «size=x», siendo «x» el número de grosor, por ejemplo:

<hr size="10" />

Si queremos variar lo que ocupa de ancho la línea horizontal usaremos: «width=x %», siendo «x» el tanto por cien que ocupa la línea:

<hr width="75%" />

Si queremos quitar la sombra a la línea horizonal

<hr noshade="noshade" />

Para alinear la linea a la izquierda, derecha o centro utilizamos «align». «align = center» para el centro, «align = right» para la derecha y «align = left» para la izquierda. Por ejemplo:

<hr align="left" noshade="noshade" size="2" width="80%" />

Publicado por

victor

Hola!. Me llamo Víctor y soy Ingeniero Agrónomo de formación y programador web de profesión (desde el año 2006). Por otra parte me gusta, entre otras aficiones, el senderismo, jugar al futbol y al FIFA en la PS4. Te animo a participar en mi web www.biolucas.com

40 comentarios en «Formato línea o separador horizontal en HTML: hr»

  1. Hola buenas tardes! Estoy trabajando en una aplicación web en el cual le agrego, a través de un archivo aparte un ‘footer’, el cual contiene un pequeño texto de descripción y enlaces de redirección a un sitio web. mi problema surge cuando quiero hacer una división con una línea entre el archivo principal y el archivo que contiene el footer, la línea aparece pero está en medio de un espacio en blanco, tanto arriba como abajo. estuve leyendo al respecto pero no pude llegar a una solución aún. Agradecería si podría ayudarme…

  2. Gracias tus respuestas nos han permitido solucionar de maneras diferentes, en Joomla la linea Horizontal aparece blanca, le cambiamos con codigo y sigue apareciendo blanca en el modulo Sp Simple Portfolio, sabes que puedes estar pasando? Gracias.

    1. Hola, gracias por escribir. Con ese módulo no tengo experiencia, de todas formas lo publico por si alguien te puede ayudar.
      Un saludo, Víctor

  3. Hola 👋
    Me gustaría saber si sabes de geografía, es que necesito saber cual es la línea separadora en la tierra 🌏. A, y también características del clima de montaña 🗻.
    Gracias, y espero que estés bien.

    Un saludo. Un abrazo. Besos.

    1. Hola Vicky muchas gracias por participar. La verdad hace tiempo que no lo repaso y te lo voy a decir de cabeza y lo mismo está mal. La tierra se puede dividir de diversas formas, en horizontal y vertical, si es en horizontal son las latitudes entre las que tenemos tenemos la línea del ecuador, la línea de los trópicos de cáncer y capricornio, etc. y si es en vertical tenemos los meridianos o las longitudes creo que se divide en 24 partes (no estoy seguro) siendo la longitud 0 el meridiano de Greenwich, como horas solares hay aunque no se correspondan con las horas reales de los países . Respecto al clima de montaña es independiente de la latitud, ya sabes que un factor que afecta al clima es la latitud, ya que generalmente en el ecuador llueve más con temperaturas medias o altas, en los trópicos hay clima desertico, a unos 40º hay climas templados y mediterráneos y en latitudes más altas aumenta el frío. Y te voy a copiar de la Wikipedia lo siguiente: «El clima de montaña es propio de las zonas situadas a más de 1200 metros de altitud.Se caracteriza por unos inviernos fríos y largos con temperaturas negativas, y veranos frescos y cortos. Tiene una oscilación térmica de 10,5 ºC. Las precipitaciones son muy escasas en forma de lluvia en primavera ,verano , de nieve en invierno y otoño. Es una variante del clima de la tundra, aunque más suave.».
      Espero que te sirva, si necesitas más ayuda avísame aunque internet tiene toda la info.
      Saludos, Víctor

  4. Hola, buenas tardes.
    la presente es para solicitar su valiosa ayuda, necesitamos averiguar como colocar una imagen tipo pie de página, que siempre se mantenga al final de la página.
    Gracias por su tiempo, esperamos su pronta respuesta.

  5. Buenas noches. Gracias por el tutorial, me interesa mucho, pero no quiero que la línea quede como separador, sino que la necesito en la mitad de dos figuras, como uniéndolas (un árbol genealógico). Cómo puedo lograrlo? Muchas gracias!

  6. Buenos días,

    Estoy intentando hacer la linea en rojo y vertical y el color no me cambia ( siguiendo las instrucciones de arriba) y no consigo que sea vertical. Sería para una linea al lado del menú horizontal.

    Muchisimas gracias

    Enhorabuena por el blog

    1. Hola Lara, muchas gracias por participar. Si es una línea vertical tiene pinta del borde de un div o algo así. Puedes poner la web y lo vemos. Saludos!

    1. Hola Pedro, he estado trasteando y he encontrado varias respuestas apropiadas buscando «Menú con pestañas con JQuery». La explicación es que tu tienes todos los div con su streaming pero oculto, según das a una pestaña o a otra se muestra el div.

      Espero que te sirva, saludos!

  7. Hola que tal un salu2, tu post me ha servido michisisimo muchas gracias pero te queria decirsi me puedes explicar como hacer este tipo de cuadro http://adictoxwwe.net/# si entras a esa web veras un cuadro donde pone streamings al lado hay cuadritos pequeños que son repeticiones y si le das click a uno se abre en el cuadro negro igual que los canales de arriba me podrias decir como se hace ese tipo de cuadro gracias

    1. Hola Pedro, gracias por contactar con nosotros. Con la web tenemos un problema ya que no carga bien, no se si tienes otra ruta.

      Saludos!

  8. Buenas tardes, estoy luchando con una html al cual le intento sacar unas lineas blancas verticales.
    http://contebienesraices.com.ar/sanct.html
    Es una imagen que genere con photoshop donde setie ciertas áreas para asignarle unos links y lo guarde como html, lo estoy subiendo con dreamweaver. Se que es algo de principiante y seguramente es fácil de solucionar, peor llevo horas sin poder solucionarlo.
    Lo raro es que en ie se ve bien y en la previsualizacion del dreamweaver tb se ve bien. Pero en lo otros navegadores se ven estas malditas lineas blancas.
    Espero que me puedas ayudar.

    Desde ya muchas gracias.

    1. Hola Orlando, gracias por participar en el blog. La verdad yo no veo los hipervínculos que estarían sobre la imagen y las líneas blancas. Lo he revisado con Chrome, IE y Firefox. Quizás deberías utilizar CSS para ocultarlas de la vista, como con visibility: hidden;

      Coméntame si te ha servido o necesitas ayuda.

      Un saludo, Víctor

  9. como puedo hacer las lineas que se encuentran a la derecha de tu pagina , ósea las lineas delgadas debajo de las lineas mas gruesas rojas , gracias

    1. Buenas Christian, muchas gracias por contactar. Creo que te refieres a las líneas finas debajo de Comentarios recientes. Si activas en Chrome «inspeccionar elemento» y te sitúas encima veras que se está utilizando border-top: 1px solid #cdcdcd; de tal forma que si lo desactivas verás que desaparecen, ya que en cada li crea un borde superior sólido de 1px y con el color #cdcdcd. Confírmame si era está tu duda. Saludos!

  10. Que tal?. Tengo un problema, utilizando Mozzilla no aparecen los separadores, sin embargo, si visualizo la pagina en Chrome si. Que puede ser?

      1. Hola Matias, gracias por participar. Mira a ver si es eso. De todas formas a veces dan problemas los navegadores, aunque hr es bastante común y no debería dar problemas de compatibilidad. Un saludo, Víctor

  11. Buenos días. Estoy intentando crear una línea continua que contenga texto intercalado ——–hola——–
    Algo así pero con las líneas continuas y no discontinuas. ¿Sabéis cómo lo puedo hacer? Muchas gracias. Belén

    1. Hola Belén, muchas gracias por participar. Algo así te debería servir. Coméntame si te funcionó. Saludos!:

      <div style="height: 1px; background-color: black; text-align: center">
        <span style="background-color: white; position: relative; top: -0.5em;">
          hola
        </span>
      </div>
      
  12. HOLA BUENAS NOCHES, ESTOY HACIENDO UN TRIQUI, Y NECESITO TRAZAR LA LINEA HORIZONTAL QUE FORMA EL TRIQUI OSEA QUE GANÉ PERO NO HE PODIDO… ME DIJERON QUE ES CON PERO NO SE COMO HACERLO

    1. Hola Lina, muchas gracias por participar, ¿qué es un triqui?. Si me pones la dirección con una imagen de un triqui te podremos ayudar entre todos.

      Un saludo, Víctor

  13. Hola Victor,

    Me gustaria saber como hacer para alinear el texto con los separadores horizontales; me explico: quiero dejar el separador centrado, y con un width de 50%, hasta ahi puedo solo (gracias a tu explicacion). El problema es que quiero dejar el texto alineado a la izquierda de donde comienza el separador (algo asi como has hecho en los ejemplos) , y no se como hacerlo. Si pudieras darme una mano, te lo agradeceria hasta el infinito y mas alla

    1. Hola Hec, perdona el tiempo de demora en responderte. Antes de nada muchas gracias por colaborar en el blog.
      Para resolverlo he colocado primero el hr alineado a la derecha al 50% por ejemplo y más abajo un div con margin-left del 50% y un width del 50% también. Quedaría algo así:

      <hr align="right" noshade="noshade" size="1" width="50%" />
      <div style="margin-left:50%;width:50%";>
      Línea 1<br />
      Línea 2<br />
      Línea 3
      </div>
      

      Un saludo, Víctor

  14. Hola Victor,

    Yo tambien de formación ingería agrícola y acabo de empezar con el html. Tu explicación de línea horizontal me ha venido genial.

    1. Hola Isabel, muchas gracias por participar en el blog y me alegra mucho que te haya servido ;D. Veo que estás haciendo la misma transición que yo, de ingeniería agrícola a páginas web, ya verás que es una profesión que te puede dar muchas alegrías y algún que otro quebradero de cabeza. Si tienes cualquier cuestión no dudes en preguntarla.

      Saludos, Víctor

      1. HOLA BUENAS NOCHES, ESTOY HACIENDO UN TRIQUI Y NECESITO TRAZAR LA LINEA HORIZONTAL, PARA FORMAR ESE TRIQUI PODRIA DECIRME CUAL ES EL CODIGO?

Deja una respuesta

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

CommentLuv badge