Why do we need to declare the <ul> & <ol> tags in HTML ?

Last Updated : 01 Feb, 2022

The <ul> tag is used to create an unordered list. It is used to make a list in those situations where the ordering of list items is not significant. On the other hand, the <ol> tag is to create an ordered list. As the name implies, it is used in those situations where list items are maintained order-wise. Every list has one or more list elements which are represented using the <li> tag.

In this article, we will learn about the usage of both <ul> and <ol> tags while creating the list in the HTML document.

HTML Unordered List: The <ul> tag is used to create an unordered/bulleted list in the HTML document. It is used to group items of particular information where the order is not important like the menu card of a restaurant, features of a product, etc.

The <ul> tag is paired tag so it must have starting <ul> and closing</ul> tags. The list elements are marked using <li> tag which is empty/unpaired tag i.e., closing </li> tag is optional. These are block elements, so the line break is automatically inserted below and above the tags.

Syntax:

<ul type="disc">
    <li> List element1 </li>
    <li> List element2 </li>
    ...
</ul>

Attribute Values:

disc: solid disc appears before the list element
circle: empty circle appears before the list element
square: solid square appears before the list element
none: noting will appear

Note: If you have not specified any type attribute then by default, a solid disc appears before the list elements.

Example 1: This is a simple example that will illustrate the list in an unordered form.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Unordered List</title> 
</head> 
  
<body> 
    <h2>Unordered List</h2> 
    <ul type="circle"> 
        <li>Computers</li> 
        <li>Science</li> 
        <li>Mathematics</li> 
        <li>Languages</li> 
        <li>Social Sciences</li> 
    </ul> 
</body> 
  
</html>

Output:

Example 2: This example will illustrate the use of a nested form of an unordered list.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Nested Unordered List</title> 
</head> 
  
<body> 
    <h2>Nested Unordered List</h2> 
    <ul type="circle"> 
        <li>Programming Languages 
            <ul type="square"> 
                <li>C++</li> 
                <li>Python</li> 
            </ul> 
        <li>Softwares</li> 
        <ul type="square"> 
            <li>System Software</li> 
            <li>Application Software</li> 
        </ul> 
    </ul> 
</body> 
  
</html>

Output:

HTML Ordered List: The <ol> is used to create an ordered/numbered list in the HTML document. It is used to group items of information in a specific order like instructions to install application software etc.

The <ol> tag is paired tag so it must have starting <ol> and closing</ol> tags. The list elements are marked using <li> tag which is empty/unpaired tag i.e., closing </li> tag is optional. These are block elements, so the line break is automatically inserted below and above the tags.

Syntax:

<ol type="1">
    <li> List element1 </li>
    <li> List element2 </li>
    ...
</ol>

Attribute Values:

number: Numbers will appear before the list element ex: 1, 2, 3.
lowercase letters: Lowercase Letters will appear before the list element ex: a, b, c.
Uppercase letters: Uppercase Letters will appear before the list element ex: A, B, C.
Lowercase Roman: Lowercase Roman will appear before the list element ex: i, ii, iii.
Uppercase Roman: Uppercase Roman will appear before the list element ex: I, II, III.

Note: If you have not specified any type attribute then by default, Numbers will appear before the list elements specified with <li> tag when the webpage is viewed in a web browser.

Example 1: This is a simple example that will illustrate the list in an ordered form.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Ordered List</title> 
</head> 
  
<body> 
    <h2>Ordered List</h2> 
    <ol type="1" start="2"> 
        <li type="a"> Desktop 
        <li type="A" value="6">Laptop 
        <li type="i">Tablet 
        <li type="I">Mobile Phone 
    </ol> 
</body> 
  
</html>

Output:

Example 2: This example will illustrate the use of a nested form of an ordered list.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Nested Ordered List</title> 
</head> 
  
<body> 
    <h2>Nested Ordered List</h2> 
    <ol> 
        <li> Programming Languages 
            <ol type="A"> 
                <li>Python 
                <li>R 
            </ol> 
        <li> Softwares 
            <ol type="I"> 
                <li>System Software 
                <li>Application Software 
            </ol> 
    </ol> 
</body> 
  
</html>

Output:

We can also use both ordered and unordered lists at the same list and create a nested list.

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Nested Ordered and Unordered List</title> 
</head> 
  
<body> 
    <h2>Nested Ordered and Unordered List</h2> 
    <ol> 
        <li> Programming Languages 
            <ol type="i"> 
                <li>Python 
                <li>R 
            </ol> 
        <li> Softwares 
            <ul type="square"> 
                <li>System Software 
                <li>Application Software 
            </ul> 
    </ol> 
</body> 
  
</html>