SitePoint Sponsor

User Tag List

Results 1 to 17 of 17

Hybrid View

  1. #1
    webdesign Percept's Avatar
    Join Date
    Jan 2003
    Location
    Belgium
    Posts
    397
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Why <dl> instead of <ul> ?

    I was just checking out the new www.Zeldman.com design and I noticed he used definition lists for his links lists ( at the righthand side ) while I expected unordered lists for this.

    Are there any advantages to use <dl> instead of <ul> for link lists that I'm not awear of ?


  2. #2
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,250
    Mentioned
    59 Post(s)
    Tagged
    3 Thread(s)
    no bullets to override
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  3. #3
    webdesign Percept's Avatar
    Join Date
    Jan 2003
    Location
    Belgium
    Posts
    397
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Erm, that doesn't sounds like a "legal" reason to do this IMHO ( if that's the only reason ).


  4. #4
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Percept
    Erm, that doesn't sounds like a "legal" reason to do this IMHO ( if that's the only reason ).
    LOL! A similar problem just came up for me in several places on a project and used or will use the same 'illegal' fix.

  5. #5
    SitePoint Evangelist ClevaTreva's Avatar
    Join Date
    Jan 2004
    Location
    Chipping Campden, UK
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Percept
    Erm, that doesn't sounds like a "legal" reason to do this IMHO ( if that's the only reason ).
    Hi

    looking at the standards, strictly speaking, neither ul or dl is for a menu list of links.

    However, both allow a url to be included in the li or dd tags. BUT, most folk have stuck to ul's coz they SOUND like they should be used, NOT beacuse standards say they must.

    Indeed, correctly structured, a dl list will validate to xhtml1.0 strict no problems with a link in. But then, a lot of gibberish html could validate but not be 'right'.

    Don't believe me?

    Look at these sample stu nicholls and I did:

    [edit: new address]

    http://209.216.241.33/stus_buttons.html

    There has been (and still is ongoing) a thread just about this demo page (makes me laugh really):

    http://www.sitepoint.com/forums/showthread.php?t=166967

    The big thing for me was how nicely I could use the fact that there are very few widths or heights set, all the dimensions just cascade out from the text in the link, which gets round the text resize problem.





    Trevor
    Last edited by ClevaTreva; May 19, 2004 at 04:02.
    "Good artists copy, great artists steal."
    - Pablo Picasso
    The image of ClevaTreva is drawn by Rhys, and is a GOOD likeness

  6. #6
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,250
    Mentioned
    59 Post(s)
    Tagged
    3 Thread(s)
    truly the only reason? you will have to ask the zeldman yourself

    legal? of course it's legal

    it validates, doesn't it?

    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  7. #7
    webdesign Percept's Avatar
    Join Date
    Jan 2003
    Location
    Belgium
    Posts
    397
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ok, thanks for the answers. I might switch to <dl> myself then.


  8. #8
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Percept
    Are there any advantages to use <dl> instead of <ul> for link lists that I'm not awear of ?
    With a definition list (dl) you get a parent child relation ship between the title (dt) and the data (dd). This is a back-to-front way of looking at headers.

    You might make the title an <h4> or something, and then have the contents in a <p>. Here, the header is "the most important" part.

    In our menu, the title, "links", isn't as important as the links themselves. This means that we could describe the links as "defining" the title, in which case the definition list structure would make the most sense.

    The HTML alos looks better, because the titles are inside the same containing element:

    Code:
    <div id="nav">
      <h4>Title</h4>
      <ul>
        <li><a>Link</a></li>
      </ul>
    </div>
    or

    Code:
    <dl id="nav">
      <dt>Title</dt>
      <dd><a>Link</a></dd>
    </dl>
    I like the second more. It is more compact.

    Finally, this style rule will make a <dd> look just like an <li>:

    Code:
    dl, dt, dd, li, ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    It isn't all that much.

    Regards,
    Douglas
    Hello World

  9. #9
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,250
    Mentioned
    59 Post(s)
    Tagged
    3 Thread(s)
    yes, except DT doesn't mean title, it means term

    and the zed-man uses your compact form, except he doesn't assign an ID to the DL

    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  10. #10
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by r937
    yes, except DT doesn't mean title, it means term
    Douglas = Can't read
    Hello World

  11. #11
    SitePoint Zealot colinr's Avatar
    Join Date
    Aug 2003
    Location
    san francisco, ca
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i still think that sematically ul or ol with li is better.
    navigational links are lists, not terms...
    Web Slave

  12. #12
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,250
    Mentioned
    59 Post(s)
    Tagged
    3 Thread(s)
    web slave, that is arguable

    not that i'm gonna do it, i'm just saying it is arguable
    Code:
    <dl>
    <dt>For Your Pleasure</dt>
    <dd><a href="http://www.pixelhaus.com/new_if/" title="1996 stylie. Table-free design. Tough copy, tangy icons.">Iconfactory blast from the past</a></dd>
    <dd><a href="http://www.moorstation.org/typoasis/designers/steffmann/" title="Some magnificent typefaces in this big, free collection.">Dieter Steffmann fonts</a></dd>
    <dd><a href="http://annevankesteren.nl/archives/2004/04/min-height-in-safari" title="Using the CSS table model to solve browser compatibility problems.">“min-height” in Safari</a></dd>
    <dd><a href="http://www.google.com/search?q=drop+shadow" title="Hat tip: Nirav Sanghavi.">Google: Drop Shadow</a></dd>
    <dd><a href="http://www.iconfactory.com/pixelpal1.asp" title="Art for your desktop.">Iconfactory Pixelpalooza winners</a></dd>
    <dd><a href="http://www.google.com/search?q=daily+report" title="Hat tip: Nirav Sanghavi.">Google: Daily Report</a></dd>
    <dd><a href="http://colleen.typepad.com/first/" title="Cute personal site.">une very stylish fille</a></dd>
    <dd><a href="/pleasure/">» MORE »</a></dd>
    </dl>
    the term is "For your Pleasure"

    the definition of that term is all those links
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  13. #13
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    I'm not going to argue the semantics but typically each <dt> should be paired with an <dd>. It's nearly as bad as 'Listitis' where the headers endup within lists obviously XHTML 2.0 is leaning towards <nl>.

  14. #14
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Holland
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Semantics...

    Although the W3C is less then clear about this, the specification does suggest that there's nothing against pairing one or more dt's with one or more dd's. You could argue however that since a dd can contain block level elements, a number of paragraphs could be a more appropriate way of structuring a multi-part description/definition.
    obviously XHTML 2.0 is leaning towards
    Eh? Can you point me in the direction of the spec that leads you to assume that? I sort of got lost - again... - on the W3C site trying to find drafts of XHTML 2.0.
    Regards,
    Ronald.

  15. #15
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,250
    Mentioned
    59 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by ronaldb66
    ... since a dd can contain block level elements,
    in the zee-man's example, the DD should therefore contain a UL !!!

    whoa
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  16. #16
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Don't hold your breath until 2020 or something but: http://www.w3.org/TR/xhtml2/mod-list.html#sec_11.2 may possibly be the future.

  17. #17
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Holland
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Navigation lists... sigh...

    Robert,

    Thanks for the link; I can't believe I couldn't find it. You're referring to the navigation lists, right? I see possibilities in that, although I have my doubts about the label; I would make it optional, and include it for the other list types as well.
    Regards,
    Ronald.


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
  •