best way to do nested lists with additional text

[Fre420]

Hi Sitepoint,

I was wondering what the best semantic solution was for this:

I have a listing of specifications of a watercooler.
One of these specifications gets more detailed in a sub list.
Now the question is. Should i put the original list item in a paragraph or not?

without paragraph

<ul>
  <li>
    Multi-functional LCD screen that:
    <ul>
      <li>shows the selected temperature (hot/cold)</li>
      <li>shows if the safete lock is enabled</li>
      <li>shows when to replace the water filter</li>
    </ul>  
  </li>
  <li>self closing electric vaults</li>
  <li>...</li>
</ul>

with paragraph:

<ul>
  <li>
    <p>Multi-functional LCD screen that:</p>
    <ul>
      <li>shows the selected temperature (hot/cold)</li>
      <li>shows if the safete lock is enabled</li>
      <li>shows when to replace the water filter</li>
    </ul>  
  </li>
  <li>self closing electric vaults</li>
  <li>...</li>
</ul>

if you answer, please detail why you'd choose that solution.

thnx, Frederik.

[RyanReese]

Hi

I think that the <p> would be more semantic but honestly it would be unneccessary code: you could just keep the <li> and put the text in there instead of having ANOTHER element (<p>).

Cheers.

[AutisticCuckoo]

It doesn't make semantic sense to have inline-level text at the same structural level as a block-level list, so wrapping the text in a block-level element would make sense. Whether that text is really a paragraph is perhaps debatable, but I'd wrap it in a <p> or a <div>.

[oddz]

<dl>
  <dt>Multi-functional LCD screen that:</dt>
  <dd>
    <ul>
      <li>shows the selected temperature (hot/cold)</li>
      <li>shows if the safete lock is enabled</li>
      <li>shows when to replace the water filter</li>
    </ul>
  </dd>
  <dt>self closing electric vaults</dt>
  <dd>
    <ul> 
      ...
    </ul>
  </dd>
</dl>

[Fre420]

<dl>
  <dt>Multi-functional LCD screen that:</dt>
  <dd>
    <ul>
      <li>shows the selected temperature (hot/cold)</li>
      <li>shows if the safete lock is enabled</li>
      <li>shows when to replace the water filter</li>
    </ul>
  </dd>
  <dt>self closing electric vaults</dt>
  <dd>
    <ul> 
      ...
    </ul>
  </dd>
</dl>

nice hook, but it isn't really a definition of a multi-functional screen. It only shows some options that this type of multi-functional screen has.

[Fre420]

Since AutisticCuckoo already confirmed my assumptions (& this is easier to style with CSS), I'm going to extend this question.

The following is part of a specification list, one where the specification criteria are the same for all products.
every item can have multiple solutions or only one.

for example.
product 1 - possible colors:
white.

product 2 - possible colors:

• white
• black
• grey

The question:
Would it be semantically correct to make a one-item list?
A one item list isn't really a list, but it could be seen as a one item list when you compare it with other content possibilities.

<ul>
  <li>white</li>
</ul>

or

<p>white</p>

thnx for your time, Frederik.

[oddz]

Yeah, I agree they are difficult to style which is why I rarely use them regardless of their semantic connection.

I would use a nested list to keep everything consistent.

<ul class="products">
  <li class="product">product 1
    <ul class="colors">
      <li>white</li>
    </ul>
  </li>
  <li class="product">product 1
    <ul class="colors">
      <li>white</li>
      <li>blue</li>
      <li>red</li>
    </ul>
  </li>
</ul>

[C. Ankerstjerne]

nice hook, but it isn't really a definition of a multi-functional screen. It only shows some options that this type of multi-functional screen has.

The dd of a dl does not have to be the definition of the dt. The HTML 4.01 specification just states that the dd is a subordinate value closely associated with the dt.

[AutisticCuckoo]

The question:
Would it be semantically correct to make a one-item list?

In this case I'd say yes. Each model has a range of colour options, which can be expressed semantically as a list. Some models only have one colour option, so those lists will contain a single list item.

The dd of a dl does not have to be the definition of the dt. The HTML 4.01 specification just states that the dd is a subordinate value closely associated with the dt.

The original semantics of a definition list has been relaxed so that a DL can now be used for things like key/value lists. IIRC some screen readers say 'equals' between the DT and the DD, so I think it's a good idea not to stray too far away from that sort of relationship.

[Fre420]

thnx to all for your answers & confirming my assumptions.

highly appreciated.

[C. Ankerstjerne]

The original semantics of a definition list has been relaxed so that a DL can now be used for things like key/value lists. IIRC some screen readers say 'equals' between the DT and the DD, so I think it's a good idea not to stray too far away from that sort of relationship.

Then those screen readers should be fixed (), though I wouldn't be too concerned about it. I suspect that screen reader users are used to very poor markup, and while an 'equals' would not be entirely logical, it would still get the message across.

I'm currently using definition lists in a couple of ways which are correct with HTML 4.01, but wouldn't be Kosher in the bad old days. My favorite example is photo captions, for which I've developed my own little microformat:

<dl class="photos">
 <dt><img src="..." width="..." height="..." alt=""></dt>
  <dd class="caption">...</dd>
  <dd class="photographer">...</dd>
  <dd class="location">...</dd>
  <dd class="date">0000-00-00</dd>
</dl>

(And yes, it can be debated whether the alt should be used, since the example above essentially relate the dd to an empty dt. On the other hand, if the alt was used, the same information would be read to screen reader users twice.)

[Fre420]

Then those screen readers should be fixed (), though I wouldn't be too concerned about it. I suspect that screen reader users are used to very poor markup, and while an 'equals' would not be entirely logical, it would still get the message across.

I'm currently using definition lists in a couple of ways which are correct with HTML 4.01, but wouldn't be Kosher in the bad old days. My favorite example is photo captions, for which I've developed my own little microformat:

<dl class="photos">
 <dt><img src="..." width="..." height="..." alt=""></dt>
  <dd class="caption">...</dd>
  <dd class="photographer">...</dd>
  <dd class="location">...</dd>
  <dd class="date">0000-00-00</dd>
</dl>

(And yes, it can be debated whether the alt should be used, since the example above essentially relate the dd to an empty dt. On the other hand, if the alt was used, the same information would be read to screen reader users twice.)

I'd go for the figure microformat

<div class="figure">
  <p class="image"><img src="/path/to/img.jpg" width="400" height="602" alt="Lorem ipsum dolor sit amet" /></p>
  <div class="legend">
    <p class="caption">Lorem ipsum dolor sit amet.</p>
    <p class="credit">
      <abbr class="type" title="Photograph">Photo</abbr>
      &copy; <cite>John Doe</cite>
    </p>
  </div>
</div>

http://microformats.org/wiki/figure-examples

[C. Ankerstjerne]

I prefer my version, since the definition list makes it clearer that the caption, citation etc. are subordinate to the photograph. Also, photo is a word by itself, not an abbreviation, even if its derived from another word (http://www.merriam-webster.com/dictionary/photo).