List Html codes

List Html code

Html List Codes: 

---

The role of a listing on a web page is very important. The list is created for various reasons. Listing makes it easy to sort data or content. This allows data to be sorted in alignment. Listing helps in creating different lists. There are two types of lists in HTML. First is Unordered HTML List and second is Ordered HTML List. Unordered HTML List, This list arranges the data as unordered. Ordered HTML List, This list arranges the data as ordered. A tag is used to create the list. The tag is HTML <li> tag. But two types list unordered and ordered most be used any type of list. The unordered tag is <ul> and ordered <ol> tag. This tag has to be used with both <li> when creating a list We can use this <li> tag only single way.

---

Html List Codes 1:

<ul> <li>HTML List 1</li> <li>HTML List 2</li> <li>HTML List 3</li> <li>HTML List 4</li> <li>HTML List 5</li> </ul>

Result:

• HTML List 1
• HTML List 2
• HTML List 3
• HTML List 4
• HTML List 5

This list is unordered list. This list is not have count but it's have to marked unordered icon

---

Html List Codes 2:

<ol> <li>HTML List</li> <li>HTML List</li> <li>HTML List</li> <li>HTML List</li> <li>HTML List</li> </ol>

Result:

1. HTML List
2. HTML List
3. HTML List
4. HTML List
5. HTML List

This list is ordered list. This list have count System the number of list. like 1, 2, 3, 4, 5. It's depend how much you have to add your list.

---

Html List Codes 3:

<h2> HTML Unordered List</h2> <ul> <li>HTML List 1</li> <li>HTML List 2</li> <li>HTML List 3</li> <li>HTML List 4</li> <li>HTML List 5</li> </ul> <h2> HTML Ordered List</h2> <ol> <li>HTML List</li> <li>HTML List</li> <li>HTML List</li> <li>HTML List</li> <li>HTML List</li> </ol>

Result:

HTML Unordered List

• HTML List 1
• HTML List 2
• HTML List 3
• HTML List 4
• HTML List 5

HTML Ordered List

1. HTML List
2. HTML List
3. HTML List
4. HTML List
5. HTML List

There are two type list in this code. first is unordered and second is ordered list.

---

Html List Codes 4:

<h2> <span style="color: blue;">HTML Unordered List</span></h2> <ul> <li><span style="color: #073763;">HTML List</span></li> <li><span style="color: #073763;">HTML List</span></li> <li><span style="color: #073763;">HTML List</span></li> <li><span style="color: #073763;">HTML List</span></li> <li><span style="color: #073763;">HTML List</span></li> </ul> <h2> <span style="color: purple;">HTML Ordered List</span></h2> <ol> <li><span style="color: #4c1130;">HTML List</span></li> <li><span style="color: #4c1130;">HTML List</span></li> <li><span style="color: #4c1130;">HTML List</span></li> <li><span style="color: #4c1130;">HTML List</span></li> <li><span style="color: #4c1130;">HTML List</span></li> </ol>

Result:

HTML Unordered List

• HTML List
• HTML List
• HTML List
• HTML List
• HTML List

HTML Ordered List

1. HTML List
2. HTML List
3. HTML List
4. HTML List
5. HTML List

 This Two type list used with different color.

---

Html List Codes 5:

<h2> <span style="background-color: yellow;">HTML Unordered List</span></h2> <ul> <li><span style="background-color: yellow;">HTML List</span></li> <li><span style="background-color: yellow;">HTML List</span></li> <li><span style="background-color: yellow;">HTML List</span></li> <li><span style="background-color: yellow;">HTML List</span></li> <li><span style="background-color: yellow;">HTML List</span></li> </ul> <h2> <span style="background-color: lime;">HTML Ordered List</span></h2> <ol> <li><span style="background-color: lime;">HTML List</span></li> <li><span style="background-color: lime;">HTML List</span></li> <li><span style="background-color: lime;">HTML List</span></li> <li><span style="background-color: lime;">HTML List</span></li> <li><span style="background-color: lime;">HTML List</span></li> </ol>

Result:

HTML Unordered List

• HTML List
• HTML List
• HTML List
• HTML List
• HTML List

HTML Ordered List

1. HTML List
2. HTML List
3. HTML List
4. HTML List
5. HTML List

This Two type list used with different background color.

---

Html List Codes 6:

<h2> HTML Unordered List</h2> <ul> <table border="1"> <tr> <td> <li>HTML List</li> </td> </tr> <tr> <td> <li>HTML List</li> </td> </tr> <tr> <td> <li>HTML List</li> </td> </tr> <tr> <td> <li>HTML List</li> </td> </tr> <tr> <td> <li>HTML List</li> </td> </tr> </table> </ul> <h2> HTML Ordered List</h2> <ol> <table border="1"> <tr> <td> <li>HTML List</li> </td> </tr> <tr> <td> <li>HTML List</li> </td> </tr> <tr> <td> <li>HTML List</li> </td> </tr> <tr> <td> <li>HTML List</li> </td> </tr> <tr> <td> <li>HTML List</li> </td> </tr> </table> </ol>

Result:

HTML Unordered List

HTML List

HTML List

HTML List

HTML List

HTML List

HTML Ordered List

HTML List

HTML List

HTML List

HTML List

HTML List

This HTML list inside a table one sell and one border. but list icon outside the table.

---

Html List Codes 7:

<body style="background-color:Cyan;"><h2> HTML Unordered List</h2> <ul> <li>HTML List</li> <li>HTML List</li> <li>HTML List</li> <li>HTML List</li> <li>HTML List</li> </ul> <h2> HTML Ordered List</h2> <ol> <li>HTML List</li> <li>HTML List</li> <li>HTML List</li> <li>HTML List</li> <li>HTML List</li> </ol> </body>
This may not appear correctly, so check it. Check.

Result:

HTML Unordered List

• HTML List 1
• HTML List 2
• HTML List 3
• HTML List 4
• HTML List 5

HTML Ordered List

1. HTML List
2. HTML List
3. HTML List
4. HTML List
5. HTML List

This HTML list body background color changed but stile is not displaying. please check it.

---

You can use the HTML <li>, <ul>, <ol> making any type of list.