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


Output :

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

    
    

    Output :

  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

    
    

    Output :

  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

    
    

    Output :

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


Output :

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

    
    

    Output :

  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

    
    

    Output :

  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

    
    

    Output :

  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

    
    

    Output :

  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

    
    

    Output :

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


Output :


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


Output :




My Personal Notes arrow_drop_up

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.