2
respostas

Por que usar ul nos cards?

Oi gente!

Alguém sabe dizer se existe alguma razão específica para usarmos uma lista não ordenada nos cards.

Bateu essa dúvida, porque ao refazer optei por usar apenas âncoras, sem a lista. Assim como fizemos no header.

Mas queria saber se existe um motivo semântico para a ul nos cards ou se foi apenas uma opção da professora para mostrar outras formas de fazer.

O código da aula, com ul.

<!-- 2º linha -->
<div class="card__botões">
    <!-- 1º coluna -->
    <ul class="botões">
        <li class="botões__item"><img src="img/Favoritos.svg" alt="Favoritar livro"></li>
        <li class="botões__item"><img src="img/Compras.svg" alt="Adicionar no carrinho de compras"></li>
    </ul>
    ...

O código refeito, apenas com âncora.

<!-- 2ª linha -->
<div class="card__botoes">
    <!-- 1ª coluna-->
    <div class="botoes">
        <a href="#" class="botoes__item"><img src="img/Favoritos.svg" alt="Favoritar livro"></a>
        <a href="#" class="botoes__item"><img src="img/Sacola.svg" alt="Adicionar no carrinho de compras"></a>
    </div>
    ...       

Os trechos de código são referentes a essa parte do card em destaque com o box rosa. Print do card com destaque para os ícones sacola e perfil

2 respostas

nav O elemento

é utilizado quando precisamos representar um agrupamento de links de navegação, que, por sua vez, são criados com os elementos

Oi Duanne! Obrigada pelo feedback e por compartilhar o artigo. No <header> cheguei a usar a tag <nav> também.

Confesso que não tenho o hábito de usar <nav> no conteúdo, costumo usar apenas para os menus principais de navegação.

Mas a minha dúvida mesmo é, se nesse contexto do card, seria uma boa prática usar uma ul > li > a. Ou poderíamos usar apenas a tag <a> mesmo, assim como foi feito no <header>.

Pergunto isso, pensando na semântica, ficaria mais legível ou mais adequado para o SEO do site usar a lista não ordenada ou apenas as âncoras já seriam suficientes?