locked
HTML - dl vs ul RRS feed

  • Question

  • User1241685987 posted

    Hello,

    What are differences between dl and <g class="gr_ gr_58 gr-alert gr_gramm gr_inline_cards gr_run_anim Style multiReplace" id="58" data-gr-id="58">ul ?</g>

    Thanks

    <dl>
    <dt>Item one</dt>
    <dd>Item two</dd>
    </dl>

    <ul>
    <li>Item one
    <ul>Item two</ul>
    </li>
    </ul>

    Friday, April 13, 2018 11:25 PM

Answers

  • User1497757439 posted

    There are three types of list in HTML:

    • <ul>- Unordered list
    • <ol>- Ordered list
    • <dl>- Definition list.

    HTML - Unordered list

    An Unordered list start with the <ul> tag. Each list item starts with the <li> tag.

    The list standard value gave by the majority of the browsers are bullets.


    Example

     <ul>
        <li>Sunday</li>
        <li>Monday</li>
        <li>Tuesday</li>
        <li>Wednesday</li>
        <li>Thursday</li>
        <li>Friday</li>
        <li>Saturday</li>
     </ul>
    

    Result

    • Sunday
    • Monday
    • Tuesday
    • Wednesday
    • Thursday
    • Friday
    • Saturday

    There are following Unordered list bullet options:

    • disc
    • circle
    • square


    Example

    Makes a bulleted list using the default bullet type : 
    <ul>
        <li>Sunday</li>
        <li>Monday</li>
        <li>Tuesday</li>
        <li>Wednesday</li>
        <li>Thursday</li>
        <li>Friday</li>
        <li>Saturday</li>
    </ul>
    Starts a bulleted list using discs as bullets :
    <ul type="disc">
        <li>Sunday</li>
        <li>Monday</li>
        <li>Tuesday</li>
        <li>Wednesday</li>
        <li>Thursday</li>
        <li>Friday</li>
        <li>Saturday</li>
    </ul>
    Starts a bulleted list using circles as bullets :
    <ul type="circle">
        <li>Sunday</li>
        <li>Monday</li>
        <li>Tuesday</li>
        <li>Wednesday</li>
        <li>Thursday</li>
        <li>Friday</li>
        <li>Saturday</li>
    </ul>
    Starts a bulleted list using circles as square  :
    <ul type="square">
        <li>Sunday</li>
        <li>Monday</li>
        <li>Tuesday</li>
        <li>Wednesday</li>
        <li>Thursday</li>
        <li>Friday</li>
        <li>Saturday</li>
    </ul>
                             

    Result

    Makes a bulleted list using the default bullet type :
    • Sunday
    • Monday
    • Tuesday
    • Wednesday
    • Thursday
    • Friday
    • Saturday
    Starts a bulleted list using discs as bullets :
    • Sunday
    • Monday
    • Tuesday
    • Wednesday
    • Thursday
    • Friday
    • Saturday
    Starts a bulleted list using circles as bullets :
    • Sunday
    • Monday
    • Tuesday
    • Wednesday
    • Thursday
    • Friday
    • Saturday
    Starts a bulleted list using circles as square :
    • Sunday
    • Monday
    • Tuesday
    • Wednesday
    • Thursday
    • Friday
    • Saturday

    HTML - Ordered list

    An ordered list start with the <ol> tag.
    Each list item starts with the <li> tag. 
    The list standard value gave by the majority of the browsers are numbers.

    We have the following ordered list options:

    • Plain numbers
    • Capital Letters
    • Small Letters
    • Capital Roman Numbers
    • Small Roman Numbers

    In addition to these options, we can specify from which number the list should start. The default start value for numbered lists is at number one (or the letter A).


    Example

    Makes a numbered list using the default number type : 
    <ol>
        <li>Sunday</li>
        <li>Monday</li>
        <li>Tuesday</li>
        <li>Wednesday</li>
        <li>Thursday</li>
        <li>Friday</li>
        <li>Saturday</li>
    </ol>
    Starts a numbered list, from 3 :
    <ol start="3">
        <li>Sunday</li>
        <li>Monday</li>
        <li>Tuesday</li>
        <li>Wednesday</li>
        <li>Thursday</li>
        <li>Friday</li>
        <li>Saturday</li>
    </ol>
    Starts a numbered list, using capital letters :
    <ol type="A">
        <li>Sunday</li>
        <li>Monday</li>
        <li>Tuesday</li>
        <li>Wednesday</li>
        <li>Thursday</li>
        <li>Friday</li>
        <li>Saturday</li>
    </ol>
    Starts a numbered list, using small letters :
    <ol type="a">
        <li>Sunday</li>
        <li>Monday</li>
        <li>Tuesday</li>
        <li>Wednesday</li>
        <li>Thursday</li>
        <li>Friday</li>
        <li>Saturday</li>
    </ol>
    Starts a numbered list, using capital roman numbers :
    <ol type="I">
        <li>Sunday</li>
        <li>Monday</li>
        <li>Tuesday</li>
        <li>Wednesday</li>
        <li>Thursday</li>
        <li>Friday</li>
        <li>Saturday</li>
    </ol>
    Starts a numbered list, using small roman numbers :
    <ol type="i">
        <li>Sunday</li>
        <li>Monday</li>
        <li>Tuesday</li>
        <li>Wednesday</li>
        <li>Thursday</li>
        <li>Friday</li>
        <li>Saturday</li>
    </ol>
                             

    Result

    Makes a numbered list using the default number type :
    1. Sunday
    2. Monday
    3. Tuesday
    4. Wednesday
    5. Thursday
    6. Friday
    7. Saturday
    Starts a numbered list, from 3 :
    1. Sunday
    2. Monday
    3. Tuesday
    4. Wednesday
    5. Thursday
    6. Friday
    7. Saturday
    Starts a numbered list, using capital letters :
    1. Sunday
    2. Monday
    3. Tuesday
    4. Wednesday
    5. Thursday
    6. Friday
    7. Saturday
    Starts a numbered list, using small letters :
    1. Sunday
    2. Monday
    3. Tuesday
    4. Wednesday
    5. Thursday
    6. Friday
    7. Saturday
    Starts a numbered list, using capital roman numbers :
    1. Sunday
    2. Monday
    3. Tuesday
    4. Wednesday
    5. Thursday
    6. Friday
    7. Saturday
    Starts a numbered list, using small roman numbers :
    1. Sunday
    2. Monday
    3. Tuesday
    4. Wednesday
    5. Thursday
    6. Friday
    7. Saturday

    HTML - Definition list

    A definition list start with the<dl> tag. 
    The <dt>tag defines the term (name).
    the <dd> tag defines the data (definition or description).


    Example

    <dl>
        <dt>One</dt>
        <dd>One  definition </dd>
        <dt>Two</dt>
       <dd>Two  definition </dd>
    </dl>              

    Result

    One
    One definition
    Two
    Two definition
    please visit http://www.tutorialplus.net/Articles/html-working-with-lists.htm
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 16, 2018 11:44 AM

All replies

  • User753101303 posted

    Hi,

    See https://www.w3schools.com/TAGS/tag_dl.asp and https://www.w3schools.com/TAGS/tag_ul.asp or any HTML reference.

    dl is a list of definitions. ul is a general list (which could be nested). It shoud be <ul><li>Item two</li></ul>

    Saturday, April 14, 2018 10:25 AM
  • User-1838255255 posted

    Hi life24,

    According to your description, as far as i know, the dl full name is definition list, we use it like this: 

     dl snippet code: 

    <dl>
       <dt>Computer</dt>
       <dd>machine for calculate ... ...</dd>
       <dt>monitor </dt>
       <dd>machine that show information through view ... ...</dd>
    </dl>

    ul full name is unordered list, we usually use it like this:

    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>

    Best Regards,

    Eric Du 

    Monday, April 16, 2018 3:14 AM
  • User-369506445 posted

    hi

    A <dl> is a definition list. It should be used in such a case as, perhaps, a dictionary:

    <dl>
     <dt>Thesaurus</dt>
     <dd>A book for finding synonyms of other words, often alphabetical. Similar to a dictionary.</dd>
    </dl>

    A <ul> is an unordered list. Now, a <dl> does not imply any order to its contents, but it does imply a semantic relation between its children. A <ul>, however, could contain anything that is not ordered

    UL: Unordered list, created with the UL element.

    DL Definition lists, created using the DL element, generally consist of a series of term/definition pairs (although definition lists may have other applications). Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words.

    Definition lists - DT for term, DD for its definition

    Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term and a description. The term is given by the DT element and is restricted to inline content. The description is given with a DD element that contains block-level content

     

    See these pages:

    Monday, April 16, 2018 6:07 AM
  • User1497757439 posted

    There are three types of list in HTML:

    • <ul>- Unordered list
    • <ol>- Ordered list
    • <dl>- Definition list.

    HTML - Unordered list

    An Unordered list start with the <ul> tag. Each list item starts with the <li> tag.

    The list standard value gave by the majority of the browsers are bullets.


    Example

     <ul>
        <li>Sunday</li>
        <li>Monday</li>
        <li>Tuesday</li>
        <li>Wednesday</li>
        <li>Thursday</li>
        <li>Friday</li>
        <li>Saturday</li>
     </ul>
    

    Result

    • Sunday
    • Monday
    • Tuesday
    • Wednesday
    • Thursday
    • Friday
    • Saturday

    There are following Unordered list bullet options:

    • disc
    • circle
    • square


    Example

    Makes a bulleted list using the default bullet type : 
    <ul>
        <li>Sunday</li>
        <li>Monday</li>
        <li>Tuesday</li>
        <li>Wednesday</li>
        <li>Thursday</li>
        <li>Friday</li>
        <li>Saturday</li>
    </ul>
    Starts a bulleted list using discs as bullets :
    <ul type="disc">
        <li>Sunday</li>
        <li>Monday</li>
        <li>Tuesday</li>
        <li>Wednesday</li>
        <li>Thursday</li>
        <li>Friday</li>
        <li>Saturday</li>
    </ul>
    Starts a bulleted list using circles as bullets :
    <ul type="circle">
        <li>Sunday</li>
        <li>Monday</li>
        <li>Tuesday</li>
        <li>Wednesday</li>
        <li>Thursday</li>
        <li>Friday</li>
        <li>Saturday</li>
    </ul>
    Starts a bulleted list using circles as square  :
    <ul type="square">
        <li>Sunday</li>
        <li>Monday</li>
        <li>Tuesday</li>
        <li>Wednesday</li>
        <li>Thursday</li>
        <li>Friday</li>
        <li>Saturday</li>
    </ul>
                             

    Result

    Makes a bulleted list using the default bullet type :
    • Sunday
    • Monday
    • Tuesday
    • Wednesday
    • Thursday
    • Friday
    • Saturday
    Starts a bulleted list using discs as bullets :
    • Sunday
    • Monday
    • Tuesday
    • Wednesday
    • Thursday
    • Friday
    • Saturday
    Starts a bulleted list using circles as bullets :
    • Sunday
    • Monday
    • Tuesday
    • Wednesday
    • Thursday
    • Friday
    • Saturday
    Starts a bulleted list using circles as square :
    • Sunday
    • Monday
    • Tuesday
    • Wednesday
    • Thursday
    • Friday
    • Saturday

    HTML - Ordered list

    An ordered list start with the <ol> tag.
    Each list item starts with the <li> tag. 
    The list standard value gave by the majority of the browsers are numbers.

    We have the following ordered list options:

    • Plain numbers
    • Capital Letters
    • Small Letters
    • Capital Roman Numbers
    • Small Roman Numbers

    In addition to these options, we can specify from which number the list should start. The default start value for numbered lists is at number one (or the letter A).


    Example

    Makes a numbered list using the default number type : 
    <ol>
        <li>Sunday</li>
        <li>Monday</li>
        <li>Tuesday</li>
        <li>Wednesday</li>
        <li>Thursday</li>
        <li>Friday</li>
        <li>Saturday</li>
    </ol>
    Starts a numbered list, from 3 :
    <ol start="3">
        <li>Sunday</li>
        <li>Monday</li>
        <li>Tuesday</li>
        <li>Wednesday</li>
        <li>Thursday</li>
        <li>Friday</li>
        <li>Saturday</li>
    </ol>
    Starts a numbered list, using capital letters :
    <ol type="A">
        <li>Sunday</li>
        <li>Monday</li>
        <li>Tuesday</li>
        <li>Wednesday</li>
        <li>Thursday</li>
        <li>Friday</li>
        <li>Saturday</li>
    </ol>
    Starts a numbered list, using small letters :
    <ol type="a">
        <li>Sunday</li>
        <li>Monday</li>
        <li>Tuesday</li>
        <li>Wednesday</li>
        <li>Thursday</li>
        <li>Friday</li>
        <li>Saturday</li>
    </ol>
    Starts a numbered list, using capital roman numbers :
    <ol type="I">
        <li>Sunday</li>
        <li>Monday</li>
        <li>Tuesday</li>
        <li>Wednesday</li>
        <li>Thursday</li>
        <li>Friday</li>
        <li>Saturday</li>
    </ol>
    Starts a numbered list, using small roman numbers :
    <ol type="i">
        <li>Sunday</li>
        <li>Monday</li>
        <li>Tuesday</li>
        <li>Wednesday</li>
        <li>Thursday</li>
        <li>Friday</li>
        <li>Saturday</li>
    </ol>
                             

    Result

    Makes a numbered list using the default number type :
    1. Sunday
    2. Monday
    3. Tuesday
    4. Wednesday
    5. Thursday
    6. Friday
    7. Saturday
    Starts a numbered list, from 3 :
    1. Sunday
    2. Monday
    3. Tuesday
    4. Wednesday
    5. Thursday
    6. Friday
    7. Saturday
    Starts a numbered list, using capital letters :
    1. Sunday
    2. Monday
    3. Tuesday
    4. Wednesday
    5. Thursday
    6. Friday
    7. Saturday
    Starts a numbered list, using small letters :
    1. Sunday
    2. Monday
    3. Tuesday
    4. Wednesday
    5. Thursday
    6. Friday
    7. Saturday
    Starts a numbered list, using capital roman numbers :
    1. Sunday
    2. Monday
    3. Tuesday
    4. Wednesday
    5. Thursday
    6. Friday
    7. Saturday
    Starts a numbered list, using small roman numbers :
    1. Sunday
    2. Monday
    3. Tuesday
    4. Wednesday
    5. Thursday
    6. Friday
    7. Saturday

    HTML - Definition list

    A definition list start with the<dl> tag. 
    The <dt>tag defines the term (name).
    the <dd> tag defines the data (definition or description).


    Example

    <dl>
        <dt>One</dt>
        <dd>One  definition </dd>
        <dt>Two</dt>
       <dd>Two  definition </dd>
    </dl>              

    Result

    One
    One definition
    Two
    Two definition
    please visit http://www.tutorialplus.net/Articles/html-working-with-lists.htm
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 16, 2018 11:44 AM