when to use UL or OL in html?

问题:

Seems interchangable?

回答1:

UL means "unordered list". OL means "ordered list".

UL gets you bullet points. OL gets you numbers.

Definitely not interchangable.

回答2:

In math terms (hey, why not?), an <ol> represents a sequence, whereas <ul> represents a set. Rearranging the items in an ordered list changes the list's meaning. Rearranging them in an unordered list does not.

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

回答3:

With <ol> the order of the data is important and will be displayed (by default) while with <ul>, order isn't as 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>

回答4:

One is ordered list (OL), it is for things that have a defined and distinct order. There is a reason behind why they are organized.

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

回答5:

Haha, so many answers!

When HTML first came out, there were OL and UL, which, as all of the other posters have said, meant Ordered List and Unordered List.

The difference was easy. OLs displayed... a number next to them. Or a roman numeral, or a letter! You could even control whether it used capitalized symbols or lowercase! Cool!

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

There was no CSS. Beyond these attributes, there wasn't really a way to customize the list formats (and margins and indententations and everything else.) So, this distinction was important.

Nowadays, its all CSS. In fact, the w3 people want you to use styles rather than the html "type" attribute that you used to use. So, using UL vs OL doesn't really matter, if you are one of them newfangled CSS users.

CSS lets you change the bullet type, or opt to use an image, or change the margins/styles/indentations, or not even display a bullet at all.

Edit again: This answer isn't really meant to address the semantic merits of UL vs OL. But technically (you know, at the bits and bytes) the above outlines the differences in behavior.

回答6:

OL:

1. List item 1
2. List item 2

UL:

• List item 1
• List item 2

OL is ordered list, UL is unordered list

回答7:

I think it's a sematic issue, as the numbering/bullet points can be changed by CSS.

Ordered lists should be things like instructions, or any sequential information.

Unordered lists should be everything else.

回答8:

As the question asks "when to use them", I thought appropriate to offer examples of when, I usually decide to use OL when I want a series of steps, and UL when I want to offer choices:

Ordered list

Here the steps are critical for the business case, we must do the steps in this order, therefore an ordered list is used.

Checkout stages on eCommerce, these steps will be in this order.

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

Unordered list

A user may decide on the order they choose to interact with these choices

<ul>
    <li>Contact Us</li>
    <li>Newsletter Signup</li>
    <li>Terms</li>
    <li>Log out</li>
</ul>

回答9:

Use OL when you're listing steps that need to be done in a certain order. Use UL when you're listing items in no particular order of importance.

回答10:

ul means unorded list. It is for lists in whick it doesn't matter what order the list items are in.

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

By default ul gets you bullet pointed lists and ol numbered lists, although this can be edited in css.

回答11:

In some cases (specifically used by Screen Readers for people with special needs) you may want to have ordered list but not have numbers associated with them due to visual design. Ex. when you've let's say instructions on a page to fill up a form and want screen readers to take advantage of ordered items in the instructions then it will be useful. For all visual purposes they can be made to look exactly the same through CSS. It's the (non-visual, but helpful to screen reader) semantics that are different and at times useful.

回答12:

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

Use OL when you're listing steps that need to be done in a certain order. Use UL when you're listing items in no particular order of importance. By default ul gets you bullet pointed lists and ol numbered lists, although this can be edited in css. thank you ..