Блокировать элементы внутри списка товаров

Question

У меня есть страница, которая содержит список продуктов.

Я решил использовать неупорядоченный список вместо div для отображения продуктов, но есть проблема с этим, так как я не могу вставить другие элементы уровня блока в <li> для достижения определенного дизайна, который я хочу (изображение с некоторым фоном, граничными описаниями, плавающими ссылками и т. д. ....).

Мои вопросы:

1. Возможно ли и семантически правильно использовать встроенные элементы в <li> (например, <span>) для достижения такой визуализации?
2. Семантически правильно использовать вместо этого div (и теги H2, P в нем)?
3. Вообще, как бы вы разметили список продуктов, в котором каждый продукт содержит:
   1. изображение;
   2. название товара; и
   3. ссылка "подробнее".

Заранее спасибо.

Answer 1

1. Самая важная часть вашего HTML заключается в том, что он имеет смысловой смысл. Если вы хотите отобразить встроенный элемент как элемент уровня блока, это вполне приемлемо, при условии, что HTML-код за ним имеет смысл. Это важная часть возможности отделить контент от презентации.
2. Как правило, если вы можете описать что-то как список, тогда должно быть списком HTML, либо <ul>, <ol>, либо <dl>. Это не строгое правило, но хорошее руководство. Если вы не хотите следовать этому принципу, тогда можно использовать <div> s, если вы не помещаете элементы уровня блока внутри встроенных элементов.

3. Чтобы сделать разметку максимально простой, я бы сказал, что она должна выглядеть следующим образом:

   <dl>
     <dt>Product name</dt>
     <dd>
       <img src="product.jpg" alt="Product name" />
       Description.
       <a class="read-more" href="#">Read more about Product name</a>
     </dd>
   </dl>
   

Для получения дополнительной информации о стилях <dl> s Max Design "Списки определений - неправильно или неправильно?" содержит список различных стилей, которые могут быть полезны.

Answer 2

В высшей степени семантическим способом была бы модель, используемая на dukevideo.com.

<ol>
   <li>
      <span id="lia">
         <span class="productImage">
            <a href="/Bikes/DVD/American-Chopper/American-Chopper-Series-1.aspx" title="American Chopper Complete Series 1">
               <img src="/images/imageCache/bddc1cee608a8fb5927d6521ff1f0eb0.jpg" alt="American Chopper Complete Series 1" />
            </a>
          </span>
          <span class="price">
          <dl class="prices">
            <dt class="hidden strikethru">Price:</dt>
            <dd class="price red">£29.36</dd>
            <dt class="hidden">Our Price:</dt>
            <dd class="price">£25.36</dd>
          </dl>
       </span>
       <span class="title">
          <a href="/Bikes/DVD/American-Chopper/American-Chopper-Series-1.aspx" title="American Chopper Complete Series 1">American Chopper Complete Series 1
          </a>
       </span>
     </span>
     <span id="lib">
       <input type="image" class="buyLink" src="/images/buy.png" alt="Add to Basket" id="AC1" name="buyProduct_AC1" value="buyProductAC1"  />
     </span>
  </li>

(На реальном сайте разметка была переделана - и признана недействительной. Мой преемник использует DIV внутри LI вместо SPAN)

Эта семантическая разметка довольно тяжелая, но супер семантическая. Поисковая система или программа чтения с экрана хорошо бы с этим справились. Это позволило нам выделить части спецификации продукта в виде списка.

Надеемся, что классы дают представление о том, что делает CSS. например.: * .hidden - скрывает контент с экрана, но не от программ чтения с экрана, поисковых систем * .red - делает текст красным * .strikethru - зачеркнутый текст, чтобы проиллюстрировать урезанную цену * .title - смелая грань

Answer 3

1. <span> - это тофу HTML, как и <div>. Обычно его можно вставить куда угодно, но если вы хотите быть уверенным, я бы посоветовал вам попробовать и затем протестировать HTML на странице проверки W3C .

   Или, что еще лучше, если вы используете Firefox, используйте дополнение HTML Validator для Firefox . Я знаю, что это говорит только для Windows, но на их сайте есть версия для Linux и OS X, а также.

2. Да.
3. Я бы использовал неупорядоченный список, как вы делаете здесь, или Список данных .