Porque ela usou uma lista no card__botoes ao invés de uma tag ancora assim como foi feito no header? No menu dos cards também não seria uma funcionalidade?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Porque ela usou uma lista no card__botoes ao invés de uma tag ancora assim como foi feito no header? No menu dos cards também não seria uma funcionalidade?
Olá, Marconi! Tudo bem?
A escolha de usar <ul> e <li> em vez de <a> diretamente no card__botoes está relacionada a algumas boas práticas de estruturação e semântica do HTML. Aqui estão algumas razões pelas quais isso foi feito:
Semântica e Organização: Usar listas (<ul> e <li>) é uma prática comum para agrupar elementos relacionados. No caso dos botões ou ícones que representam ações (como favoritar ou adicionar ao carrinho), agrupá-los em uma lista pode fazer sentido semântico, pois eles formam um conjunto de ações relacionadas.
Flexibilidade de Estilo: Ao usar uma lista, você pode aplicar estilos de forma mais consistente e organizada. Por exemplo, você pode usar CSS para estilizar todos os itens da lista de uma vez ou individualmente, o que pode ser mais difícil de gerenciar se cada botão ou ícone fosse um <a> separado.
Acessibilidade: Estruturar ações como uma lista pode melhorar a acessibilidade, pois leitores de tela e outros dispositivos assistivos podem interpretar a lista como um conjunto de ações relacionadas, proporcionando uma melhor experiência para usuários com deficiências.
No caso do botão "Saiba Mais", a utilização de uma <a> é apropriada, pois é um botão isolado com a intenção de redirecionar o usuário para outra página ou seção, o que é a função principal de uma âncora.
Lembrando que no header também foi feita uma lista para envolver as âncoras de navegação, o que é uma prática bastante comum:
<ul class="lista-menu">
<li class="lista-menu__titulo">Categorias</li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Programação</a>
</li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Front-end</a>
</li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Infraestrutura</a>
</li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Business</a>
</li>
<li class="lista-menu__item">
<a href="#" class="lista-menu__link">Design & UX</a>
</li>
</ul>
Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.
Abraços e bons estudos!