Write a program in HTML to demonstrate Order List

<ol> tag is used to show order list follow by numeric list (i.e., 1. / i. / A. ) . The closing tag is </ol> .

Order List using 1 , 2 , 3 , ....

Code :
<ol> 
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
</ol>

Output :

  1. Item 1
  2. Item 2
  3. Item 3

Order List using i , ii , iii , ....

Code :
<ol type="i"> 
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
</ol>

Output :

  1. Item 1
  2. Item 2
  3. Item 3

Order List using A , B , C , ....

Code :
<ol type="A"> 
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
</ol>

Output :

  1. Item 1
  2. Item 2
  3. Item 3

Order List using I , II , III , ....

Code :
<ol type="I"> 
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
</ol>

Output :

  1. Item 1
  2. Item 2
  3. Item 3

Order List using a , b , c , ....

Code :
<ol type="a"> 
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
</ol>

Output :

  1. Item 1
  2. Item 2
  3. Item 3

Order List using Custom Start Value

Code :
<ol start="5"> 
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
</ol>

Output :

  1. Item 1
  2. Item 2
  3. Item 3

Order List using Nested List

Code :
<ol> 
    <li> Item 1
        <ol>
            <li> Subitem 1 </li>
            <li> Subitem 2 </li>
        </ol>
    </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
</ol>

Output :

  1. Item 1
    1. Subitem 1
    2. Subitem 2
  2. Item 2
  3. Item 3

Order List using Custom Values

Code :
<ol> 
    <li value="10"> Item 1 </li>
    <li value="20"> Item 2 </li>
    <li value="30"> Item 3 </li>
</ol>

Output :

  1. Item 1
  2. Item 2
  3. Item 3

Write a program in HTML to demonstrate Unordered List

<ul> tag is used to show unordered list follow by bullet points. The closing tag is </ul> .

Unordered List using Bullet Points

Code :
<ul> 
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
</ul>

Output :

  • Item 1
  • Item 2
  • Item 3

Unordered List using Different Bullet Styles

Code :
<ul style="list-style-type:circle;"> 
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
</ul>

Output :

  • Item 1
  • Item 2
  • Item 3

Unordered List using Nested List

Code :
<ul> 
    <li> Item 1
        <ul>
            <li> Subitem 1 </li>
            <li> Subitem 2 </li>
        </ul>
    </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
</ul>

Output :

  • Item 1
    • Subitem 1
    • Subitem 2
  • Item 2
  • Item 3

Unordered List using Custom Bullet Images

Code :
<ul style="list-style-image:url('');"> 
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
</ul>

Output :

  • Item 1
  • Item 2
  • Item 3

Unordered List using Different Bullet Styles

Code :
<ul style="list-style-type:square;">
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
</ul>

Output :

  • Item 1
  • Item 2
  • Item 3

Unordered List using Custom Start Value

Code :
<ul type="A"> 
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>   
</ul>

Output :

  • Item 1
  • Item 2
  • Item 3

Unordered List using Custom Values

Code :
<ul> 
    <li value="10"> Item 1 </li>
    <li value="20"> Item 2 </li>
    <li value="30"> Item 3 </li>
</ul>

Output :

  • Item 1
  • Item 2
  • Item 3

Combination of Ordered and Unordered List

Code :
<ol> 
    <li> Item 1
        <ul>
            <li> Subitem 1 </li>
            <li> Subitem 2 </li>
        </ul>
    </li>
    <li> Item 2 </li>
    <li> Item 3 </li>   
</ol>

Output :

  1. Item 1
    • Subitem 1
    • Subitem 2
  2. Item 2
  3. Item 3