Home Posts HTML Lists Explained with Examples

HTML Lists Explained with Examples

April 10, 2026

2 minute

284 words

Categories:

Tags:

What is List

A list is a collection of related items or information displayed in a structured format. Lists help organize content clearly, making it easier for users to read and understand information. In web development, lists are commonly used to show menus, steps, features, categories, and grouped data.

Types of HTML Lists

There are three types of HTML Lists :

1. Ordered list

In ordered list, all list items marked with numbers by default.

HTML

    
            <!DOCTYPE html>
           
            <html lang="en">
           
            <head>
           
                <title>HTML Lists Explained with Examples</title>
           
            </head>
           
            <body>
           
                <h1>Ordered list</h1>
           
                <p>Reversed attribute</p>
           
                <ol reversed>
           
                    <li>Mango</li>
           
                    <li>Banana</li>
           
                    <li>Orange</li>
           
                    <li>Grapes</li>
           
                </ol>
           
                <p>Start attribute</p>
           
                <ol start="5">
           
                    <li>Mango</li>
           
                    <li>Banana</li>
           
                    <li>Orange</li>
           
                    <li>Grapes</li>
           
                </ol>
           
                <p>Type attribute</p>
           
                <ol type="i">
           
                    <li>Mango</li>
           
                    <li>Banana</li>
           
                    <li>Orange</li>
           
                    <li>Grapes</li>
           
                </ol>
           
            </body>
           
            </html>

2. Unordered List

In Unordered list, all list items marked with bullets by default.

HTML

    
            <!DOCTYPE html>
           
            <html lang="en">
           
            <head>
           
                <title>HTML Lists Explained with Examples</title>
           
            </head>
           
            <body>
           
                <h1>Unordered List</h1>
           
                <ul>
           
                    <li>Mango</li>
           
                    <li>Banana</li>
           
                    <li>Orange</li>
           
                    <li>Grapes</li>
           
                </ul>
           
            </body>
           
            </html>

3. Description List

A description list is a list of terms, with a description of each term.

HTML

    
            <!DOCTYPE html>
           
            <html lang="en">
           
            <head>
           
                <title>HTML Lists Explained with Examples</title>
           
            </head>
           
            <body>
           
                <h1>Description List</h1>
           
                 <dl> 
           
                    <dt>Array</dt>
           
                    <dd>A data structure used to store multiple values in a single variable.</dd>
           
                    <dt>Stack</dt>
           
                    <dd>A linear data structure that stores elements in a Last In, First Out (LIFO) order.</dd>
           
                </dl>
           
            </body>
           
            </html>

1	`<!DOCTYPE html>`
2	`<html lang="en">`
3	`<head>`
4	`<title>HTML Lists Explained with Examples</title>`
5	`</head>`
6	`<body>`
7	`<h1>Ordered list</h1>`
8	`<p>Reversed attribute</p>`
9	`<ol reversed>`
10	`<li>Mango</li>`
11	`<li>Banana</li>`
12	`<li>Orange</li>`
13	`<li>Grapes</li>`
14	`</ol>`
15	`<p>Start attribute</p>`
16	`<ol start="5">`
17	`<li>Mango</li>`
18	`<li>Banana</li>`
19	`<li>Orange</li>`
20	`<li>Grapes</li>`
21	`</ol>`
22	`<p>Type attribute</p>`
23	`<ol type="i">`
24	`<li>Mango</li>`
25	`<li>Banana</li>`
26	`<li>Orange</li>`
27	`<li>Grapes</li>`
28	`</ol>`
29	`</body>`
30	`</html>`

1	`<!DOCTYPE html>`
2	`<html lang="en">`
3	`<head>`
4	`<title>HTML Lists Explained with Examples</title>`
5	`</head>`
6	`<body>`
7	`<h1>Unordered List</h1>`
8	`<ul>`
9	`<li>Mango</li>`
10	`<li>Banana</li>`
11	`<li>Orange</li>`
12	`<li>Grapes</li>`
13	`</ul>`
14	`</body>`
15	`</html>`

1	`<!DOCTYPE html>`
2	`<html lang="en">`
3	`<head>`
4	`<title>HTML Lists Explained with Examples</title>`
5	`</head>`
6	`<body>`
7	`<h1>Description List</h1>`
8	`<dl>`
9	`<dt>Array</dt>`
10	`<dd>A data structure used to store multiple values in a single variable.</dd>`
11	`<dt>Stack</dt>`
12	`<dd>A linear data structure that stores elements in a Last In, First Out (LIFO) order.</dd>`
13	`</dl>`
14	`</body>`
15	`</html>`