Lists are used to group related contents together in a structured manner to make content easy to read and understand.
Unordered Lists
The <ul>
element is used to create an unordered list, which is a list of elements that are not numbered or ordered in any particular way. Each item in the list is represented by a <li>
element.
Here is an example.
12345<ul>
<li>Fruits</li>
<li>Water</li>
<li>Beach</li>
</ul>
This is the output of the code.
![](/service/media/topic/ef63c0d5-e072-4299-b74d-fc98260da41f/UX500_11_en-US_media/UX500_11_en-US_images/UX500_11_Ul_List.png)
Ordered List
The <ol>
element is used to create an ordered list, which is a list of items that are numbered or ordered in some way. Each item in the list is represented by an <li>
element. Here's an example:
12345<ol>
<li>Fruits</li>
<li>Water</li>
<li>Beach</li>
</ol>
The markup structure is the same as for unordered lists, except that you have to wrap the list items in an <ol>
element.
This is the output of the code.
![](/service/media/topic/ef63c0d5-e072-4299-b74d-fc98260da41f/UX500_11_en-US_media/UX500_11_en-US_images/UX500_11_OL_List.png)
There are other types of list that we would not discuss here.
You can also nest lists within each other by placing one list inside another.