Difference Between Ordered List and Unordered List
There are mainly two types of HTML Lists: Ordered List and Unordered List. But the question is, what is the difference between ordered list and an unordered list. Today we will learn all the differences between these two types of lists.
| S.No. | Ordered List | Unordered List |
|---|---|---|
| 1. | Ordered list starts with <ol> tag and ends with </ol> tag. | Unordered list starts with <ul> tag and ends with </ul> tag. |
| 2. | Here the list items are automatically marked with numbers. (e.g 1, 2, 3….) | Here the list items are automatically marked with black dots or bullets. |
| 3. | It is used to represent a specific order or sequence. | It is commonly used for the lists where the order is not significant. |
To understand it clearly, let’s write a code in an example below to see how web browser displays ordered and unordered lists.
Example
<html> <head> </head> <body> <h1>Ordered List VS Unordered List</h1> <!-- Example of an ordered list--> <ol> <li>Item A</li> <li>Item B</li> <li>Item C</li> </ol> <!-- Example of an Unordered list--> <ul> <li>Item A</li> <li>Item B</li> <li>Item C</li> </ul> </body> </html>
Run this code on our free HTML Editor, to clear your doubts about an Ordered and Unordered List.
When to use Ordered and Unordered List
You can use an Ordered list when you want to display the data in a specific order. Like you want to share the steps to cook a recipe. On the other hand, you can use an unordered list, when you want to display the data in a unspecific order. Like you want to share the list of ingredients that are used to make a recipe.
Description Lists
A Description List is also a type of HTML Lists. In a description list, we can provide some extra information about the list term. Like this:
- crus4
- – Learn to Code with crus4
In an above paragraph “crus4” is a list term, and the text “- Learn to Code with crus4” is an additional information about the list term.
In an example below let’s write a code and create a simple description list.
Example
<html> <head> </head> <body> <h1>Create a Description List</h1> <dl> <dt>Computer</dt> <dd>- Computer is an electronic machine</dd> </dl> </body> </html>
You can use description list when you want to add some additional information about the list term. For example, if the list term is hard to understand then you can use the description list to add the additional information about the list term.
Share This Post!
