Desafío: principios de la semántica HTML - Navegación

HTML:

<!-- La agencia de viajes "Jornada" está reformulando su sitio web para mejorar la experiencia de sus usuarios. El equipo de desarrollo web de Jornada ha estado trabajando arduamente para asegurar que la refactorización del código sea accesible y siga las mejores prácticas de HTML semántico. Sin embargo, se han encontrado con un problema: la navegación principal del sitio web no es clara y no sigue los estándares de semántica HTML y accesibilidad.

Tu desafío será ayudar al equipo a refactorizar su código HTML para hacerlo más accesible y semántico. -->


<a href="" class="encabezado__logo" aria-label="Ir a la página principal">
    <img class="encabezado__logo--icono" alt="Logo-jornada" src="./img/logoproviblanca-1@2x.png" />
  </a>
  <ul class="encabezado__navegacion--lista">
    <li><a class="encabezado__navegacion--elemento" href="" aria-label="Ir a blog">Blog</a></li>
    <li><a class="encabezado__navegacion--elemento" href="" aria-label="Ir a paquetes">Paquetes de viaje</a></li>
    <li><a class="encabezado__navegacion--elemento" href="" aria-label="Ir a contacto">Contacto</a></li>
</ul>

CSS:

.encabezado__navegacion--lista {

    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}