EasyCode365EasyCode365

Crear enlaces y navegación

Los enlaces ayudan a las personas a moverse por un sitio web.

Un menú de navegación es un grupo de enlaces que apunta a las páginas principales, como Inicio, Acerca de, Blog o Contacto. Los estilos de enlace claros y una navegación simple hacen que un sitio sea más fácil de entender y usar.

En esta lección aprenderás a dar estilo a estados de enlaces y a crear menús de navegación verticales y horizontales básicos.

Qué es un enlace en HTML

En HTML, un enlace se crea con la etiqueta <a>.

El atributo href le dice al navegador a dónde debe ir el enlace.

Solo lectura
<a href="https://www.easycode365.com/" target="_blank">Visitar Example</a>

El texto entre la etiqueta de apertura y la de cierre es el texto clicable que ven los usuarios.

Estilo básico de enlaces con CSS

Los navegadores dan estilo a los enlaces automáticamente.

Por defecto, los enlaces suelen ser azules y estar subrayados. Después de que un usuario visita un enlace, el navegador puede mostrarlo con otro color.

CSS te permite cambiar el estilo de enlace por defecto:

Se puede editar
<p>
  Visita la <a href="https://www.easycode365.com/" target="_blank">página de práctica de CSS</a>.
</p>

<style>
  a {
    color: blue;
    text-decoration: underline;
  }
</style>

También puedes dar estilo solo a enlaces específicos usando una clase:

Se puede editar
<p>
  Lee la
  <a href="https://www.easycode365.com/" target="_blank" class="text-link"
    >guía de CSS para principiantes</a
  >.
</p>

<style>
  .text-link {
    color: #2563eb;
    font-weight: bold;
  }
</style>

Estados de enlace

Los enlaces pueden verse diferentes según lo que esté haciendo el usuario.

CSS usa pseudo-clases para dar estilo a estos estados:

  • :link: un enlace que el usuario aún no ha visitado
  • :visited: un enlace que el usuario ya abrió antes
  • :hover: un enlace cuando el puntero del mouse está encima
  • :active: un enlace durante el momento en que se está haciendo clic
  • :focus-visible: un enlace seleccionado con el teclado, normalmente al presionar Tab

El estado de foco con teclado es importante para la accesibilidad. Algunas personas navegan sitios web sin mouse, así que necesitan un estilo de foco visual claro.

Cuando das estilo a :link, :visited, :hover y :active, un orden común es:

Solo lectura

Muchos desarrolladores recuerdan este orden como LoVe HAte: link, visited, hover, active.

Coloca :focus-visible cerca de tus estilos de hover, porque ambos estados muestran que el usuario está apuntando al enlace.

Propiedades comunes para enlaces

Los enlaces son texto, pero también pueden comportarse como cajas pequeñas.

Propiedades útiles:

  • color: cambia el color del texto
  • text-decoration: controla el subrayado
  • font-weight: hace que el enlace sea más ligero o más negrita
  • padding: añade espacio clicable dentro del enlace
  • background-color: añade color detrás del enlace
  • border-radius: redondea las esquinas cuando el enlace tiene fondo

Ten cuidado con text-decoration: none;. Si quitas el subrayado, asegúrate de que el enlace todavía se vea diferente del texto normal.

El padding funciona mejor cuando el enlace usa display: block o display: inline-block, como verás en los ejemplos de navegación de abajo.

Ejemplo ejecutable: enlace de texto con estilo

Este ejemplo da estilo a un enlace en sus estados normal, hover, active y foco con teclado.

Se puede editar
<p>
  Lee nuestra
  <a href="https://www.easycode365.com/" target="_blank" class="text-link"
    >guía de CSS para principiantes</a
  >.
</p>

<style>
  .text-link:link,
  .text-link:visited {
    color: #2563eb;
    text-decoration: none;
    font-weight: bold;
  }

  .text-link:hover {
    color: #ea580c;
    text-decoration: underline;
  }

  .text-link:focus-visible {
    outline: 3px solid #93c5fd;
    outline-offset: 3px;
  }

  .text-link:active {
    color: #dc2626;
  }
</style>

Prueba mover el mouse sobre el enlace. Deberías ver el estilo hover.

Si usas el teclado, presiona Tab hasta enfocar el enlace. Deberías ver el contorno de foco.

Qué es un menú de navegación

Un menú de navegación es un grupo de enlaces.

Los desarrolladores suelen crear navegación con un elemento <nav> y una lista:

Solo lectura
<nav>
  <ul>
    <li><a href="https://www.easycode365.com/" target="_blank">Inicio</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">Acerca de</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">Contacto</a></li>
  </ul>
</nav>

El elemento <nav> le dice al navegador, a los motores de búsqueda y a las tecnologías de asistencia que este grupo de enlaces sirve para navegar.

Menú de navegación vertical

Un menú vertical apila enlaces de arriba hacia abajo.

Funciona bien para barras laterales o menús simples de curso.

Se puede editar
<nav class="vertical-nav" aria-label="Navegación lateral">
  <ul>
    <li><a href="https://www.easycode365.com/" target="_blank">Inicio</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">Lecciones</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">Contacto</a></li>
  </ul>
</nav>

<style>
  .vertical-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 180px;
    font-family: Arial, sans-serif;
  }

  .vertical-nav a {
    display: block;
    padding: 10px 12px;
    color: #1f2937;
    text-decoration: none;
    border-bottom: 1px solid #d1d5db;
  }

  .vertical-nav a:hover,
  .vertical-nav a:focus-visible {
    background-color: #dbeafe;
    color: #1d4ed8;
  }
</style>

La parte importante es display: block;.

Hace que toda el área del enlace sea clicable, no solo las letras.

Menú de navegación horizontal

Un menú horizontal coloca enlaces uno al lado del otro.

Esto es común cerca de la parte superior de un sitio web.

Se puede editar
<nav class="horizontal-nav" aria-label="Navegación principal">
  <ul>
    <li><a href="https://www.easycode365.com/" target="_blank">Inicio</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">Lecciones</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">Contacto</a></li>
  </ul>
</nav>

<style>
  .horizontal-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 8px;
    font-family: Arial, sans-serif;
  }

  .horizontal-nav a {
    display: inline-block;
    padding: 10px 14px;
    color: white;
    background-color: #1f2937;
    text-decoration: none;
    border-radius: 6px;
  }

  .horizontal-nav a:hover,
  .horizontal-nav a:focus-visible {
    background-color: #2563eb;
  }
</style>

Aquí, display: flex; coloca los elementos de la lista en una fila.

Los enlaces usan padding y color de fondo, así que se sienten como botones claros y clicables.

Estilizar enlaces de navegación como botones

Puedes hacer que un enlace parezca un botón con unas pocas propiedades CSS.

Se puede editar
<a href="https://www.easycode365.com/" target="_blank" class="button-link">Empezar lección</a>

<style>
  .button-link {
    display: inline-block;
    padding: 10px 18px;
    background-color: #16a34a;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-weight: bold;
  }

  .button-link:hover,
  .button-link:focus-visible {
    background-color: #15803d;
  }
</style>

Usa display: inline-block; cuando quieras que padding, ancho, alto o color de fondo se sientan más como un botón.

Errores comunes de principiantes

  • Quitar el subrayado sin otra pista visual: si un enlace parece texto normal, los usuarios quizá no sepan que se puede hacer clic.
  • Olvidar los estilos de foco con teclado: hover ayuda a usuarios con mouse, pero usuarios con teclado también necesitan un estado de foco visible.
  • Hacer áreas clicables demasiado pequeñas: añade padding y usa display: block o inline-block cuando los enlaces deban ser más fáciles de hacer clic.
  • Olvidar href: una etiqueta <a> sin href no es un enlace de navegación real.
  • Añadir bordes dobles en menús verticales: si cada elemento tiene un borde completo, los bordes pueden apilarse y verse demasiado gruesos. Usa solo border-bottom cuando necesites separadores simples.

Mini tarea de práctica

Mira esta regla CSS:

Solo lectura

¿Qué acción del usuario hace que el fondo del enlace se vuelva amarillo?

Revisa las respuestas del quiz cuando estés listo.

Quiz corto con respuestas

  1. ¿Qué propiedad CSS elimina el subrayado por defecto de un enlace?
  2. ¿Qué pseudo-clase da estilo a un enlace cuando el puntero del mouse está encima?
  3. ¿Qué elemento HTML se usa para marcar un grupo de enlaces de navegación?

Respuestas:

  1. text-decoration: none;
  2. :hover
  3. <nav>

Respuesta de la mini tarea: el fondo se vuelve amarillo cuando el usuario coloca el puntero del mouse sobre el enlace.

Pequeño desafío

Crea un menú de navegación horizontal simple.

Tus objetivos:

  • Usa un elemento <nav>.
  • Añade un <ul> con tres enlaces.
  • Quita los puntos de la lista.
  • Coloca los enlaces uno al lado del otro.
  • Añade padding y un color de fondo a cada enlace.
  • Cambia el color de fondo en :hover y :focus-visible.

Empieza con este código editable:

Se puede editar
<nav class="challenge-nav" aria-label="Navegación de práctica">
  <ul>
    <li><a href="https://www.easycode365.com/" target="_blank">Inicio</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">Lecciones</a></li>
    <li><a href="https://www.easycode365.com/" target="_blank">Contacto</a></li>
  </ul>
</nav>

<style>
  .challenge-nav ul {
    /* Quita los puntos */

    /* Quita el espaciado por defecto */

    /* Coloca los elementos lado a lado */

    font-family: Arial, sans-serif;
  }

  .challenge-nav a {
    /* Haz que padding y background funcionen como una caja */

    /* Añade padding */

    /* Añade color de texto */

    /* Añade color de fondo */

    /* Quita el subrayado */
  }

  .challenge-nav a:hover,
  .challenge-nav a:focus-visible {
    /* Cambia el color de fondo */
  }
</style>

Resumen

  • Los enlaces se crean con la etiqueta <a>.
  • El atributo href le dice al navegador a dónde va el enlace.
  • Los estados de enlace incluyen :link, :visited, :hover, :active y :focus-visible.
  • Usa text-decoration para controlar subrayados.
  • Los menús de navegación son grupos de enlaces, normalmente dentro de un elemento <nav>.
  • La navegación vertical apila enlaces de arriba hacia abajo.
  • La navegación horizontal coloca enlaces uno al lado del otro.
  • El padding hace que los enlaces de navegación sean más fáciles de hacer clic.