Post
Ask Question

Overview Of HTML Lists

Introduction

 
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 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.


Similar Articles