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?
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!