Теги Div или Ul?

Question

[E1brus]

Практически в каждом сайте имеются карточки с краткими описаниями об эффектичности услугах или плюсах, но суть не в этом)

Большинство людей их оформляют через div - некоторые даже доходят до того что каждый элемент в карточке будет отдельным div-ом внутри div-а хех, так в чем же вопрос спросите вы меня, значит рассказываю:

Увидел в одном видео из курса frontend как некий тим лид из команды сайта Мос биржи решил делать карточки через список а не div, то есть...

<div>
    <ul>
        <li>
            <h4>Название</h4>
            <img href="" alt="">
        </li>

        <li>
            <h4>Название</h4>
            <img href="" alt="">
        </li>
    </ul>
</div>

Вместо привычного мне

<div class="main-div">
    <div>
        <h4>Название<h4> 
        <img href ="" alt ="">
    </div>

    <div>
        <h4>Название<h4> 
        <img href ="" alt ="">
    </div>
</div>

Какой из вариантов будет лучше ? даже если зависит от вкусов то все же какой использовать будет правильней ? чтоб в дальнейшем стараться развивать тот вариант и практиковаться ?

Comments

[Антон Литвиненко]

например в магазине woocommerce в каталог товаров это список и каждый товар - элемент списка

Answer 1

[Владимир Коротенко]

Подумайте сами
В вашем примере список карточек, так почему его нужно оформлять в какой то див?

див это просто контейнер без логической нагрузки, список наоборот дает указание что это коллекция определенного типа, возможно с определенной структурой, и вы на это не тратитесь все у вас из коробки

Comments

[E1brus]

я как человек который даже еще не джун не смогу спорить с senior-ом) просто я смотря как все оформляют таким образом решил что это популярный вариант/ а там уже и display: Inline-block; и остальные прелести жизни

Но как вижу суждение было ошибочным)

[Фёдор]

E1brus, Ну как бы всё правильно он делает. В данном случае Див тут просто обёртка для позиционирования. Как например. Как выше было написано, "из коробки" есть специальные теги для списков.

А те, кто верстает дивами просто динозавры.

[Тимофей]

E1brus, есть такое понятие как семантическая верстка. Посмотрите для самообразования.