Навык "Семантическая верстка"

Всем добрый день.
Села заниматься семантиской версткой макетов из навыка “Семантическая верстка”.
Вопрос по кейсу №3.

Секция “Новинки сезона”.

Я разметила товары просто li:

<ul class="bags-list">
    <li class="bag-item">
      <img src="img/good-007.jpg" alt="Сумка Forla">
      <p>Сумка Forla</p>
      <p>15 600 ₽</p>
    </li>
    <li class="bag-item">
      <img src="img/good-202.jpg" alt="Рюкзак Chanail">
      <p>Рюкзак <span>Chanail</span></p>
      <p>15 600 ₽</p>
    </li>
    <li class="bag-item">
      <img src="img/good-556.jpg" alt="Рюкзак коричневый">
      <a href="#">Смотреть детали</a>
      <button type="button" name="button">Добавить в корзину</button>
    </li>
    <li class="bag-item">
      <img src="img/good-453.jpg" alt="Рюкзак Chanail">
      <p>Рюкзак <span>Chanail</span></p>
      <p>15 600 ₽</p>
    </li>
  </ul>

В решении академии почему-то используется acticle:

<ul class="novelties-list">
      <li class="novelties-item">
        <article>
          <h3>Сумка Forla</h3>
          <img src="img/good-007.jpg" width="250" height="270" alt="Сумка Forla">
          <p>15 600 ₽</p>
        </article>
        <a href="#">Смотреть детали</a>
        <button type="button">Добавить в корзину</button>
      </li>
      <li class="novelties-item">
        <article>
          <h3>Рюкзак CHANAIL</h3>
          <img src="img/good-202.jpg" width="250" height="270" alt="Рюкзак CHANAIL">
          <p>15 600 ₽</p>
        </article>
        <a href="#">Смотреть детали</a>
        <button type="button">Добавить в корзину</button>
      </li>
      <li class="novelties-item">
        <article>
          <h3>Рюкзак DELSEY</h3>
          <img src="img/good-556.jpg" width="250" height="270" alt="Рюкзак DELSEY">
          <p>15 600 ₽</p>
        </article>
        <a href="#">Смотреть детали</a>
        <button type="button">Добавить в корзину</button>
      </li>
      <li class="novelties-item">
        <article>
          <h3>Рюкзак CHANAIL</h3>
          <img src="img/good-453.jpg" width="250" height="270" alt="Рюкзак CHANAIL">
          <p>15 600 ₽</p>
        </article>
        <a href="#">Смотреть детали</a>
        <button type="button">Добавить в корзину</button>
      </li>
    </ul>



Далее.
Секция “Стильные новости”.


Вот здесь я сама использовала actirce, так как по моему мнению данные статьи могут существовать и вне контекста.

<ul class="news-list">
    <li class="new-item">
      <article>
        <img src="img/news-block-002.jpg" alt="Сумка-клатч">
        <time datetime="2017-07-07">07.07.2017</time>
        <h3>Женские брендовые сумки-клатчи</h3>
        <p>Выбирая женские брендовые клатчи стоит оценить все возможности и ньансы. А для начала уточнить с каким нарядом планируете его носить, ведь сумка-клатч, не просто стильный аксессуар, а отличительная черта вашего стиля.</p>
        <a href="#">Перейти к новости</a>
      </article>
    </li>
    <li class="new-item">
      <article>
        <img src="img/news-block-102.jpg" alt="Женские сумки Baildinini">
        <time datetime="2017-07-07">07.07.2017</time>
        <h3>Женские сумки Baildinini</h3>
        <p>Один из самых именитых итальянских Домов моды представляет собственный взгляд на то, как именно должна выглядеть современная деловая женщина.</p>
        <a href="#">Перейти к новости</a>
      </article>
    </li>
    <li class="new-item">
      <article>
        <img src="img/news-block-502.jpg" alt="Сумка MiTchel KorsO">
        <time datetime="2017-07-07">07.07.2017</time>
        <h3>MiTchel KorsO: как отличить от подделки</h3>
        <p>Бренд принадлежит легендарному американскому дизайнеру Майклу Корсу, которому за короткий срок удалось получить известность в мире высокой моды, запустив собственные линии подиумных коллекций. Одежду Корса носят такие знаменитости, как Мишель Обама, Дженнифер Лопес, Хайди Клум, Рэйчел Макадамс, Кэтрин Зета-Джонс и другие.</p>
        <a href="#">Перейти к новости</a>
      </article>
    </li>
  </ul>

А у академии используется просто li:

<ul class="style-news-list">
      <li>
        <img src="img/news-block-002.jpg" width="315" height="240" alt="Женские брендовые сумки-клатчи">
        <time datetime="2017-07-07">07.07.2017</time>
        <h3>Женские брендовые сумки-клатчи</h3>
        <p>
          Выбирая женские брендовые клатчи стоит оценить все возможности и ньансы. А для начала уточнить с каким нарядом планируете его носить, ведь сумка-клатч, не просто стильный аксессуар, а отличительная черта вашего стиля.
        </p>
        <a href="#">Перейти к новостям</a>
      </li>
      <li>
        <img src="img/news-block-102.jpg" width="315" height="240" alt="Baildinini">
        <time datetime="2017-07-07">07.07.2017</time>
        <h3>Женские сумки Baildinini</h3>
        <p>
          Один из самых именитых итальянских Домов моды представляет собственный взгляд на то, как именно должна выглядеть современная деловая женщина.
        </p>
        <a href="#">Перейти к новостям</a>
      </li>
      <li>
        <img src="img/news-block-502.jpg" width="315" height="240" alt="MiTchel KorsO">
        <time datetime="2017-07-07">07.07.2017</time>
        <h3>MiTchel KorsO: как отличить от подделки</h3>
        <p>
          Бренд принадлежит легендарному американскому дизайнеру Майклу Корсу, которому за короткий срок удалось получить известность в мире высокой моды, запустив собственные линии подиумных коллекций. Одежду Корса носят такие знаменитости, как Мишель Обама, Дженнифер Лопес, Хайди Клум, Рэйчел Макадамс, Кэтрин Зета-Джонс и другие.
        </p>
        <a href="#">Перейти к новостям</a>
      </li>
    </ul>

Вопрос: я не понимаю применение тега article?
Поясните, почему мое решение может быть неверным.
Заранее большое спасибо!

Формально, компонент “превью товара” можно вырвать и поместить куда угодно + это “превью” как li может существовать исключительно внутри ul, а вот для article или даже div таких ограничений меньше и его можно свободно вкладывать в другие компоненты.

Ну, лично мне ваш вариант с article больше нравится. По идее, в Академии уже плясали от контекста, мол, компонент “превью новости” вряд ли будет существовать вне “списка новостей”, перемещаться никуда не будет, раз список - значит ul > li.

1 лайк

Спасибо за ответ!

В целом, как оцениваете материалы к навыку? И какой бэкграунд - интерактивные курсы\интенсивы\случайно решила попробовать.

Сводка

Нет, я к Академии отношения не имею, интересуюсь как работающий верстальщик, недовольный своими знаниями и ищущий способ все как-то систематизировать и навести порядок в голове.

Материалы к навыку достойные.
В целом Академия мне многое дала для понимания frontend сферы.

мой бекграунд: скудный Питон лет 5 назад, базы данных и 1С. Потом открыла для себя академию, прошла тонну интерактивных курсов и закончила профессию.

1 лайк