SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Addict Fre420's Avatar
    Join Date
    Nov 2005
    Location
    Leuven, Belgium
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    best way to do nested lists with additional text

    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
    Code:
    <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:
    Code:
    <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.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>.
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,135
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    HTML Code:
    <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>

  5. #5
    SitePoint Addict Fre420's Avatar
    Join Date
    Nov 2005
    Location
    Leuven, Belgium
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    HTML Code:
    <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.

  6. #6
    SitePoint Addict Fre420's Avatar
    Join Date
    Nov 2005
    Location
    Leuven, Belgium
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    <ul>
      <li>white</li>
    </ul>
    or

    Code:
    <p>white</p>
    thnx for your time, Frederik.

  7. #7
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,135
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    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.

    HTML Code:
    <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>

  8. #8
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Fre420 View Post
    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.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Fre420 View Post
    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.

    Quote Originally Posted by C. Ankerstjerne View Post
    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.
    Birnam wood is come to Dunsinane

  10. #10
    SitePoint Addict Fre420's Avatar
    Join Date
    Nov 2005
    Location
    Leuven, Belgium
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thnx to all for your answers & confirming my assumptions.

    highly appreciated.

  11. #11
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    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:

    Code html4strict:
    <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.)
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  12. #12
    SitePoint Addict Fre420's Avatar
    Join Date
    Nov 2005
    Location
    Leuven, Belgium
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by C. Ankerstjerne View Post
    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:

    Code html4strict:
    <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
    Code html4strict:
    <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

  13. #13
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    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).
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •