Etiqueta hr en HTML

¿Qué es la etiqueta <hr> en HTML?

La etiqueta <hr> en HTML es un elemento utilizado para crear una línea horizontal en un documento web. Esta etiqueta se utiliza comúnmente para separar diferentes secciones de contenido dentro de una página web.

La línea horizontal se dibuja de manera que abarque el ancho completo del contenedor en el que se encuentre la etiqueta <hr>. La etiqueta <hr> es un elemento de bloque y, por lo tanto, crea una nueva línea después de su uso.

Ejemplo de uso

Aquí tienes un ejemplo simple de cómo utilizar la etiqueta <hr> en HTML5:


<!DOCTYPE html>
<html>
  <head>
    <title>Ejemplo de la etiqueta HR en HTML5</title>
  </head>
  <body>
    <h1>Sección 1</h1>
    <p>Contenido de la sección 1</p>

    <hr>

    <h1>Sección 2</h1>
    <p>Contenido de la sección 2</p>

    <hr>

    <h1>Sección 3</h1>
    <p>Contenido de la sección 3</p>
  </body>
</html>


Lenguaje del código: HTML, XML (xml)

En este ejemplo, hemos utilizado la etiqueta <hr> para separar las tres secciones diferentes de contenido en la página web.

Cada vez que se utiliza la etiqueta <hr>, se dibuja una línea horizontal que abarca el ancho completo del contenedor en el que se encuentre.

Atributos

La etiqueta <hr> en HTML5 no tiene atributos específicos, pero su apariencia puede ser modificada mediante CSS.

Algunos de los estilos comúnmente utilizados con la etiqueta <hr> incluyen el ancho, el color, la altura y el margen.

Aquí hay un ejemplo de cómo aplicar algunos estilos a la etiqueta <hr> utilizando CSS:


<!DOCTYPE html>
<html>
  <head>
    <style>
      hr {
        width: 50%;
        height: 2px;
        background-color: gray;
        margin: 20px auto;
      }
    </style>
  </head>
  <body>
    <h1>Sección 1</h1>
    <p>Contenido de la sección 1</p>

    <hr>

    <h1>Sección 2</h1>
    <p>Contenido de la sección 2</p>

    <hr>

    <h1>Sección 3</h1>
    <p>Contenido de la sección 3</p>
  </body>
</html>


Lenguaje del código: HTML, XML (xml)

En este ejemplo, hemos definido un estilo CSS para la etiqueta <hr> que establece el ancho en 50% del ancho del contenedor, la altura en 2 pixels, el color de fondo en gris y el margen en 20 pixels arriba y abajo con alineación automática.

Estos estilos se aplicarán a todas las etiquetas <hr> en la página web.

Más ejemplos

Aquí hay tres ejemplos de cómo utilizar la etiqueta <hr> en HTML5:

  1. Separación de secciones:

<!DOCTYPE html>
<html>
  <head>
    <title>Ejemplo de la etiqueta HR en HTML5</title>
  </head>
  <body>
    <h1>Sección 1</h1>
    <p>Contenido de la sección 1</p>

    <hr>

    <h1>Sección 2</h1>
    <p>Contenido de la sección 2</p>

    <hr>

    <h1>Sección 3</h1>
    <p>Contenido de la sección 3</p>
  </body>
</html>


Lenguaje del código: HTML, XML (xml)

En este ejemplo, hemos utilizado la etiqueta <hr> para separar tres secciones diferentes de contenido en la página web.

  1. Separación de temas en una lista:

<!DOCTYPE html>
<html>
  <head>
    <title>Ejemplo de la etiqueta HR en HTML5</title>
  </head>
  <body>
    <h1>Lista de temas</h1>
    <ul>
      <li>Tema 1</li>
      <li>Tema 2</li>

      <hr>

      <li>Tema 3</li>
      <li>Tema 4</li>
    </ul>
  </body>
</html>


Lenguaje del código: HTML, XML (xml)

En este ejemplo, hemos utilizado la etiqueta <hr> para separar dos grupos diferentes de temas en una lista.

  1. Separación de comentarios en un foro:

<!DOCTYPE html>
<html>
  <head>
    <title>Ejemplo de la etiqueta HR en HTML5</title>
  </head>
  <body>
    <h1>Foro de discusión</h1>
    <div>
      <h2>Comentario 1</h2>
      <p>Contenido del comentario 1</p>
    </div>

    <hr>

    <div>
      <h2>Comentario 2</h2>
      <p>Contenido del comentario 2</p>
    </div>

    <hr>

    <div>
      <h2>Comentario 3</h2>
      <p>Contenido del comentario 3</p>
    </div>
  </body>
</html>


Lenguaje del código: HTML, XML (xml)

En este ejemplo, hemos utilizado la etiqueta <hr> para separar cada uno de los comentarios en un foro de discusión.

Otros ejemplos

Algunos de los ejemplos de la etiqueta <hr> de HTML5 con CSS.

Ejemplo 1: Alineación de un elemento <hr> con CSS.


<hr style="ancho: 50%; alineación-texto: izquierda; margen-izquierdo: 0">


Lenguaje del código: HTML, XML (xml)

Ejemplo 2: Ajuste de la altura de un elemento <hr> con CSS.


<hr style="alto:30px">


Lenguaje del código: HTML, XML (xml)

Ejemplo 3: Ajuste del ancho de un elemento <hr> con CSS,


<hr style="ancho:50%">


Lenguaje del código: HTML, XML (xml)

Ejemplo 4: Un sombreado <hr> con CSS.


<hr style="alto:2px; margen-ancho:0; color:gris; fondo-color:gris">


Lenguaje del código: HTML, XML (xml)