Семантически правильные теги HTML для карточки товара

Question

Прохожу обучение, где:

для разметки карточки товара рекомендуют использовать тег <article>;
для разметки кнопок вроде "избранное" рекомендуют использовать тег ссылки <a> (хотя переход на другую страницу не предполагается, разве что js на сайте вообще не будет использоваться - этим, кстати, и объясняют использование ссылки, а не кнопки, "на всякий случай".

Пример кода карточки:

<article class="card">
  <h4 class="card-title">
    <a class="card-link" href="#">
      Amara Resort & Spa
    </a>
  </h4>
  <img class="card-img" src="" alt="">
  <p class="card-description">
    <span class="card-description-title">Гостиница</span>
    <span class="card-description-defenition">От 4000 ₽</span>
  </p>
  <a class="button" href="#">Подробнее</a>
  <a class="button" href="#">В избранное</a>
  <p class="star star-four">
    <span class="visually-hidden">4 звезды</span>
  </p>
  <p class="card-rate">Рейтинг: 8,5</p>
</article>

Я вижу, что у других сайтов используется другая разметка - <div> для карточки товара, для кнопки "избранное" - <button>. Какие теги всё же следует использовать, как это принято делать в реальной работе? И вообще, может зря я уделяю этому такое внимание?

Answer 1

Если существуют теги, роль которых определена, то лучше использовать их. я читала, что поисковые движки ориентируются на семантические теги и правильно примененные семантические теги добавляют вес странице в поисковой выдаче. Помимо этого, семантические теги помогают программе-ридеру лучше ориентироваться на странице (речь об озвучке для слабовидящих). К примеру, навигация по странице для слабовидящих происходит с помощью заголовков <h[1-6]>. Думаю, использование семантических тегов обусловлено не только этим.

БЛОГ НА HUSL

Семантически правильные теги HTML для карточки товара

Ответы (1 шт):