Open In App

HTML Lists

Improve
Improve
Like Article
Like
Save
Share
Report

An HTML list is a record of related information used to display the data or any information on web pages in the ordered or unordered form. 

HTML List Example

Basic Implementation of HTML lists.

HTML
<!DOCTYPE html>
<html>

<head>
    <title>GeeksforGeeks</title>
</head>

<body>
    <h2>Welcome To GeeksforGeeks Learning</h2>
    <h5>List of available courses</h5>
    <ul>
        <li>Data Structures & Algorithm</li>
        <li>Web Technology</li>
        <li>Aptitude & Logical Reasoning</li>
        <li>Programming Languages</li>
    </ul>
    <h5>Data Structures topics</h5>
    <ol>
        <li>Array</li>
        <li>Linked List</li>
        <li>Stacks</li>
        <li>Queues</li>
        <li>Trees</li>
        <li>Graphs</li>
    </ol>
</body>

</html>

Output:

html list example output

HTML List

There are three types of lists in HTML:

HTML List Tags

Here is the list of all lists tags HTML:

TagDescription
<ul>Defines an unordered list
<ol>Defines an ordered list
<li>Defines a list item
<dl>Defines a description list
<dt>Defines a term in a description list
<dd>Details the term in a description list

The HTML Unordered List or Bulleted List

The unordered list items are marked with bullets. It is also known as bulleted lists. An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. 

Syntax:

<ul> list of items </ul>

Attribute: This tag contains two attributes which are listed below: 

  • compact: It will render the list smaller.
  • type: It specifies which kind of marker is used in the list.

Example: This example describes the unordered list.

HTML
<!DOCTYPE html>
<html>

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

</html>

Output:

html unordered list

Unordered List

HTML Ordered List

In an ordered list, all list items are marked with numbers by default. An ordered list starts with the <ol> tag. Each list item starts with the “li” tag. 

Syntax:

<ol>
   <li>Item1</li>
   <li>Item2</li>
   <li>Item3</li>
</ol>

Attributes:

  • compact: It defines the list should be compacted (compact attribute is not supported in HTML5. Use CSS instead.).
  • reversed: It defines that the order will be descending.
  • start: It defines from which number or alphabet the order will start.
  • type: It defines which type(1, A, a, I, and i) of the order you want in your list of numeric, alphabetic, or roman numbers.

Example: This example illustrates the use of the reverse attribute, control list counting & type attribute.

HTML
<!DOCTYPE html>
<html>

<head>
    <title>HTML ol tag</title>
</head>

<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>HTML ol tag</h3>
    
<p>reversed attribute</p>



    <ol reversed>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ol>
    
<p>start attribute</p>


    <ol start="5">
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ol>
    
<p>type attribute</p>


    <ol type="i">
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ol>
</body>

</html>

Output:

html ordered list

Ordered List with different list style

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. 

Syntax: 

<dl> Contents... </dl>

Please refer to the How to add description list of an element using HTML? article for further details.
 

Example: This example describes the HTML Description List.

HTML
<!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>

Output:

html description list

Description List

Conclusion

HTML lists provide a way to display a structured collection of items. In this tutorial, we have explained three types of lists- ordered lists, unordered lists, and definition list. We have explained all three list types with examples.

We also covered various list tags in HTML, and how to change list item markers for both ordered and unordered lists. Creating nested lists provides more depth to the structure and we create them by using a list declaration tag (<ol>,<ul>) inside <li> tag, allowing us to create new lists within the list.



Last Updated : 20 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads