Overview Of HTML Lists

In this article you will learn about HTML lists. In HTML, there are the following types of lists: Unordered Lists, Ordered Lists, Definition Lists.

Overview of HTML Lists
 
In HTML, there are the following types of lists:
  • Unordered Lists (<ul>) - The list items are marked with bullets.
  • Ordered Lists (<ol>) - The list items are marked with numbers or letters.
  • Definition Lists(<dl>)- This arranges your items in the same way as they are arranged in a dictionary.
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 take 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 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 name/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