Cómo crear una línea horizontal en HTML

¿Estás aprendiendo HTML ? ¿Quieres añadir una línea horizontal a tu página web ? Una línea horizontal, también conocida como regla horizontal, se puede usar para separar bloques de texto u otro contenido en tu sitio web. Es muy fácil añadir una línea horizontal en HTML. También es posible darle estilo a la línea horizontal mediante CSS o atributos en línea de HTML. De esta forma, puedes cambiar el grosor, alineación o color de la línea. En este wikiHow, aprenderás a añadir y darle estilo a una línea horizontal en HTML y CSS. ^{[1]
X
Fuente de investigación}

Método 1

Método 1 de 2:

Usar CSS

Descargar el PDF

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1b\/658928-9-1.jpg\/v4-460px-658928-9-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1b\/658928-9-1.jpg\/v4-728px-658928-9-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

1
Abre o crea un nuevo documento de HTML. Los documentos de HTML pueden editarse mediante un editor de texto como el Bloc de Notas. Asimismo, puedes usar un editor de código como Adobe Dreamweaver o Visual Studio Code . Sigue estos pasos para abrir un documento de HTML en el programa que elijas:
- Abre el Bloc de Notas o el editor de texto o de código que elijas.
- Haz clic en el menú Archivo .
- Haz clic en Abrir .
- Selecciona un archivo HTML.
- Haz clic en Abrir .
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f5\/658928-2-2.jpg\/v4-460px-658928-2-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f5\/658928-2-2.jpg\/v4-728px-658928-2-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

2
Añade un encabezado al documento HTML. Si tu documento HTML de por sí no tiene un encabezado, sigue estos pasos para añadir uno. El encabezado va después de la etiqueta "<html>" y antes de la etiqueta "<body>".
- Escribe <head> en la parte superior del documento.
- Presiona dos veces la tecla Entrar para añadir dos líneas nuevas.
- Escribe </head> para cerrar la sección del encabezado.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/35\/658928-3-2.jpg\/v4-460px-658928-3-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/35\/658928-3-2.jpg\/v4-728px-658928-3-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

3
Escribe <style> en la sección del encabezado. La etiqueta de estilo va entre las etiquetas de apertura y de cierre del encabezado. Con esto se crea una sección en donde puedes ingresar código CSS para darle estilo a tu documento HTML.
- Como otra alternativa, puedes utilizar un archivo CSS externo para darle estilo a tu documento HTML.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f2\/658928-4-2.jpg\/v4-460px-658928-4-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f2\/658928-4-2.jpg\/v4-728px-658928-4-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

4
Escribe hr { . Esta es la etiqueta de CSS para darle estilo a la línea horizontal. Añádela después de la etiqueta de estilo en el encabezado o en el archivo externo de CSS.
- Como otra alternativa, puedes definir un estilo de clase para crear distintos estilos para las líneas horizontales.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/fa\/658928-5-2.jpg\/v4-460px-658928-5-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/fa\/658928-5-2.jpg\/v4-728px-658928-5-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

5
Añade estilos de CSS para la etiqueta "<hr>". Estos van después de la etiqueta "hr {". Puedes darle estilo a una línea horizontal de muchas formas. Estos son algunos ejemplos:
- Ancho: escribe width: ##px; para establecer el ancho de la línea. Reemplaza "##" por la cantidad de píxeles de ancho que tenga la línea. Asimismo, puedes usar un porcentaje (%) en lugar de píxeles (px).
- Altura: escribe height: ##px; para establecer el grosor de la línea. Reemplaza "##" por el número de píxeles de grosor que tenga la línea.
- Color: escribe background-color: ##; para establecer el color de la línea. Reemplaza "##" por el nombre de un color o añade un símbolo de numeral (#) seguido de un código hexadecimal de color .
- Margen derecho: escribe margin-right: ##px; para establecer la cantidad de píxeles desde el borde derecho. Reemplaza "##" por la cantidad de píxeles o "auto". Usar "auto" centrará la línea dentro de su ancho especificado. El espacio restante se dividirá de manera equitativa entre los márgenes izquierdo y derecho.
- Margen izquierdo: escribe margin-left: ##px; para establecer la cantidad de píxeles desde el margen izquierdo. Reemplaza "##" por la cantidad de píxeles o "auto". Usar "auto" centrará la línea dentro de su ancho especificado. El espacio restante se dividirá de manera equitativa entre los márgenes izquierdo y derecho. ^{[2]
  X
  Fuente de investigación}
- Margen superior: escribe margin-top: ##px; para establecer un margen superior para la línea. Reemplaza "##" por la cantidad de píxeles de grosor del margen.
- Margen inferior: escribe margin-bottom: ##px; para establecer el margen inferior. Reemplaza "##" por la cantidad de píxeles de grosor del margen.
- Borde: escribe border-width: ##px; para crear un borde alrededor de la línea (opcional). Reemplaza "##" por la cantidad de píxeles de grosor del borde.
- Color del borde: escribe border-color: ##; para establecer el color del borde (opcional). Reemplaza "##" por el nombre de un color o añade un símbolo de numeral (#) seguido de un código hexadecimal de color.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/fd\/658928-6-2.jpg\/v4-460px-658928-6-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/fd\/658928-6-2.jpg\/v4-728px-658928-6-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Con esto se cierra la configuración de estilo para la etiqueta <hr>.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/91\/658928-7-2.jpg\/v4-460px-658928-7-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/91\/658928-7-2.jpg\/v4-728px-658928-7-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Con esto se crea una línea nueva y luego se añade la etiqueta para cerrar la sección de estilo de tu documento HTML. La etiqueta "</style>" va después de haber añadido todos los elementos de estilo para tu documento HTML.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/78\/658928-8-2.jpg\/v4-460px-658928-8-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/78\/658928-8-2.jpg\/v4-728px-658928-8-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

8
Escribe <hr> en cualquier parte del cuerpo de tu documento HTML. El cuerpo de la etiqueta HTML es el área entre las etiquetas "<body>" y "</body>". Con esto se añade una línea horizontal a tu documento de HTML. Tu configuración de estilo de CSS se aplicará cada vez que utilices la etiqueta "<hr>" en tu documento HTML.
- Si has definido un estilo de clase para la línea horizontal, escribe en cambio {{kbd|<div class="[class_name]"></div>}. Reemplaza "[class_name]" por el nombre de la clase que hayas definido.</li
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1c\/658928-9-2.jpg\/v4-460px-658928-9-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1c\/658928-9-2.jpg\/v4-728px-658928-9-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

9
Guarda tu archivo HTML. Para guardar un archivo de texto como un documento HTML, debes reemplazar la extensión del archivo (.txt, .docx) por ".html". Sigue estos pasos para guardar tu documento HTML:
- Haz clic en el menú Archivo .
- Haz clic en Guardar como si vas a empezar un nuevo archivo HTML. Haz clic en Guardar para guardar un archivo HTML existente.
- Escribe un nombre para el archivo junto a "Nombre de archivo".
- Borra la extensión del archivo al final (".txt," ".docx," etc.).
- Reemplaza la extensión del archivo por ".html".
- Haz clic en Guardar .
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0d\/658928-10-2.jpg\/v4-460px-658928-10-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0d\/658928-10-2.jpg\/v4-728px-658928-10-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

10
Pon a prueba el archivo HTML. Para poner a prueba el archivo HTML, haz clic derecho en el archivo y selecciona Abrir con . Luego, selecciona un navegador de internet. Debe aparecer una línea sólida en donde hayas colocado la etiqueta "<hr>". Tu código HTML debe verse algo así:
Anuncio