Línea horizontal HTML con etiqueta hr
La línea horizontal HTML es una línea que divide el contenido de una página web en dos secciones. La etiqueta HTML <hr> correspondiente no requiere un elemento de cierre.
¿Qué es una línea horizontal HTML?
Una línea horizontal HTML se utiliza para dibujar una línea divisoria visible y continua entre dos párrafos u otras secciones significativas en un documento HTML. Se define con la etiqueta HTML <hr> y se utiliza para mejorar la estructura y legibilidad de una página web. La etiqueta<hr> no es solo una línea divisoria visual, sino que también tiene un significado semántico: el elemento indica que hay un cambio de tema o una ruptura temática.
La etiqueta HTML puede utilizarse teóricamente en cualquier lugar dentro del elemento body y no requiere un elemento de cierre. La abreviatura “hr” viene del inglés “horizontal ruler” (regla horizontal). HTML <hr> soporta todos los atributos HTML y es soportado por todos los navegadores comunes.
- Tiempo de actividad de 99.99 % y seguridad garantizada
- Aumenta el rendimiento según el tráfico de tu página web
- Incluye dominio, SSL, e-mail y soporte 24/7
HTML <hr>: sintaxis y ejemplo
La sintaxis de HTML <hr> es simple, ya que no necesita otros atributos o parámetros aparte de la etiqueta:
<hr>Podemos ilustrar el funcionamiento del elemento con un sencillo ejemplo de línea horizontal HTML. Para ello, tomamos un párrafo (<p>) y un texto citado (<blockquote>) y separamos las dos unidades de significado en nuestro documento HTML con una línea horizontal. El código apropiado es el siguiente:
<!DOCTYPE html>
<html>
<body>
<h1>Línea horizontal HTML</h1>
<p>HTML es el lenguaje de marcado estándar para los documentos que se van a mostrar en la web. Describe la estructura de una página web y permite definir el texto, las imágenes, los enlaces y otros elementos.</p> <p
<hr>
<blockquote>”HTML es fácil de aprender y proporciona una base sólida para crear páginas web”</blockquote
</body>
</html>
Personalizar el aspecto de la línea horizontal en HTML
Es posible personalizar el aspecto de una línea horizontal en HTML. Aunque antes se utilizaban para ello los atributos align, color, noshade, size y width, desde HTML5 ya no son compatibles. En su lugar, puedes utilizar el atributo CSS style.
Usa este código en lugar de align:
<!DOCTYPE html>
<html>
<body>
<h1>Línea horizontal HTML</h1>
<p>HTML es el lenguaje de marcado estándar para los documentos que se van a mostrar en la web. Describe la estructura de una página web y permite definir texto, imágenes, enlaces y otros elementos.</p> <p
<hr style=”width:50%;text-align:left;margin-left:0”>
<blockquote>”HTML es fácil de aprender y proporciona una base sólida para crear páginas web”</blockquote
</body>
</html>Puedes cambiar el color de la línea horizontal HTML con la propiedad color:
<!DOCTYPE html>
<html>
<body>
<h1>Línea horizontal HTML</h1>
<p>HTML es el lenguaje de marcado estándar para los documentos que se van a mostrar en la web. Describe la estructura de una página web y permite definir texto, imágenes, enlaces y otros elementos.</p> <p
<hr style="color:yellow;background-color:gray">
<blockquote>”HTML es fácil de aprender y proporciona una base sólida para crear páginas web”</blockquote
</body>
</html>En lugar de noshade, usa el siguiente código para incluir una línea horizontal sin sombra:
<!DOCTYPE html>
<html>
<body>
<p>Una línea horizontal normal:</p>
<hr>
<p>Con CSS:</p>
<hr style="height:2px;border-width:0;color:gray;background-color:gray">
</body>
</html>Cambia la altura con height:
<!DOCTYPE html>
<html>
<body>
<p>Una línea horizontal normal:</p>
<hr>
<p>Una línea horizontal con una altura de 50 píxeles:</p>
<hr style="height:50px">
</body>
</html>El ancho de la línea horizontal HTML se establece con el parámetro width:
<!DOCTYPE html>
<html>
<body>
<p>Una línea horizontal normal:</p>
<hr>
<p>Una línea horizontal con un 30 por ciento de ancho:</p>
<hr style="width:30%">
</body>
</html>- Certificado SSL Wildcard gratis
- Registro privado
- Función Domain Connect para una configuración DNS simplificada gratis