Introduction

In HTML, there are the following types of lists:
All lists must contain one or more list elements.

Unordered HTML Lists

An unordered list is a collection of related items that have no special order or sequence. An unordered list starts with the <ul> element. Each list item starts with the <li> element.
The list items will be marked with bullets (black circles).
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>HTML Unordered List</title>
  5. </head>
  6. <body>
  7. <ul>
  8. <li>JavaScript</li>
  9. <li>ASP.NET</li>
  10. <li>CSS</li>
  11. <li>HTML</li>
  12. </ul>
  13. </body>
  14. </html>
This will produce the following result.
1
Note
If you not giving any type attribute to the <ul> tag, then this takes the default value (In small black Circles).

The type Attribute

You can use type attribute for <ul> tag to specify the type of bullet you like to use. The fFollowing are the possible options:
  1. <ul type="square">
  2. <ul type="disc">
  3. <ul type="circle">
  4. <ul type="none">

Unordered List with Square Bullets

The following is an example where we used <ul type="square">.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Square Bullets</title>
  5. </head>
  6. <body>
  7. <ul type="square">
  8. <li>Amit</li>
  9. <li>Gagan</li>
  10. <li>Vikram</li>
  11. <li>Mudit</li>
  12. </ul>
  13. </body>
  14. </html>
This will produce the following result.
2

Unordered List with Disc Bullets

The following is an example where we used <ul type="disc">.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Disc Bullets</title>
  5. </head>
  6. <body>
  7. <ul type="disc">
  8. <li>New Delhi</li>
  9. <li>Nagpur</li>
  10. <li>Bareilly</li>
  11. <li>Noida</li>
  12. </ul>
  13. </body>
  14. </html>
This will produce the following result.
3

Unordered List with Circle Bullets

The following is an example where we used <ul type="circle">.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Circle Bullets</title>
  5. </head>
  6. <body>
  7. <ul type="circle">
  8. <li>Mango</li>
  9. <li>Banana</li>
  10. <li>Apple</li>
  11. <li>PineApple</li>
  12. </ul>
  13. </body>
  14. </html>
This will produce the following result.
4

Unordered List without Bullets

The following is an example where we used <ul type="none">: With the use of none the list items will not be marked.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>without Bullets</title>
  5. </head>
  6. <body>
  7. <ul type="none">
  8. <li>MongoDB</li>
  9. <li>SQLServer</li>
  10. <li>MySql</li>
  11. <li>Oracle</li>
  12. </ul>
  13. </body>
  14. </html>
This will produce the following result.
5

Ordered HTML Lists

If you are required to put your items in a numbered list instead of a bullet, then HTML ordered list will be used. This list is created using <ol> tag. The numbering starts at one and is incremented by one for each successive ordered list element starting with the <li> tag.
Example
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>HTML Ordered List</title>
  5. </head>
  6. <body>
  7. <ol>
  8. <li>Beetroot</li>
  9. <li>Ginger</li>
  10. <li>Potato</li>
  11. <li>Radish</li>
  12. </ol>
  13. </body>
  14. </html>
This will produce the following result.
6
Note
If you not giving any type attribute to the <ol> tag, then by default it takes a number.

The type Attribute

You can use type attribute for <ol> tag to specify the type of numbering. By default, it is a number. The following are the options:
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers

Ordered List with Numbers

The following is an example where we used <ol type="1">.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Ordered List with Numbers</title>
  5. </head>
  6. <body>
  7. <ol type="1">
  8. <li>MCA</li>
  9. <li>BCA</li>
  10. <li>B.Tech</li>
  11. <li>BSC</li>
  12. </ol>
  13. </body>
  14. </html>
This will produce the following result.
7

Ordered List with Uppercase Roman Numbers

The following is an example where we used <ol type=" I">.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Uppercase Roman Numbers</title>
  5. </head>
  6. <body>
  7. <ol type="I">
  8. <li>Cricket</li>
  9. <li>Hockey</li>
  10. <li>Footwall</li>
  11. <li>Tennis</li>
  12. </ol>
  13. </body>
  14. </html>
This will produce the following result.
8

Ordered List with Lowercase Roman Numbers

The following is an example where we used <ol type=" i">.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Lowercase Roman Numbers</title>
  5. </head>
  6. <body>
  7. <ol type="i">
  8. <li>India</li>
  9. <li>Nepal</li>
  10. <li>England</li>
  11. <li>Rusia</li>
  12. </ol>
  13. </body>
  14. </html>
This will produce the following result.
9

Ordered List with Uppercase Letters

The following is an example where we used <ol type="A">.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Uppercase Letters </title>
  5. </head>
  6. <body>
  7. <ol type="A">
  8. <li>Tomato</li>
  9. <li>Ginger</li>
  10. <li>Potato</li>
  11. <li>Radish</li>
  12. </ol>
  13. </body>
  14. </html>
This will produce the following result.
10

Ordered List with Lowercase Letters

The following is an example where we used <ol type=" a">.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Lowercase Letters</title>
  5. </head>
  6. <body>
  7. <ol type="a">
  8. <li>HTML is very easy language.</li>
  9. <li>HTML is a Markup Language.</li>
  10. <li> HTML documents are described by HTML tags.</li>
  11. <li> Each HTML tag describes different document content.</li>
  12. </ol>
  13. </body>
  14. </html>
This will produce the following result.
11

The start Attribute

You can use start attribute for <ol> tag to specify the starting point of numbering you need. The following are the possible options:
Type Description
<ol type="1" start="2"> Number starts with 2.
<ol type="I" start="4"> Number starts with IV.
<ol type="i" start="5"> Number starts with v.
<ol type="a" start="3"> Letters starts with c.
<ol type="A" start="6"> Letters starts with F.
The following is an example where we can use all styles.
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>start attribute</title>
  5. </head>
  6. <body>
  7. <ol type="1" start="2">
  8. <li>Beetroot</li>
  9. <li>Ginger</li>
  10. </ol>
  11. <ol type="I" start="4">
  12. <li>Sagar</li>
  13. <li>Meera</li>
  14. </ol>
  15. <ol type="i" start="5">
  16. <li>Microsoft</li>
  17. <li>Facebook</li>
  18. </ol>
  19. <ol type="a" start="3">
  20. <li>Good Boy</li>
  21. <li>Bad Boy</li>
  22. </ol>
  23. <ol type="A" start="6">
  24. <li>Google is a popular search engine.</li>
  25. <li>DuckDuckgo is also a search engine.</li>
  26. </body>
  27. </html>
This will produce the following result.
12

HTML Definition Lists

HTML supports a list style which is called definition lists where entries are listed like in a dictionary. The definition list is the ideal way to present a glossary, list of terms, or other names/value list.
Definition List makes use of the following three tags:
  • <dl> - Defines the start of the list
  • <dt> - A term
  • <dd> - Term definition
  • </dl> - Defines the end of the list
Example
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>HTML Definition Lists</title>
  5. </head>
  6. <body>
  7. <dl>
  8. <dt><b>ASP.NET</b></dt>
  9. <dd>ASP.NET is easy to Learn</dd>
  10. <dt><b>FTP</b></dt>
  11. <dd>This stands for File Transfer Protocol</dd>
  12. </dl>
  13. </body>
  14. </html>
This will produce the following result.
13

Summary

In this article, we learned about HTML Lists.