Open In App

HTML Lists

Last Updated : 15 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

An HTML List allows you to organize data on web pages into an ordered or unordered format to make the information easier to read and visually appealing. HTML Lists are very helpful for creating structured, accessible content in web development.

Types of HTML Lists

There are three main types of lists in HTML:

  1. Unordered Lists (<ul>): These lists are used for items that do not need to be in any specific order. The list items are typically marked with bullets.
  2. Ordered Lists (<ol>): These lists are used when the order of the items is important. Each item in an ordered list is typically marked with numbers or letters.
  3. Description Lists (<dl>): These lists are used to contain terms and their corresponding descriptions.

Basic Example of HTML Lists

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

HTML List Tags

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.

Table of Content

1. Using HTML Unordered List or Bulleted List

Unordered lists are ideal for scenarios where the sequence of the items is not important.

The unordered list items are marked with bullets, also known as bulleted lists. An unordered list starts with the <ul> tag, and each list item begins with the <li> tag.

Syntax:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</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>

2. Using HTML Ordered List

Ordered lists are used when the items need to follow a specific sequence.

In an ordered list, all list items are marked with numbers by default. An ordered list starts with the <ol> tag, and each list item begins with the <li> tag.

<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 describes the ordered list with the use of reverse, type, and start 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

3. Using HTML Description List

A description list is a list of terms, with a description of each term. Description lists are less common but very useful for definitions, glossaries, or any other key-value pairs of items.

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

Syntax: 

<dl>
    <dt>Item 1</dt>
    <dd>Description of Item 1 </dd>
    <dt>Item 2</dt>
    <dd>Description of Item 2</dd>
</dl>

Here, <dt> (description term) is used for the term being defined, and <dd> (description details) is used for the description.

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>

Best Practices for Using HTML Lists

  • Semantic Correctness: Always use the appropriate type of list for your content to ensure semantic correctness and improve accessibility.
  • Nesting Lists: HTML lists can be nested inside one another. For example, you can place an unordered list inside an ordered list item to create a hierarchy.
  • Styling Lists: Use CSS to style lists to match the design of your website. You can change bullet styles in unordered lists, the numbering style in ordered lists, and more.
  • Accessibility: Make sure your lists are accessible. Properly structured lists help screen readers interpret the content accurately, enhancing the accessibility of your website.

Common Question About CSS List


Next Article
HTML Ordered Lists

S
Shubrodeep Banerjee
Improve
Article Tags :
Practice Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox