Unordered vs ordered lists ?

There are two types of lists in HTML : Ordered List and Unordered list.

ordered lists Tag

Ordered list is a collection of items in a particular order.
Normally in day to day life we see that orders are given to a collection of items in the below way: 

One way:
1. This is amazing.
2. This is lifechanging.
3. This is refreshing.
4. This is exotic.
5. This is beauty.

second way:
a. This is amazing.
b. This is lifechanging.
c. This is refreshing.
d. This is exotic.
e. This is beauty.

third way:
A. This is amazing.
B. This is lifechanging.
C. This is refreshing.
D. This is exotic.
E. This is beauty.

fourth way:
I. This is amazing.
II. This is lifechanging.
III. This is refreshing.
IV. This is exotic.
V. This is beauty.
Now we have five ways of giving orders to a list::
  • With numbers (type="1")
  • With uppercase letters (type="A")
  • With lowercase letters (type="a")
  • With uppercase roman numbers (type="I")
  • With lowercase roman numbers (type="i")

Now the way to use it is below:: 
One way:
<ol type="1">
  <li>This is amazing.</li>
  <li>This is refreshing.</li>
  <li>This is beauty.</li>
</ol>

second way:
<ol type="a">
  <li>This is amazing.</li>
  <li>This is refreshing.</li>
  <li>This is beauty.</li>
</ol>

third way:
<ol type="A">
  <li>This is amazing.</li>
  <li>This is refreshing.</li>
  <li>This is beauty.</li>
</ol>

fourth way:
<ol type="I">
  <li>This is amazing.</li>
  <li>This is refreshing.</li>
  <li>This is beauty.</li>
</ol>

fifth way:
<ol type="i">
  <li>This is amazing.</li>
  <li>This is refreshing.</li>
  <li>This is beauty.</li>
</ol>



Note::
Please do not forget that ordered list or ol tag are block level element. And if you remember, it has top/bottom/right/left extra margins and paddings by default.
FYI :: These extra margins and paddings we need to remove from all block elements and then only UI will be consistent and follow css box model, obviously when we go to css.

Unordered lists Tag

Unordered list (defined by ul tag) is a collection of items without any order identified by bullets in front of list items normally.
These unordered lists can be displayed in 4 ways based on the style of list item marker

1. disc - it will show bullets in front of list item (default behaviour)
2. circle - it will show circle in front of list item
3. square - it will show square in front of list item
4. none - it will show nothing in front of list item

So the way to use it in html itself is shown below. But keep it in mind, we change this property normally through css but here we are applying css through a style attribute, changing list-style-type property to either disc or circle or square or none. 

One way:
<ul style="list-style-type:disc;">
  <li>This is amazing.</li>
  <li>This is refreshing.</li>
  <li>This is beauty.</li>
</ul>

second way:
<ul style="list-style-type:circle;">
  <li>This is amazing.</li>
  <li>This is refreshing.</li>
  <li>This is beauty.</li>
</ul>

third way:
<ul style="list-style-type:square;">
  <li>This is amazing.</li>
  <li>This is refreshing.</li>
  <li>This is beauty.</li>
</ul>

fourth way:
<ul style="list-style-type:none;">
  <li>This is amazing.</li>
  <li>This is refreshing.</li>
  <li>This is beauty.</li>
</ul>



Note::
Please do not forget that Unordered list or ul tag are block level element. And if you remember, it has top/bottom/right/left extra margins and paddings by default.
FYI :: These extra margins and paddings we need to remove from all block elements and then only UI will be consistent and follow css box model, obviously when we go to css.

PrevNext