Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

solucion

1 respuesta

¡Hola Marcos!

Para mejorar la accesibilidad y semántica del código HTML de la navegación principal, puedes seguir estos pasos:

  1. Utiliza las etiquetas semánticas de HTML para representar la estructura de la navegación. En lugar de <div> para la navegación, puedes usar la etiqueta <nav> para representar la sección de navegación principal.

  2. Añade etiquetas semánticas a los elementos de navegación. En lugar de usar <a> sueltos, puedes incluir cada enlace dentro de un elemento de lista <li> y luego agruparlos todos dentro de una lista <ul>.

Aquí te muestro cómo quedaría el código HTML refactorizado:

<header>
  <a href="#" aria-label="Ir a la página principal">
    <img class="encabezado__logo--icono" alt="Logo de Provi" src="./img/logoproviblanca-1@2x.png" />
  </a>
  <nav class="encabezado__navegacion" aria-label="Navegación principal">
    <ul>
      <li>
        <a class="encabezado__navegacion--elemento" href="#">Blog</a>
      </li>
      <li>
        <a class="encabezado__navegacion--elemento" href="#">Paquete de viaje</a>
      </li>
      <li>
        <a class="encabezado__navegacion--elemento" href="#">Contacto</a>
      </li>
    </ul>
  </nav>
</header>

Con estos cambios, estarás utilizando las etiquetas semánticas de HTML para representar adecuadamente la estructura de la navegación principal, lo que mejorará la accesibilidad y semántica de la página web.

Espero que esta solución sea de ayuda para mejorar la accesibilidad y semántica del sitio web de "Jornada". ¡Mucho éxito en el desafío!

Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios!