Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Porque utilizar lista em menu de navegação

Olá! Sempre tive a dúvida de porque utilizar o recurso de lista no menu de navegação, por exemplo:

Não poderia somente utilizar dessa forma?

<nav class="navbar-nav me-auto mb-2 mb-lg-0" > 
                <a class="nav-link active" aria-current="page" href="#">Home</a>
                <a class="nav-link" href="#">Link</a>
Não seria mais ''limpo'' o código? Ou, seria uma boa conduta utilizar as listas sempre que for criar menus de navegação? 
1 resposta
solução!

Olá Giovana, tudo bem? Espero que sim!

O uso de listas em menus de navegação é uma prática comum e recomendada, principalmente por questões de acessibilidade e semântica.

Acessibilidade: Leitores de tela, usados por pessoas com deficiência visual, interpretam listas de uma maneira específica que ajuda o usuário a entender a estrutura do seu site. Se você usar uma lista para o seu menu de navegação, o leitor de tela irá anunciar que há uma lista com X número de itens, dando ao usuário uma ideia de quantas opções de navegação existem.

Semântica: Em termos de semântica, ou o significado do código, um menu de navegação é essencialmente uma lista de links. Portanto, faz sentido marcar isso como uma lista no HTML. Isso ajuda não apenas os leitores de tela, mas também os motores de busca a entender a estrutura do seu site.

Agora, quanto ao seu código ser mais "limpo" sem as listas, isso pode ser uma questão de preferência pessoal. No entanto, é importante lembrar que a clareza e a acessibilidade do código devem ser uma prioridade sobre a brevidade.

Por exemplo, considere o seguinte menu de navegação:

<nav> 
    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
    </ul>
</nav>

Este código é um pouco mais longo do que a versão sem listas, mas também é mais claro. Ele explicitamente mostra que temos uma lista de itens de navegação, cada um contendo um link. Isso pode tornar o código mais fácil de entender para outras pessoas que possam estar lendo ou mantendo seu código.

Espero ter ajudado!

Caso tenha dúvidas, fico à disposição.

Abraços e bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software