Whats the diff. Between dl,dd,dt and ul li

zoe20 · 01-14-2010, 08:09 AM

hi friends i saw a new element in html dl,dl,dd and i would like to know whats these are when to used them an whats the difference between ul li to dl dd, dt please . please explain me with examples please.

abduraooft · 01-14-2010, 08:48 AM

<ul> - <li> tags are for making an unordered list, in which the individual list items might not have any relationships among, except they fall under a group. But, <dl> is for making a definition list, where we can have a definition title inside <dt> and one or more definition description, for the above title, inside <dd> tags.
Se the examples at http://www.htmldog.com/reference/htmltags/ul/ and http://htmldog.com/reference/htmltags/dl/

bazz · 01-14-2010, 09:08 AM

I just had a thought which may help you (or others), now and later, both in terms of time and computing experience...

an unordered list is like this

Code:

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
</ul>

an ordered list is like this

Code:

<ol>
  <li>list item 1</li>
  <li>list item 2</li>
</ol>

and a definition list (dl) is like this

Code:

<dl>
  <dt>WORD</dt>
    <dd>Meaning</dd>
  <dt>DEFINITION</dt>
    <dd>If I knew what this word meant, I would place the definition here.</dd>
</dl>

The idea I had was that a list (the first two), are just plain old lists. The last one - the definition list (dl) is an associative list where the <dd> tags are associated with the <dt> tag.

Later in your programming - if you do some - you will hear about arrays(lists) and associative arrays (also known as hashes[in Perl]). These dl and ul are a pretty good visual of arrays and hashes and this might go some way in helping poeple to understand them better/more easily, sooner.

bazz

rnd me · 01-15-2010, 02:34 AM

they don't have to be used for definitions.
they are a list of key:value pairs, like fieldset /legend met a list.

i use them extensively for all kinds of things.
a typical example would be as news items on a front page:

Code:

<dl class="events">
 <dt>item title</dt>
 <dd>item text goes here</dd>
</dl>

linehand · 01-15-2010, 04:19 AM

Supported in all major browsers too. Right? I mean technically this should be the case but are there any caveats? "Supported" does not necessarily mean they all handle it in exactly the same manner.

oesxyl · 01-15-2010, 05:48 AM

Quote:

Originally Posted by rnd me

they don't have to be used for definitions.
they are a list of key:value pairs, like fieldset /legend met a list.

this in my opinion is a procedural point of view,

Quote:

i use them extensively for all kinds of things.
a typical example would be as news items on a front page:

Code:

<dl class="events">
 <dt>item title</dt>
 <dd>item text goes here</dd>
</dl>

in my opinion this looks more like a div + h1-6 + p structure then a list of definition, glossar of terms and so on,.

the content decide what it is and if you use "item title" no mater how short is "item text goes here" look like a paragraph with a title.

best regards

oesxyl · 01-15-2010, 05:52 AM

Quote:

Originally Posted by linehand

Supported in all major browsers too. Right? I mean technically this should be the case but are there any caveats? "Supported" does not necessarily mean they all handle it in exactly the same manner.

http://reference.sitepoint.com/html/elements-list

follow the links for each tag and you will find who support what,

it's more or less a opinion but I agree more with abduraooft point of view about this tags.

best regards