1
resposta

[Dúvida] Uso do UL/LI no lugar da tag <a>

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?

1 resposta

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:

  1. 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.

  2. 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.

  3. 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!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado