Block elements inside a product list

Question

Hello.

I have a page which contains a products' list.

I decided to use an unordered list instead of divs to display the products but there is a problem with that, since I can't insert other block level elements in the <li> to achieve some specific design I want (an image with some background, bordered descriptions, floated links etc etc....).

My questions are:

1. Is it possible and semantically correct to use inline elements in the <li> (such as <span>) to achieve such visualisations?
2. Is it semantically correct to use a div instead (and H2, P tags in it)?
3. Generaly, how would you markup a product list in which every product contains:
   1. an image;
   2. the product's name; and
   3. a link "more".

Thanks in advance.

Answer 1

1. <span> is the "tofu of HTML", just like <div>. It can usually be inserted anywhere, but if you wanna be sure, I would suggest your try it out and then have the HTML tested on the W3C validation page.

   Or better even, if you're using Firefox, use the HTML Validator add-on for Firefox. I know it says Windows-only, but on their website, there are version for Linux and OS X aswell.

2. Yes.
3. I would use either an unordered list, like you are doing here, or a Data List.

Answer 2

A supremely semantic way would be a model used on 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>

(On the real site the markup has been remade - and invalidated. My successor isu sing DIV inside LIs instead of SPANs)

This semantic markup is quite heavy, but is super semantic. A search engine or screen reader would work well on it. It allowed us to differentiate parts of the product spec in a list form.

Hopefully the classes give an indication what the CSS is doing. eg.: *.hidden - hides content from screen but not from screen readers, search engines *.red - makes text red *.strikethru - strikes-thru text, to give an illustration of slashed pricing *.title - bolder face

Answer 3

1. The most important part of your HTML is that it makes semantic sense. If you want to display an inline element as a block level element that's perfectly acceptable, provided the HTML behind it makes sense. This is an important part of being able to separate content from presentation.
2. Generally, if you can describe something as a list then it should be an HTML list, either a <ul>, <ol> or <dl>. It's not a strict rule, but a good guideline. If you don't want to follow that guideline then it's ok to use <div>s, as long as you don't put block level elements inside inline elements.

3. Keeping the markup as simple as possible I would say it should look as follows:

   <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>
   

For some additional information on styling <dl>s Max Design's "Definition lists - misused or misunderstood?" has a list of different styles that might be useful.