HTML - Unordered Lists

An HTML unordered list is defined by

tag where all list items are marked with bullets.

Unordered HTML Lists

An unordered list is a collection of list items that do not have a specific order or sequence and are marked with the bullets. An HTML unordered list is created by

the tag, where each list item is defined by the
• tag.

  This type of list is used for describing a particular service or product, as it does not require any order to be followed.

  The below figure shows an ordered list of groceries:

  

  Creating Unordered Lists

  To create an unordered list in HTML, we use the

  tag and nest
  • tags inside it. Each
  • element represents one item in the list. By default, the browser will automatically display disc bullet points for each item. However, we can change this bullet style using the type attribute on the
    element.

    Example

    The following example demonstrates how to create an unordered list in HTML:

    
    
    
       
    
    
       
    
          
    Beetroot
          
    Ginger
          
    Potato
          
    Radish
       
    
    
    

    The above example displays an unordered list with default disc bullets.

    HTML Unordered List - Specifying List Marker

    The type attribute for the 

    tag is used to specify the type of bullet for the unordered list in HTML. By default, disc bullet type is used. But we can change this with the help of the following options:

    S.No	Value & Description
    1	disc It is the default type of marker.
    2	square List items will be displayed with a square marker.
    3	circle It will set the marker to a hollow circle.

    Disc Marker

    The following example illustrates disc marker with an unordered list in HTML:

    
    
    
       
    
    
       
    An unordered list with default disc marker:
       
    
          
    Apple
          
    Guava
          
    Carrot
          
    Orange
       
    
    
    

    Square Marker

    The following example illustrates square marker with an unordered list in HTML:

    
    
    
       
    
    
       
    An unordered list with square marker:
       
    
          
    Nuts
          
    Oats
          
    Eggs
          
    Dates
       
    
    
    

    Circle Marker

    The following example illustrates circle marker with an unordered list in HTML:

    
    
    
       
    
    
       
    An unordered list with hollow circle marker:
       
    
          
    Rice
          
    Pulses
          
    Flour
          
    Beans
       
    
    
    

    The above examples display three unordered lists with default disc bullets, square and hollow circular bullets.

    HTML Unordered List Without Bullets

    You can also display the list items of an unordered list without showing the bullets. To display an unordered list without bullets, define the "none" to the list-style-type property.

    Syntax

    Following is the syntax to create an unordered list without bullets in HTML:

    
       
    Item in list...
       
    Item in list...
       
    Item in list...
    
    

    Example

    Given below is an example of creating an unordered list without bullets in HTML:

    
    
    
       
       
       
    
    
       
    
          
    Abdul
          
    Jason
          
    Yadav
       
    
    
    

    The above program creates an unordered list that contains elements Abdul, Jason, and Yadav without bullets.

    Styling Unordered HTML Lists

    Styling an unordered list (

    ) using CSS allows for customization of the list's appearance, including modifying bullet points, spacing, and overall design.

    Example

    Below is the program example:

    
    
    
       
       
       
       
    
    
       
    
          
    Item 1
          
    Item 2
          
    Item 3
       
    
    
    

    The above program styles an unordered list with a square bullet. Each list item has a background color, border, and padding, creating a distinct card-like appearance. The items are separated by a margin, and hovering over an item triggers a smooth background color transition.

    Nested Unordered Lists

    HTML allows nesting of lists; you can create nested unordered lists to display a list of items inside an item of the outer list element.

    Example

    The following example deonstartes the use of nested unordered lists:

    
    
    
      
    
    
    Example of Nested Unordered Lists
    
      
    Fruits
        
    
          
    Apple
          
    Banana
          
    Orange
        
      
      
    Vegetables
        
    
          
    Carrot
          
    Broccoli
          
    Spinach
        
      
      
    Dairy
        
    
          
    Milk
          
    Cheese
          
    Yogurt
        
      
    
    
    
    

    Print Page
    Previous
    Next
    Advertisements