Home Whiteboard Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to add a list item in HTML?

HTML Web Development Front End Technology

Adding Ordered Unordered Lists

To define a list item in HTML, use the

  • tag
    • . It can be used inside ordered lists (
      )
    , unordered lists (
      )
     and menu lists (

    ). In an ordered list
      , the list items are displayed with numbers or letters. In an unordered list
      , and a menu list
    , the list items are displayed with bullet points.

    Syntax

    Following is the syntax list item in HTML ?

    

  • ???  
    • 


    The list tag also supports the following additional attributes ?
    

    
    
        
    
            Attribute
            Value & Description
        
    
        
    
            
                
    type
    
                		
            
                
    AaIi1disc square circle
    
                
    Specifies the type of the list
    
                		
        
    
        
    
            
                
    value
    
                		
            
                
    Number
    
                
    Specifies the value of a list item
    
                		
        
    
        

    

    Example: Adding Unordered List
    

    This HTML code creates an unordered list with the heading "Rank". The list contains three items: India, Australia, and South Africa, each represented by the 
    

  •  tag within the 
       tag.

    

    

   HTML li Tag


   
    Rank
    
   
    

      
      
    • India
      • 
      
    • Australia
      • 
      
    • South Africa
      • 
   
    




    Example: Adding Ordered List
    

    In this example, we add a list in HTML by assigning values to the attributes of the 
    

    • 

  •  tag. This HTML code creates an ordered list with the heading "The li value attribute." The first item, "Juice," is assigned a value of 200, while the remaining items are listed sequentially.

    

   
    The li value attribute
    
   
      
      
    1. Juice
      2. 
      
    2. Watermelon Juice
      3. 
      
    3. Canbarey Juice
      4. 
      
    4. Lime Juice
      5. 
      
    5. Wine
      6. 
      
    6. Beer
      7. 
   
    



    

    Example: Styled HTML Lists
    

    This HTML code creates ordered and unordered lists with custom styles. The ordered list includes items with different list styles, while the unordered list uses bullet points and squares for list items.
    

    

   
    List type with CSS
    
   
      
      
    1. lemon Juice
      2. 
      
    2. Watermelon Juice
      3. 
      
    3. Mango Juice
      4. 
   
    
   
    

      
      
    • Coffee
      • 
      
    • Tea
      • 
      
    • Milk
      • 
   
    




    Example: Adding Nested List
    

    This HTML code creates a nested list with the heading "List inside another list." The main list contains "Juices," "Vegetables" and "Deserts" as items.
    

    

   
    List inside another list
    
   
    

      
      
    • Juices
      • 
      
    • Vegetables 
        
            
      • Onion
        • 
            
      • Tomatos
        • 
            
      • Curry Leaves
        • 
         
      
      
      • 
      
    • Deserts
      • 
   
    




    Example
    

    Here, this code creates a nested list with the heading "List inside another list." The main list contains "Juices," and "Vegetables" as items.
    

    

   
    List inside another list
    
   
    

      
      
    • Juices
      • 
      
    • Vegetables 
        
            
      • Onion
        • 
            
      • Tomatos
        • 
            
      • Curry Leaves
        • 
            
          
               
        •  Methi leaves
          • 
               
        •  Coriander Leaves
          • 
               
        •  Curry Leaves 
          • 
               
        •  Palal Leaves 
          • 
            
        
         
      
      
      • 
      
    • Deserts
      • 
   
    



    • 
            
    
        
    

        
        
    
            
            
    
            
    
                
    Updated on: 2025-01-23T11:47:56+05:30
    
                
    
                    
    
                        
                    
    
                    
    
                        
     2K+ Views
    
                    
    
                
    
            
    
        
    

    
        
    
        
    
            
            
    Learn More in Our Tutorials
    
        
    
        
    
    
    
    
    
    
        
    
            
    Kickstart Your Career
    
            
    Get certified by completing the course
    
            Get Started
        
    
        
    
    

    
    
    
        
        
    
    

    
    
    
        
    
            
    Advertisements