List elment in HTML

List is a critical part in Data representation. There is 3 kind of lists in HTML that you can use to represent list data.

  • Unordered List
  • Ordered List
  • Description List

Unordered List

In an unordered list, the order of the items in the list is not important.
Unordered list is made with <ul> and <li> elements. Let us have a look at the example.

List of fruits:
  • Mango
  • Grapes
  • Orange

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <ul>
            <li>Mango</li>
            <li>Grapes</li>
            <li>Orange</li>
        </ul>
    </body>
</html>
                        

ul{
    padding-left: 40px;
}
                        

In the above example, items in the list have a black dot. You can change the style of the dot using CSS list-style-type. Let us have a look at an example.

List of fruits:
  • Mango
  • Grapes
  • Orange

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <ul class="list-style-circle">
            <li>Mango</li>
            <li>Grapes</li>
            <li>Orange</li>
        </ul>
    </body>
</html>
                        

ul{
    padding-left: 40px;
}
.list-style-circle{
    list-style-type: circle;
}
                        

In above example value of list-style-type is circle. You can try with disc. These two are most used. There are other values of list-style-type.
type attribute was used to change the stype of the list but that attribute is deprecated in unordered list. So use list-style-type.

Nested List

You can have nested list also. Let us have a look at the example.

List of fruits:
  • Mango
  • Grapes
    • Chardonnay
    • Cabernet Sauvignon
    • Malbec
  • Orange

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <ul>
            <li>Mango</li>
            <li>
                Grapes
                <ul class="list-style-circle">
                    <li>Chardonnay</li>
                    <li>Cabernet Sauvignon</li>
                    <li>Malbec</li>
                </ul>
            </li>
            <li>Orange</li>
        </ul>
    </body>
</html>
                        

ul{
    padding-left: 40px;
}
.list-style-circle{
    list-style-type: circle;
}
                        

Ordered List

When order of the items in list is important, then ordered list is used. In HTML, ordered list is created by <ol> and <li> elements. Let us have a look.

List of fruits:
  1. Mango
  2. Grapes
  3. Orange

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <ol>
            <li>Mango</li>
            <li>Grapes</li>
            <li>Orange</li>
        </ol>
    </body>
</html>
                        

ol{
    padding-left: 40px;
}
                        

Default order will be decimal order. If you want to change the style of ordering to Roman, then use css rule list-style-type and its value will be upper-roman. Let us have a look at an example.

List of fruits:
  1. Mango
  2. Grapes
  3. Orange

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <ol class="list-style-roman">
            <li>Mango</li>
            <li>Grapes</li>
            <li>Orange</li>
        </ol>
    </body>
</html>
                        

ol{
    padding-left: 40px;
}
.list-style-roman{
    list-style-type: upper-roman;
}
                        

There are many values of list-style-type according to which, the list will have type. If you provide list-style-type: circle; to ordered list, it will work. And same way, if you provide list-style-type: upper-roman; to unordered list, it will work.
Let us have a look at different value of list-style-type.

value Description
disc disc type list ( default unordered list )
circle circle type list
upper-alpha ordered alphabatically in upper case
lower-alpha ordered alphabatically in lower case
lower-roman ordered using roman letters in uppercase
lower-roman ordered using roman letters in lowercase

Nested List

Same as unordered list, you can nest ordered list. And you can also nest ordered an unordered list.

List of fruits:
  1. Mango
  2. Grapes
    1. Chardonnay
    2. Cabernet Sauvignon
    3. Malbec
  3. Orange

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <ol>
            <li>Mango</li>
            <li>
                Grapes
                <ol class="list-style-roman">
                    <li>Chardonnay</li>
                    <li>Cabernet Sauvignon</li>
                    <li>Malbec</li>
                </ol>
            </li>
            <li>Orange</li>
        </ol>
    </body>
</html>
                        

ol{
    padding-left: 40px;
}
.list-style-roman{
    list-style-type: upper-roman;
}
                        

Now try to nest an ordered list and an unordered list. And one more thing, you can nest as many lists you like, there is no limit :)

Reversed list

reversed attribute reverses the ordered list.

List of fruits:
  1. Mango
  2. Grapes
  3. Orange

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <ol reversed>
            <li>Mango</li>
            <li>Grapes</li>
            <li>Orange</li>
        </ol>
    </body>
</html>
                        

ol{
    padding-left: 40px;
}
                        

Start Attribute

When you want the list number start with particular number, start attribute is used.

List of fruits:
  1. Mango
  2. Grapes
  3. Orange
Line between two list but list continues.
  1. Pinapple
  2. Apple

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <ol>
            <li>Mango</li>
            <li>Grapes</li>
            <li>Orange</li>
        </ol>
        Line between two list but list continues.
        <ol start="4">
            <li>Pinapple</li>
            <li>Apple</li>
        </ol>
    </body>
</html>
                        

ol{
    padding-left: 40px;
}
                        

Type Attribute

type attribute is deprecated for unordered list but for ordered list, it is added in HTML5. It was deprecated in HTML4.0.
We will not have an example. Just its values and what does it represents?

]
Attribute Description
type='a' lowercase letters same as list-style-type:lower-alpha
type='A' uppercase letters same as list-style-type:upper-alpha
type='i' lowercase Roman same as list-style-type:lower-roman
type='I' uppercase roman same as list-style-type:upper-roman
type='1' default decimal same as list-style-type:decimal

Description Lists

When an item needs a description in the list, you can use description list in HTML. Description list is created by <dl>, <dt> and <dd>. Let us have a look at an example.

Technologies:
HTML
Creates a structure of the web page
CSS
Adds style to the web page
JavaScript
Adds interactivity in web page

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        Technologies:
        <dl>
            <dt>HTML</dt>
            <dd>Creates a structure of the web page</dd>
            <dt>CSS</dt>
            <dd>Adds style to the web page</dd>
            <dt>JavaScript</dt>
            <dd>Adds interactivity in web page</dd>
        </dl>
    </body>
</html>
                        

dt{
    font-weight: bold;
}
dd{
    padding-left: 20px;
}
                        

We have added padding-left: 20px to <dd> and font-weight: bold to <dt> to make it more elegant.

Conclusion

In this section, we have learned about lists and its attributes.
In next section, we will learn about links in HTML.