DEV Community

Saud Ur Rehman
Saud Ur Rehman

Posted on

Type of Lists in HTML

There are three types of Lists in HTML:

  1. Ordered List
  2. UnOrdered List
  3. Definition List
  4. Nested List

Note:Nested List is not a type of list but we call the merges list as Nested List

1.Ordered List

In Ordered List all the items are in a specific ordered...
There are 5 list-style type of Ordered list

A-for capital

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Enter fullscreen mode Exit fullscreen mode

A. Coffee
B. Tea
C. Milk

a - for small letter

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Enter fullscreen mode Exit fullscreen mode

a. Coffee
b. Tea
c. Milk

I - For Big Roman

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Juice</li>
</ol>
Enter fullscreen mode Exit fullscreen mode

I. Coffee
II. Tea
III. Milk
IV. Juice

i - For Small Roman

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  <li>Jauce</li>
</ol>
Enter fullscreen mode Exit fullscreen mode

i. Coffee
ii. Tea
iii. Milk
iv. Jauice

1 - For Numeric(By Dafualt)

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Enter fullscreen mode Exit fullscreen mode
  1. Coffee
  2. Tea
  3. Milk

2.Unordered List

In Unordered List there is no specific Order...
There are three list-style type in unordered List

  • disc - By Dafault (Filled Dark Circle)
<ul style="disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Enter fullscreen mode Exit fullscreen mode
  • circle - Empty Circles
<ul style="list-style-type:square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Enter fullscreen mode Exit fullscreen mode
  • square - Rectangular Square
<ul style="list-style-type:square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Enter fullscreen mode Exit fullscreen mode
  • none - mostly used in navbar
<ul style="list-style-type:none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)