2015-06-15 4 views
1

Я провел некоторое исследование и не нашел подходящего ответа. Мне интересно, лучше ли продолжать использовать элементы li для перечисления продуктов или, возможно, переключиться на элемент article?Должен ли я использовать «ли» или «статью» для перечисления продуктов?

В каждом списке товаров содержится 1 основное изображение, название и цена.

+0

независимо от того, что вы делаете это идеально подходит для фигуры и фигурки – albert

ответ

2

От того, как вы описываете список продуктов (изображение + название + цена), это, кажется, не соответствует описанию в article in HTML5:

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

Спросите себя: Будет ли этот контент независимым от остальной части содержимого страницы? Если вы вынесете это из контекста, это будет само собой разумеющимся? Если ответ «Нет», то вы должны учитывать, что <article> может быть не самым подходящим тегом.

Если у вас есть несколько продуктов для отображения, список стилей (упорядоченный или неупорядоченный) кажется лучшим для этого. Но проверить некоторые практические случаи: как крупные компании делают это ?:

  • Amazon, Google Shopping, Tmall и Walmart использовать списки (ol или ul)
  • Алибаба и Ebay просто использует div коробки без какого-либо типа список.
  • Taobao использует комбинацию обоих (div для коробки и ul по названию и цене)
+0

Спасибо, ребята, за ваше время, очень цените это!
@ Alvaro: На самом деле, забыл упомянуть небольшую деталь, я мог бы также включить в ближайшем будущем краткое описание и некоторые ключевые точки продуктов (список или сетку). Я должен администратор, что я не использовал много сайтов, используя тег статьи для перечисления продуктов, кроме этого, из которого я получаю вдохновение: http://www.asicsamerica.com/Shop/Footwear/cat/Footwear – Websphere

+0

Интересно.Я до сих пор не думаю, что «статья» была бы лучшим выбором тогда, поскольку, хотя она и делает смысл из контекста, она не будет действительно полной и независимой. Элемент ['aside'] (http://www.w3.org/TR/html5/sections.html#the-aside-element) выглядел бы более уместным ... Но это только мое мнение. –

+0

ОК, спасибо Альваро! поэтому я буду продолжать использовать «li» :) у вас отличный день. Один из последних вопросов: в моем теге 'header', я включаю 'nav' с 1 'ul', который содержит основную навигацию (выравнивается влево), и у меня есть другая 'ul', выровненная вправо, которая содержит 3 ссылки: «учетная запись», «корзина» и значок «поиск». Должны ли эти 3 ссылки быть включены в первый «nav» или я должен создать другой «nav»? – Websphere

0

Просто держать li элементы и добавить product schema из http://schema.org для семантической-разметки

+0

, говоря о схеме продукта, я отключил его из списка продуктов: > «Разметка продукта должна использоваться для определенного продукта, а не для категории продуктов или списка продуктов» [Источник] (https://developers.google.com/structured-data/rich-snippets/products?hl=ru&rd=1#usage) (внизу страницы) – Websphere

+0

@Websphere FYI - Я считаю, что это говорит о том, что вы не будете разметки целого списка как один Продукт, но вы должны пометить каждый элемент в списке как объект, см. https://developers.google.com/search/docs/guides/intro-structured-data#multiple-entities-on-the- same-page –

1

Этих это не вопрос ни того, ни другого.

При использовании ul подходит не имеет никакого отношения к использованию article или нет; и если использование article подходит, это не имеет никакого отношения к использованию ul или нет.

Если содержимое каждого продукта соответствует определению article element, вы должны его использовать.

Если список продуктов соответствует определению ul element, вы должны его использовать.

Вообще говоря, типичный веб-магазин, в котором перечислены некоторые продукты (или тиазеры), с некоторыми контентом/метаданными о продукте, должен использовать article для каждого продукта. Если ul следует использовать, это more opinion-based.

+0

Ну, чем больше я читаю, тем больше меня путают о том, что использовать: / – Websphere

Смежные вопросы