Definition lists vs. nested unordered lists

<dl> vs. <ul>

[brok3n]

Hi everyone,

I'm in the process of writing my own e-commerce site using XHTML, CSS, PHP+MySQL.

My product list on the main page is sorted into categories by the type of product or by the brand.

Which would be the more... 'semantically' correct way (ie. true to the purpose of the XHTML tags) to display the data?

... a nested list...

<ul>
 <li><p>Category 1</P>
 <ul>
  <li>Product 1</li>
  <li>Product 2</li>
  <li>Product 3</li>
 </ul>
 </li>
</ul>
<ul>
 <li><p>Category 2</P>
 <ul>
  <li>Product 1</li>
  <li>Product 2</li>
  <li>Product 3</li>
 </ul>
 </li>
</ul>

... or a defintion list ...

<dl>
<dt>Category 1</dt>
<dd>Product 1</dd>
<dd>Product 2</dd>
<dd>Product 3</dd>
<dt>Category 2</dt>
<dd>Product 1</dd>
<dd>Product 2</dd>
<dd>Product 3</dd>
</dl>

...?

The definition list gives me an advantage in that the script i am using to format the output requires a seperation between the category element and the category 'content'. However, It's simple enough to through a <span> tag before a nested list. This is not a deciding factor however, and i would rather build this mechanism around the better of the two listing tags.

Any replies would be appreciated, and thankyou in advance.
b.

[Fotiman]

Semantically speaking, I would think the unordered list approach would be more correct. For example (note, I changed your original example):

<ul> 
 <li> 
  <p>Category 1</p> 
  <ul> 
   <li>Product 1</li> 
   <li>Product 2</li> 
   <li>Product 3</li> 
  </ul> 
 </li> 
 <li> 
  <p>Category 2</p> 
  <ul> 
   <li>Product 1</li> 
   <li>Product 2</li> 
   <li>Product 3</li> 
  </ul> 
 </li> 
</ul> 

vs.

<dl> 
 <dt>Category 1</dt> 
 <dd>Product 1</dd> 
 <dd>Product 2</dd> 
 <dd>Product 3</dd> 
 <dt>Category 2</dt> 
 <dd>Product 1</dd> 
 <dd>Product 2</dd> 
 <dd>Product 3</dd> 
</dl>  

Just looking at these two examples, it becomes much more clear in the unordered list example that the products are children of the category, because they really are children in the heirarchy. But in the <dl> list, the <dt> and <dd> elements are siblings, so it becomes less obvious that the products are children of the category.

I vote for the unordered lists.

[brok3n]

terrific. i did not know you could throw <p> tags directly into a <ul> (ie. not inside a <li> tag).

Thanks very much for the help, Fottiman, have a good one.

[Fotiman]

You can't. Notice in my example that the <p> element is within the <li> element.

[g1smd]

Note too, that the sub-list ul tags are within the li of the parent each time.

Run the page through [validator.w3.org...] as it is very likely that you'll make a typo somewhere in the code. I always make at least one error in these types of structures.