When to use UL or OL in html?

Seems interchangeable?

+54
html semantics
Jun 24 '09 at 17:39
source share
12 answers

UL stands for Unordered List. OL stands for "ordered list."

UL gets bullet points. OL gets the numbers.

Definitely not interchangeable.

+71
Jun 24 '09 at 17:40
source share

In mathematical terms (hey, why not?), <ol> represents a sequence, while <ul> represents a set. Reordering items in an ordered list changes the value of the list. There is no reordering them in an unordered list.

This is a good rule of thumb for which the list type is used. If changing the order of the items makes the list incorrect, you want to use <ol> . If the order doesn't matter, use <ul> .

+46
Jun 24 '09 at 18:09
source share

With <ol> data order is important and will be displayed (by default), while with <ul> order is not so important. Example:

 <p>Tomorrow I will</p> <ol> <li>Wake up</li> <li>Have breakfast</li> <li>Go to sleep</li> </ol> <p>During breakfast, I will eat</p> <ul> <li>Butter</li> <li>Eggs</li> <li>Bacon</li> </ul> 
+44
Jun 24 '09 at 17:42
source share

One is an ordered list (OL), this is for things that have a specific and distinct order. There is a reason why they are organized.

The other (UL) is an unordered list, which is just a collection of things in an unspecified order. Their organization is trivial.

+25
Jun 24 '09 at 17:41
source share

Haha, so many answers!

When HTML first appeared, there were OL and UL , which, as all other posters said, means an ordered list and an unordered list.

The difference was simple. OL displayed ... next to them. Or a Roman numeral, or a letter! You could even control if it uses uppercase letters or lowercase letters! Cool!

UL gave you bullets. 3 types of bullets, even - discs (hollow circles), squares (filled squares), circles (filled circles).

There was no CSS. Apart from these attributes, there really was no way to customize the list formats (both margins and indents and everything else). Therefore, this distinction was important.

Currently all of his CSS. In fact, w3 people want you to use styles, not the html attribute of the type you used. So using UL vs OL doesn't really matter if you're one of them - newfangled CSS users.

CSS allows you to change the bullet type or select an image or change the margins / styles / indents or not even display a marker at all.

Edit again: this answer is not really intended to address the semantic merits of UL and OL. But technically (you know, in bits and bytes) the differences in behavior are outlined above.

+17
Jun 24 '09 at 18:06
source share

ETC:

  • List item 1
  • List item 2

UL:

  • List item 1
  • List item 2

OL - ordered list, UL - unordered list

+13
Jun 24 '09 at 17:41
source share

I think this is a semantic problem, since the numbering / marker points can be changed by CSS.

Ordered lists should be like instructions or any consistent information.

Unordered lists should be everything else.

+7
Jun 24 '09 at 17:42
source share

As the question asks the question β€œwhen to use them”, I found it appropriate to offer examples of when I usually decide to use OL, when I want to take a few steps, and UL when I want to offer options:

Ordered list

Here, the steps are critical to the business case, we must follow the steps in that order, so an ordered list is used.

The steps involved in e-commerce, these steps will be in that order.

 <ol> <li>shipping</li> <li>billing</li> <li>summary</li> <li>confirmation</li> </ol> 

Unordered list

The user can decide what order they choose to interact with these options.

 <ul> <li>Contact Us</li> <li>Newsletter Signup</li> <li>Terms</li> <li>Log out</li> </ul> 
+7
May 23 '13 at 13:08
source share

Use OL when listing steps that need to be performed in a specific order. Use UL when listing items without special order of importance.

+3
Jun 24 '09 at 17:51
source share

ul means an unordered list. For lists in whick, it doesn't matter what order the list items are in.

ol means an ordered list. This is for lists that are numbered or in some way show that they have a specific order.

By default, ul receives from you bullet lists and null ol lists, but this can be edited in css.

+1
Jun 24 '09 at 18:41
source share

In some cases (specially used Screen Readers for people with special needs), you may want to order a list, but not have numbers associated with them due to the visual design. Ex. when you allow speaking instructions on a page to fill out a form and want screen readers to take advantage of the ordered elements in instructions, then this will be useful. For all visual purposes, they can be made the same using CSS. This is (non-visual, but useful for reading from the screen) semantics that are different and sometimes useful.

+1
Aug 07 '14 at 12:06 on
source share

http://techuap.com/category/tips/computer-programming-tips

Use OL when listing steps that need to be performed in a specific order. Use UL when you list items without a special order of importance. By default, ul gets your bullet point lists and numbered lists, although this can be edited in css. thank..

+1
07 Oct '15 at 12:42
source share



All Articles