En caso de que, al diseñar una página web, quieras mejorar enormemente la experiencia del usuario, hay un tip que deberías seguir: hacer una línea en HTML. Resulta que crear una separación visual entre secciones puede ser clave para lograrlo y, en este post, te explicaré cómo lo puedes hacer.

¿Qué encontrarás en este post?

Cómo hacer una línea en HTML fácilmente

Usando la etiqueta <hr> en HTML

El método más sencillo y directo para hacer una línea en HTML es utilizando la etiqueta <hr>. Esta etiqueta inserta una línea horizontal que se extiende a lo largo del ancho del contenedor en el que se encuentra.

No requiere cerrar la etiqueta, y por defecto, crea una línea simple que puede ser útil en una gran variedad de contextos.

<hr>

Estilizando la línea con CSS

Ahora bien, al hacer una línea en HTML puede que quieras sacarle todo el provecho y personalizarla. Para ello, CSS te ofrece la flexibilidad que necesitas. Aquí te muestro cómo puedes darte estilo a tu línea usando código CSS para lograr diferentes efectos:

Añadiendo estilos básicos

Para empezar, puedes aplicar estilos básicos a tu línea usando la etiqueta <style> dentro del <head> de tu documento HTML. Esto te permitirá modificar aspectos como el grosor, el color y el margen de la línea. Puedes hacerlo con estos pasos:

Abre tu editor de código: Puedes utilizar un editor como Visual Studio Code o el Bloc de Notas.
Crea un nuevo documento HTML o abre uno existente y asegúrate de que tenga una sección de <head>.
Añade la etiqueta <style> dentro del <head>

<head>
        <style> 
                hr { 
                      width: 80%; /* Ajusta el ancho de la línea */ 
                      height: 2px; /* Define el grosor de la línea */ 
                      background-color: #000000; /* Cambia el color de la línea */ 
                      margin: 20px auto; /* Centra la línea horizontalmente */ 
                } 
        </style>
 </head>

Coloca la etiqueta <hr> donde desees dentro del <body> del documento

<body> 
        <hr>
 </body>

Más personalizaciones con CSS

En caso de que desees ir un paso más allá y experimentar con cómo hacer una línea en HTML más única, CSS te permite añadir bordes, cambiar la opacidad, y mucho más.

Bordes personalizados

hr { 
      border: none; 
      border-top: 3px dashed #ff6347; /* Línea discontinua de color tomate */ 
      height: 0; 
      margin: 20px 0; 
}

Líneas dobles

hr { 
      border: none; 
      border-top: 5px double #32cd32; /* Línea doble de color verde lima */ 
      height: 0; 
      margin: 20px 0; 
}

Sombras y efectos 3D

hr { 
      border: none; 
      border-top: 1px solid #ccc; 
      border-bottom: 1px solid #fff; 
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
      height: 0; 
      margin: 20px 0; 
}

Usando un archivo CSS externo para hacer una línea en HTML

Otra forma de hacer una línea en HTML es utilizando un archivo CSS externo. Esta práctica es común en proyectos más grandes, donde dejar el código CSS separado del HTML puede ayudar a mantener el orden y la limpieza en tu código.

Crea un archivo CSS con los estilos que quieras aplicar:

/* styles.css */ 
hr { 
      width: 70%; 
      height: 3px; 
      background-color: #4682b4; /* Azul acero */ 
      margin: 30px auto; 
}

Enlaza el archivo CSS a tu documento HTML

<head> 
       <link rel="stylesheet" href="styles.css"> 
</head>

Añade la etiqueta <hr> en tu documento HTML donde desees que aparezca la línea

<body> 
        <hr> 
</body>

Prueba tu línea en el navegador

Cuando hayas terminado de hacer una línea en HTML, es importante que pruebes el resultado en un navegador. Guarda tu archivo HTML y ábrelo con cualquier navegador para ver cómo se muestra la línea.

Para hacer esto:

Guarda tu archivo HTML asegurándote de que tiene la extensión .html.
Abre el archivo con un navegador haciendo clic derecho y seleccionando “Abrir con”. Luego, elige el navegador de tu preferencia.
Revisa la línea y asegúrate de que se ve tal como la diseñaste. Si no, regresa al código y ajusta los estilos según tus preferencias.

Aunque no lo creas, saber hacer una línea en HTML y personalizarla es una habilidad que te servirá para llevar a cabo muchos proyectos y, por supuesto, mejorar significativamente la apariencia de tu página web. No importa si usas el método básico o si, por el contrario, te aventuras a personalizarla con CSS, lo importante es que ahora ya tienes las herramientas para hacerlo de manera efectiva.

Ten por seguro que con estas técnicas, tus separaciones visuales no solo cumplirán con su función, sino que también le darán un toque de estilo a tu diseño.

¿Te gustaría dominar más técnicas como esta y profundizar en el desarrollo web? Con el Bootcamp de Desarrollo Web de KeepCoding, no solo aprenderás cómo hacer una línea en HTML, sino que también te sumergirás en el diseño y la programación web desde cero hasta un nivel profesional. Este bootcamp te preparará para entrar en el sector IT, una industria que ofrece altos salarios y estabilidad laboral. ¡Apúntate ahora y transforma tu futuro en tecnología!