Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorPhey
    • CommentTimeJun 30th 2007
     permalink
    first question is:
    <dl>
    <dt>Hello</dt>
    <dd>Hello all hello all hello all hello all hello all hello all hello all hello all </dd>
    </dl>

    what the most important you think about these code! why use "dl dt dd " not like this example:

    <h3>Hello</h3>
    <p>Hello all hello all hello all hello all hello all hello all hello all hello all </p>

    the second question is:
    for example I've three columns and one row, I used css code for three columns seem like a tabless column that I want to do, if I put some text of paragraph for each column and the result are same height because the long of paragraph all are same, but how to keep same height like liquid column even I add some text. in this case if one of paragraph I add it some text then automatically the div on these columns not same with height, it's very different if I used three column for tabless and all follow for each content... right !!damn
    how does it work?

    thx
    • CommentAuthorvarland
    • CommentTimeJun 30th 2007
     permalink
    I'll tackle the first question… If you're writing copy for a website, you probably don't want to use a definition list. You just have to think about what the tags mean. <dt> means dictionary term; if you want a header welcoming users to your site, you shouldn't call it a dictionary term.
    • CommentAuthordavist11
    • CommentTimeJul 2nd 2007
     permalink

    Actually it’s "definition term", slightly different. I agree though, in that context, it doesn’t make sense to use a dl

  1.  permalink
    DL = definition list (a container)
    DT = Definition term/title
    DD = Definition description

    Here are two examples of proper semantic usage of these elements:

    <dl>
    <dt>Spider-Man</dt>
    <dd>Powers: Spider Sense, strength, agility, wall-crawling</dd>
    <dd>Alter Ego: Peter Parker</dd>
    </dl>

    or...

    <dl>
    <dt>Halloween Party</dt>
    <dd>Come join us at our house for a fun costume party!</dd>
    <dd>123 Main Street</dd>
    <dd>October 31, 2007</dd>
    </dl>
  2.  permalink
    While we are on the subject, I use a definition list when setting out a sites Terms and Conditions. Is the use of it in this context correct?
    • CommentAuthorvarland
    • CommentTimeJul 2nd 2007
     permalink

    How semantic is the Spiderman example given above?

    I would think the following is more semantic:

    <h1>Spiderman</h1>
    <dl>
    <dt>Powers</dt>
    <dd>Spider Sense, strength, agility, wall-crawling</dd>
    <dt>Alter-Ego</dt>
    <dd>Peter Parker</dd>
    </dl>

    Am I the only one?

    In the first example, you're using a <dd> to define Spiderman's powers, not Spiderman. Maybe I'm being too picky, and maybe the <h1> is out of place in my example. I'd love more opinions.

    •  
      CommentAuthoradjustafresh
    • CommentTimeJul 2nd 2007 edited
     permalink
    Varland - I think that the context needs to be considered.

    If the page is a page all about Spiderman, then I think your example is fine. If your page is about several superheroes and descriptions of their abilities and alter-egos then mine works. A combination of the two may be the best solution:

    <h1>Super Heroes</h1>

    <h2>Spiderman</h2>
    <dl>
    <dt>Powers</dt>
    <dd>Spider Sense, strength, agility, wall-crawling</dd>
    <dt>Alter-Ego</dt>
    <dd>Peter Parker</dd>
    </dl>

    <h2>Batman</h2>
    <dl>
    <dt>Powers</dt>
    <dd>Bad-ass, utility belt</dd>
    <dt>Alter-Ego</dt>
    <dd>Bruce Wayne</dd>
    </dl>


    Perhaps the definition term could be used twice as well:

    <dl>
    <dt>Spiderman</dt>
    <dt>Powers</dt>
    <dd>Spider Sense, strength, agility, wall-crawling</dd>
    <dt>Alter-Ego</dt>
    <dd>Peter Parker</dd>
    </dl>
    • CommentAuthordavist11
    • CommentTimeJul 2nd 2007
     permalink
    Yeah, I was thinking that the spiderman example wasn’t that semantic of an example. I think varland’s example is more semantic.
    • CommentAuthorvarland
    • CommentTimeJul 2nd 2007
     permalink

    Perhaps adjust is on to something… How about this:

    <dl>
    <dt>Spiderman</dt>
    <dd>
    <dl>
    <dt>Powers</dt>
    <dd>Spider Sense, strength, agility, wall-crawling</dd>
    <dt>Alter-Ego</dt>
    <dd>Peter Parker</dd>
    </dl>
    </dd>
    <dt>Batman</dt>
    <dd>
    <dl>
    <dt>Powers</dt>
    <dd>Bad-ass, utility belt</dd>
    <dt>Alter-Ego</dt>
    <dd>Brice Wayne</dd>
    </dl>
    </dd>
    </dl>

    Thoughts? I don't even know if it's valid to nest a <dl> in a <dd>… It would render like:

    Spiderman
    Powers
    Spider Sense, strength, agility, wall-crawling
    Alter-Ego
    Peter Parker
    Batman
    Powers
    Bad-ass, utility belt
    Alter-Ego
    Brice Wayne
    • CommentAuthordavist11
    • CommentTimeJul 2nd 2007
     permalink
    Should be perfectly valid. Just the same as nesting a list in a list item.
  3.  permalink
    I think we have a winner. On a side note... We are dorks. :)
    • CommentAuthorPhey
    • CommentTimeJul 3rd 2007
     permalink
    hehehe...you aren't dork...your'e a semantic people hehehe,thanks alot but I'm not agree with nest a <dl> in a <dd>, too many line to put those codes

    How about my second question? is it unclear..
    • CommentAuthoraalaap
    • CommentTimeMar 2nd 2009
     permalink
    I love the nested DLs... I'd vote for those. Has anyone confirmed if they are valid?

    davist11 has a point about the nested DLs being valid just like nested ULs...
  4.  permalink
    I've used Definition Lists in my sites extensively as they are great for structure in terms of page layout and ability to apply a lot of CSS depending on their role in the page structure. When / if CSS is disabled, they also read with logical order as the example posted by Varland demonstrates.

    Also, they validate when nested which is a bonus!
Add your comments
    Username Password
  • Format comments as (Help)