Ordered and unordered list in HTML with Example

In HTML we can create three different types of lists they are ordered list, unordered list, and definition list. In this article, I am going to discuss ordered and unordered list in HTML with example.

Ordered list in HTML

<p>Programming Language :</p>
<ol> <li> Python</li>
<li> Java</li>
<li> C++</li>
<li> C</li> </ol>

Output:

The ordered list is the order of lists like 1,2,3. It is used to display an order of steps in HTML. To create the order list, we should use the <ol> tag in HTML. It is paired tag and it is a block level tag. If you create an ordered list only and give some text inside it, the list number doesn’t display, so you have to give text inside the List item. To create a list item to the order list, we have to use a tag called as <li>.

<li> tag is used to add the list items to any list. By default order list type is set to a decimal number system. You can add many list items in the order list, it will display automatically in ascending order as in the above output.

Create Roman letter Ordered list in HTML

<p>Programming Language :</p>
<ol type="I">
<li> Python</li>
<li> Java</li>
<li> C++</li>
<li> C</li> </ol>

<p>Search Engine</p>
<ol type="i">
<li> Google</li>
<li> Yahoo</li>
<li> Bing</li>
<li> DuckDuckGo</li> </ol>

Output:

The default type attribute value in an ordered list is “1”. You can use the Roman letter also, you can give value as “i” in the type attribute. The small Roman letter will be displayed as in the above output. You can give also the capital “I” as a value, then capital roman letters will be displayed.

Create Alphabets order list in HTML

<p>Programming Language :</p>
<ol type="A">
<li> Python</li>
<li> Java</li>
<li> C++</li>
<li> C</li> </ol>

<p>Search Engine</p>
<ol type="a">
<li> Google</li>
<li> Yahoo</li>
<li> Bing</li>
<li> DuckDuckGo</li> </ol>

Output: 7

If you add a “type” attribute to the ordered list and give a value as “A” your list will display in upper alphabet order as in the above output. Similarly, if you give the lowercase letter “a” as the value, your list item will display in lowercase order

Unordered list in HTML

The default type for an unordered list is set to disc or filled circle.

How to create an unordered list?

<p>Fruits :</p>
<ul> <li>Apple</li>
<li>Orange</li>
<li>Banana</li>
<li>Mango</li> </ul>

Output:

To create an unordered list, We should use the <ul> tag. It is a paired tag , so you should add opening <ul> and closing </ul> tag. <ul> tag is a block-level tag that also we should remember. To add a list item to the unordered list we are going to use <li> tag as we have used to <li> tag in an ordered list. The <li> tag is also paired tag, so you should add opening <li> and closing </li> tag. In the above code, I have put some text between the opening and closing <li> tag. See the output, the unordered list has some list items. And the list of items is preceded by a symbol, which is a filled circle.

Circle shape unordered list

<p>Fruits :</p>
<ul type="circle">
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
<li>Mango</li> </ul>

Output:

We can create another type of unordered list. The default type for an unorder list is set to disc or filled circle, you can change the type by using the Type attribute. Add “type” attribute to <ul> tag and give value as “circle”, then all list items will change from disc symbol to circle symbol as in above code. You can see the above output here, The unorder list items are preceded by a circle without filling with any color.

Square shape unordered list

<p>Fruits :</p>
<ul type="square">
   <li>Apple</li>
   <li>Orange</li>
   <li>Banana</li>
   <li>Mango</li> </ul>

Output:

We can create also another type of unordered list that is square. If you give the value of “square” for the “type” attribute, then all your list items will be display in a filled square shape as in the above output.

You can create unordered lists in these three different ways in HTML. If you do not want to set any symbol then all you need is you need to mention the type as “none”. If you say type as a none, the list items are not preceded by any symbols or shape. You can also use it in the ordered list if you do not want numbers in list of items

Create your own symbol in the unordered list

<p>Fruits:</p>
<ul type="none">
<li><image src="bullet.jpg"/> Apple</li>
<li><image src="bullet.jpg"/> Orange</li>
<li><image src="bullet.jpg"/> Banana</li>
<li><image src="bullet.jpg"/> Mango</li> </ul>

output: 4

If you want your own symbol to be preceded in list items. You want some specific symbol maybe, you have created some image and can put those images in front of the list items. you should add the symbol bullet.png image to the unordered list. I can use the <image> tag before the list item name as in the above code. Then add src attribute and give image source path with extension ex: bullet.png. See the above output, each list item is preceded by our customiz image. Similarly, you can add your image to the unordered list.

Conclusion

So, hope you guys have understood how we create ordered and unordered list in HTML with example.