HTML | Lists

What is a list?
A list is a record of short pieces of information, such as people’s names, usually written or printed with a single thing on each line and ordered in a way that makes a particular thing easy to find.

For example:

  • A shopping list
  • To-do list

Lists in HTML

HTML offers three ways for specifying lists of information. All lists must contain one or more list
elements.

The types of lists that can be used in HTML are :

  • ul : An unordered list. This will list items using plain bullets.
  • ol : An ordered list. This will use different schemes of numbers to list your items.
  • dl : A definition list. This arranges your items in the same way as they are arranged in a dictionary.

The Unordered HTML List

An unordered list starts with the “ul” tag. Each list item starts with the “li” tag.The list items are marked with bullets i.e small black circles by default.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<body>
  
<h2>Grocery list</h2>
  
<ul>
  <li>Bread</li>
  <li>Eggs</li>
  <li>Milk</li>
  <li>Coffee</li>
</ul>  
  
</body>
</html>

chevron_right






                        filter_none








Output :

Image




The HTML Unordered List has various List Item Markers:-


    

  1. Disc : Sets the list item marker to a bullet i.e default.

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

    <body> 
    

      
    

    <h2>Unordered List with Disc Bullets</h2> 
    

    <h2>Grocery List</h2> 
    

      
    

    <ul style="list-style-type:disc"> 
    

      <li>Bread</li> 
    

      <li>Eggs</li> 
    

      <li>Milk</li> 
    

      <li>Coffee</li> 
    

    </ul>   
    

      
    

    </body> 
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output :
    
Image
    


    2. 

  2. Circle : Sets the list item marker to a circle.

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

    <body> 
    

      
    

    <h2>Unordered List with Circle Bullets</h2> 
    

      
    

    <h2>Grocery list</h2> 
    

      
    

    <ul style="list-style-type:circle"> 
    

      <li>Bread</li> 
    

      <li>Eggs</li> 
    

      <li>Milk</li> 
    

      <li>Coffee</li> 
    

    </ul>   
    

    </body> 
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output :
    
Image
    


    3. 

  3. Square : Sets the list item marker to a square.

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

    <body> 
    

      
    

    <h2>Unordered List with Square Bullets</h2> 
    

      
    

    <h2>Grocery list</h2> 
    

      
    

    <ul style="list-style-type:square"> 
    

     <li>Bread</li> 
    

      <li>Eggs</li> 
    

      <li>Milk</li> 
    

      <li>Coffee</li> 
    

    </ul> 
    

      
    

    </body> 
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output :
    
Image
    


    4. 



The HTML Ordered List


An ordered list starts with the “ol” tag. Each list item starts with the “li” tag. The list items are marked with numbers by default.

Example:











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!DOCTYPE html> 


<html> 


<body> 


  


<h2>Grocery List</h2> 


  


<ol> 


  <li>Bread</li> 


  <li>Eggs</li> 


  <li>Milk</li> 


  <li>Coffee</li> 


</ol>   


  


</body> 


</html> 



















                        chevron_right







                        filter_none








Output :

Image




The HTML Ordered List has various List Item Markers:


The type attribute of the <ol> tag, defines the type of the list item marker.


    

  1. Type=”1″ : The list items will be numbered with numbers i.e default.

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

    <body> 
    

      
    

    <h2>Ordered List with Numbers</h2> 
    

      
    

    <ol type="1"> 
    

      <li>Bread</li> 
    

      <li>Eggs</li> 
    

      <li>Milk</li> 
    

      <li>Coffee</li> 
    

    </ol>   
    

      
    

    </body> 
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output :
    
Image
    


    2. 

  2. Type=”A” : The list items will be numbered with uppercase letters.

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

    <body> 
    

      
    

    <h2>Ordered List with Letters</h2> 
    

      
    

    <ol type="A"> 
    

      <li>Bread</li> 
    

      <li>Eggs</li> 
    

      <li>Milk</li> 
    

      <li>Coffee</li> 
    

    </ol>   
    

      
    

    </body> 
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output :
    
Image
    


    3. 

  3. Type=”a” : The list items will be numbered with lowercase letters.

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

    <body> 
    

      
    

    <h2>Ordered List with Lowercase Letters</h2> 
    

      
    

    <ol type="a"> 
    

      <li>Bread</li> 
    

      <li>Eggs</li> 
    

      <li>Milk</li> 
    

      <li>Coffee</li> 
    

    </ol>    
    

      
    

    </body> 
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output :
    
Image
    


    4. 

  4. Type=”I” : The list items will be numbered with uppercase roman numbers.

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

    <body> 
    

      
    

    <h2>Ordered List with Roman Numbers</h2> 
    

      
    

    <ol type="I"> 
    

      <li>Bread</li> 
    

      <li>Eggs</li> 
    

      <li>Milk</li> 
    

      <li>Coffee</li> 
    

    </ol>   
    

      
    

    </body> 
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output :
    
Image
    


    5. 

  5. Type=”i” : The list items will be numbered with lowercase roman numbers.

    

    

    

    

    
                                    filter_none
    

    

                                        edit
    
                                    close
    

    

                                        play_arrow
    

    

                                        link
    
                                    brightness_4
    
                                    code
                                
    

    

    

    

    

    

    


    


    

    <!DOCTYPE html> 
    

    <html> 
    

    <body> 
    

      
    

    <h2>Ordered List with Lowercase Roman Numbers</h2> 
    

      
    

    <ol type="i"> 
    

      <li>Bread</li> 
    

      <li>Eggs</li> 
    

      <li>Milk</li> 
    

      <li>Coffee</li> 
    

    </ol>   
    

      
    

    </body> 
    

    </html> 
    

    
    		

    
    

    

    

    

    

    

    
                        chevron_right
    

    

    

    
                        filter_none
    

    

    

    

    Output :
    
Image
    


    6. 



The HTML Description List


A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term name, and the <dd> tag describes each term.

Example:











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!DOCTYPE html> 


<html> 


<body> 


  


<h2>A Description List</h2> 


  


<dl> 


  <dt>Coffee</dt> 


  <dd>- 500 gms</dd> 


  <dt>Milk</dt> 


  <dd>- 1 ltr Tetra Pack</dd> 


</dl> 


  


</body> 


</html> 



















                        chevron_right







                        filter_none








Output :

Image




Nested List in HTML: 


A nested list is a list which has a list inside a list.











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!DOCTYPE html> 


<html> 


<body> 


  


<h2>A Nested List</h2> 


  


<ul> 


  <li>Coffee</li> 


  <li>Tea 


    <ul> 


    <li>Black tea</li> 


    <li>Green tea</li> 


    </ul> 


  </li> 


  <li>Milk</li> 


</ul> 


  


</body> 


</html> 



















                        chevron_right







                        filter_none








Output :

Image





          
          
          
          

            

    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
Image
Shubrodeep Banerjee
I am a technology enthusiast who has a keen interest in programming I am pursuing Engineering in Computer Science from GEU, Dehradun I like to unwind by watching movies and English sitcomsI have a keen interest in music
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.