A agência de viagens "Jornada" está reformulando o seu site para melhorar a experiência dos seus usuários. A equipe de desenvolvimento web do Jornada tem trabalhado duro para garantir que a refatoração do código seja acessível e siga as melhores práticas de HTML semântico. No entanto, eles encontraram um problema: a navegação principal do website não é clara e não segue os padrões de semântica HTML e acessibilidade.
Seu desafio será ajudar a equipe a refatorar seu código HTML para torná-lo mais acessível e semântico.
Código base HTML:
<a>
<img class="cabecalho__logo--icone" alt="" src="./img/logoprovisriabranca-1@2x.png" />
</a>
<div class="cabecalho__navegacao">
<a class="cabecalho__navegacao--item" href="">Blog</a>
<a class="cabecalho__navegacao--item" href="">Pacotes de viagem</a>
<a class="cabecalho__navegacao--item" href="">Contato</a>
</div>
Código Refatorado:
<header>
<a href="index.html" aria-label="Página inicial">
<img class="cabecalho__logo--icone" alt="Logotipo da Jornada" src="./img/logoprovisriabranca-1@2x.png" />
</a>
<nav class="cabecalho__navegacao" aria-label="Navegação principal">
<ul>
<li><a class="cabecalho__navegacao--item" href="#blog">Blog</a></li>
<li><a class="cabecalho__navegacao--item" href="#pacotes">Pacotes de viagem</a></li>
<li><a class="cabecalho__navegacao--item" href="#contato">Contato</a></li>
</ul>
</nav>
</header>
