10 min read HTML 10 views

HTML Lists

HTML lists are used to group related items in a structured and organized way. They help display information such as menus, instructions, features, and other collections of items on a webpage.

HTML provides three main types of lists:

Ordered List: Displays items in a numbered sequence.
Unordered List: Displays items using bullet points.
Description List: Displays terms along with their descriptions.

1. HTML Unordered List

An unordered list displays items using bullet points. It is created using the <ul> tag, while each list item is defined using the <li> tag.

Example:

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>Python</li>
</ul>

Output:

HTML
CSS
JavaScript
Python

2. HTML Ordered List

An ordered list displays items in a specific sequence using numbers or letters. It is created using the <ol> tag.

Example:

<ol>
    <li>Open your browser</li>
    <li>Visit a website</li>
    <li>Explore the content</li>
</ol>

Output:

Open your browser
Visit a website
Explore the content

3. Ordered List Types

The type attribute specifies the numbering style of an ordered list.

Type	Description
1	Numbers (1, 2, 3)
A	Uppercase letters (A, B, C)
a	Lowercase letters (a, b, c)
I	Uppercase Roman numerals (I, II, III)
i	Lowercase Roman numerals (i, ii, iii)

Example:

<ol type="A">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

Output:

HTML
CSS
JavaScript

4. HTML Ordered List Start Attribute

The start attribute specifies the starting number of an ordered list.

Example:

<ol start="5">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

Output:

HTML
CSS
JavaScript

5. HTML Unordered List Styles

You can change the bullet style of an unordered list using the CSS list-style-type property.

CSS Value	Description
disc	Filled circle
circle	Hollow circle
square	Square bullet
none	No bullet

Example:

<ul style="list-style-type:square;">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

6. HTML Description List

A description list is used to display terms and their descriptions. It uses three HTML tags:

<dl> – Defines the description list.
<dt> – Defines the term.
<dd> – Defines the description of the term.

Example:

<dl>
    <dt>HTML</dt>
    <dd>HTML is used to structure web pages.</dd>

    <dt>CSS</dt>
    <dd>CSS is used to style web pages.</dd>

    <dt>JavaScript</dt>
    <dd>JavaScript adds interactivity to web pages.</dd>
</dl>

Output:

HTML: HTML is used to structure web pages.
CSS: CSS is used to style web pages.
JavaScript: JavaScript adds interactivity to web pages.

7. HTML Nested Lists

A nested list is a list placed inside another list. It is useful for creating categories and subcategories.

Example:

<ul>
    <li>Frontend Development
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>

    <li>Backend Development
        <ul>
            <li>PHP</li>
            <li>Node.js</li>
            <li>Python</li>
        </ul>
    </li>
</ul>

Output:

Frontend Development
- HTML
- CSS
- JavaScript
Backend Development
- PHP
- Node.js
- Python

8. Reverse Ordered List

The reversed attribute displays an ordered list in descending order.

Example:

<ol reversed>
    <li>Three</li>
    <li>Two</li>
    <li>One</li>
</ol>

Output:

Three
Two
One

9. Important HTML List Tags

Tag	Purpose
<ul>	Creates an unordered list.
<ol>	Creates an ordered list.
<li>	Defines a list item.
<dl>	Creates a description list.
<dt>	Defines a description term.
<dd>	Provides a description.

Note: Always use <li> elements for list items inside <ul> and <ol>. You can also combine different list types to create nested lists.

Conclusion

HTML lists help organize information and improve the readability of web pages. By using ordered lists, unordered lists, and description lists, you can present content in a clear and structured format.

html Example

Run Code


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Lists</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            line-height: 1.8;
        }

        h2 {
            color: #2563eb;
        }

        .list-box {
            background: #f1f5f9;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>

    <h2>HTML Unordered List</h2>
    <div class="list-box">
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>Python</li>
        </ul>
    </div>

    <h2>HTML Ordered List</h2>
    <div class="list-box">
        <ol type="A">
            <li>Learn HTML</li>
            <li>Learn CSS</li>
            <li>Learn JavaScript</li>
        </ol>
    </div>

    <h2>HTML Nested List</h2>
    <div class="list-box">
        <ul>
            <li>Frontend
                <ul>
                    <li>HTML</li>
                    <li>CSS</li>
                </ul>
            </li>
            <li>Backend
                <ul>
                    <li>PHP</li>
                    <li>Node.js</li>
                </ul>
            </li>
        </ul>
    </div>

    <h2>HTML Description List</h2>
    <div class="list-box">
        <dl>
            <dt><strong>HTML</strong></dt>
            <dd>Structure of web pages.</dd>

            <dt><strong>CSS</strong></dt>
            <dd>Style of web pages.</dd>
        </dl>
    </div>

</body>
</html>

HTML Lists

HTML Lists

1. HTML Unordered List

2. HTML Ordered List

3. Ordered List Types

4. HTML Ordered List Start Attribute

5. HTML Unordered List Styles

6. HTML Description List

7. HTML Nested Lists

8. Reverse Ordered List

9. Important HTML List Tags

Conclusion

Related Tutorials

What is HTML

What Is HTML

HTML Elements