SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Feb 2003
    Location
    eez
    Posts
    331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    When should I use <ul> and when should I use <ol>?

    Hi!

    When should I use <ul> and when should I use <ol>?

    In fact every single list is ordered in his/her way and at the same time unordered. Confused here.

    Thanks

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2006
    Location
    Melbourne
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <ul> will by default display bullet points. and <ol> displays numbers like 1. 2. 3. etc.

    Is that what you wanted to know? or something else?

  3. #3
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    More accurately...

    <ul> are unordered lists where you are simply listing items in no specific order.
    <ol> are ordered lists where you are listing items in an order.

    And incase you were wondering

    <li> are list items which are nested inside either <ul> or <ol> like so

    Code:
    <ul>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
    </ul>
    I suppose an unordered list would be where you could list navigation whilst an ordered list would be used when listing steps to baking a cake.

    I understand your point though but I'd suggest that unless there's a clear indication that number two in your list follows on from number one in your list then you should use an unordered list.

  4. #4
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by aqw
    When should I use <ul> and when should I use <ol>?
    <ul> is appropriate for most lists. If you have a list where the order is of high importance to the meaning or where you want to emphasize the order, use <ol>. Lists that happen to be in order (for convenience or whatever) but wouldn't really change in semantics if the order was changed should use <ul>.

    From the spec:
    Quote Originally Posted by HTML4
    An ordered list, created using the OL element, should contain information where order should be emphasized, as in a recipe: [...]
    -- http://www.w3.org/TR/html401/struct/lists.html#h-10.1
    Simon Pieters

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it is a semantic choice, and it's quite easy to choose once you know that.

    Can you swap the order of the list items without changing the meaning of the list as a whole? Then it's an UL.

    If the meaning of the list changes when you swap two items, then it's an OL.

    Example 1: Unordered List
    HTML Code:
    <h2>List Types</h2>
    <ul>
      <li>Definition list</li>
      <li>Ordered list</li>
      <li>Unordered list</li>
    </ul>
    We can put the LI elements in any order, and it doesn't change the meaning of the list as a whole. It is still an enumeration of the list types in HTML.

    Example 2: Ordered List
    HTML Code:
    <h2>Battery Replacement</h2>
    <ol>
      <li>Remove battery compartment cover.</li>
      <li>Remove old batteries from compartment.</li>
      <li>Insert new batteries.</li>
      <li>Replace cover.</li>
    </ol>
    In this case, the order is significant. We can't change the order of the LI elements, or the instruction will be incorrect. You cannot insert the new batteries before removing the old ones.
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Addict
    Join Date
    Feb 2003
    Location
    eez
    Posts
    331
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks


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
  •