Puedes hacer mucho con HTML. Puede crear saltos de línea. Puedes incrustar imágenes. Puede poner en negrita o cursiva el texto. Incluso puede crear una ruptura temática utilizando un elemento de regla horizontal HTML.
En esta publicación, lo guiaremos a través de cómo crear una línea horizontal y ajustar su color, ancho y alineación en la página.
¿Por qué crear una línea horizontal en HTML?
Suponga que desea marcar un cambio de escena en una obra de teatro, una nueva sección de ensayo o un artículo final. En cualquier caso, puede crear una línea horizontal para marcar visualmente este cambio.
Mira este ejemplo en atlántico esto marca el final del artículo y el comienzo de la biografía del autor.
Ahora que entendemos los beneficios de una línea horizontal, echemos un vistazo a cómo crearla en HTML.
Cómo hacer una línea horizontal en HTML
Para crear una línea horizontal en HTML, use un elemento
. Puede colocar un elemento
– que significa «regla horizontal» – en cualquier lugar donde desee crear una línea horizontal a lo largo de la página web. Al igual que el elemento img, el
es un «elemento vacío» porque no hay una etiqueta de cierre.
Para crear la línea horizontal predeterminada, agregaré una etiqueta
entre dos elementos de párrafo. Aquí está el código y el resultado:
ver la pluma eYvVRWQ de Christina Perricone (@hubspot) en CódigoPen.
Elemento
no era semántico, por lo que podría diseñarse con los siguientes atributos.
| Atributos retirados | Intención |
| color = «…» | Establece el color de la línea horizontal. |
| ancho = «…» | Establece el ancho de la línea horizontal. |
| tamaño = «…» | Establece la altura de la línea horizontal. |
| alinear = «…» | Establece la alineación de la línea horizontal. |
| sin sombra | Hace que la línea horizontal sea sólida sin sombreado. |
Sin embargo, en HTML5, el elemento
se ha vuelto semántico. El HTML semántico es básicamente el código HTML que dice lo que hace. Esto es mejor para la disponibilidad web, ya que los navegadores, la tecnología de asistencia de lectura y otros sistemas automatizados podrán saber si hay una interrupción temática. Esto también significa que los atributos anteriores han quedado obsoletos.
Para aplicar estilo al elemento ahora
debes usar CSS. Veamos cómo cambiar el color, el ancho y la posición de la línea horizontal usando CSS a continuación.
Color de la línea horizontal HTML
Puede usar la propiedad CSS background-color para establecer el color del elemento de línea horizontal. Pero primero necesitas determinar la altura del elemento.
. También debe establecer la propiedad border-width en 0. De lo contrario, la línea horizontal gris predeterminada aparecerá encima de la línea de color más gruesa que cree.
Aquí hay un ejemplo:
ver la pluma ONEES de Christina Perricone (@hubspot) en CódigoPen.
Ancho de línea horizontal HTML
Puede usar la propiedad de ancho de CSS para establecer el ancho de un elemento de línea horizontal. Puede definir esta propiedad usando porcentajes o valores de longitud (px, pt, em y rem son solo algunos).
Aquí hay un ejemplo:
ver la pluma Ancho de línea horizontal HTML de Christina Perricone (@hubspot) en CódigoPen.
Alineación de líneas horizontales HTML
Puede utilizar la propiedad de margen CSS para cambiar la posición del elemento de línea horizontal. Por ejemplo, si quisiera que la línea apareciera alineada a la izquierda en lugar de centrada, podría establecer la propiedad margin-left en 0. También tendría que definir el ancho del elemento
.
Aquí hay un ejemplo de una línea horizontal diseñada con las propiedades de ancho y margen:
ver la pluma abJqLQa de Christina Perricone (@hubspot) en CódigoPen.
Un simple truco de HTML
Conocer los conceptos básicos de HTML puede ser extremadamente útil para los especialistas en marketing digital. Puede liberarlo de depender de un webmaster o desarrollador web independiente para actualizaciones simples del sitio o boletines informativos por correo electrónico, por ejemplo, creando una línea horizontal a lo largo de la página.
Nota del editor: esta publicación se publicó originalmente en julio de 2011 y se actualizó por su extensión.
