• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML Lists

← Previous Next →

HTML lists help you display information in an organised format. They are commonly used for menus, feature lists, steps, instructions, product details, and many other sections on a webpage. Lists make content easier to read because they break long paragraphs into smaller, clear points. In this chapter, you will learn about ordered lists, unordered lists, description lists, list styling and nested lists. You will also see how lists are used in practical webpages, including navigation menus.

What Are HTML Lists

An HTML list is a group of related items placed inside a container. The container depends on the type of list. Every list contains list items, represented with the li tag. Some lists show bullets, some show numbers and some show definition-style information. Lists help structure information so the reader can scan it quickly.

HTML supports three main types of lists:

  • Unordered lists

  • Ordered lists

  • Description lists

Each type is useful in different situations, and you will work with all of them while building webpages.

Unordered Lists in HTML

Unordered lists show items with bullet points. They are used when the order of items does not matter. This is useful for things like features, highlights, supplies or notes.

Basic unordered list example

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

In this example, the browser displays three items with default round bullets. You can add as many list items as needed. Unordered lists keep information clean and easy to understand.

Changing bullet style

You can change the bullet style using CSS. The list-style-type property controls how bullets look.

Common styles include:

  • disc (default)

  • circle

  • square

  • none (no bullets)

Example with custom bullets

<style>
ul {
    list-style-type: square;
}
</style>

<ul>
    <li>Milk</li>
    <li>Bread</li>
    <li>Eggs</li>
</ul>

This shows square bullets instead of round ones. If you choose list-style-type: none, the list will have no bullets at all, which is often used for menu lists.

Ordered Lists in HTML

Ordered lists show items with numbers. These are useful when the order matters, such as steps in a process, instructions, rankings or top-10 lists.

Basic ordered list example

<ol>
    <li>Turn on the system</li>
    <li>Open the browser</li>
    <li>Visit the website</li>
</ol>

The browser automatically numbers the items. If you add or remove items, the numbering updates on its own, which makes ordered lists convenient for guides and procedures.

Changing numbering style

HTML allows different number styles such as:

  • 1, 2, 3 (default)

  • a, b, c (lowercase alphabet)

  • A, B, C (uppercase alphabet)

  • i, ii, iii (lowercase roman)

  • I, II, III (uppercase roman)

Example with alphabet numbering

<ol type="a">
    <li>Download file</li>
    <li>Install update</li>
    <li>Restart system</li>
</ol>

This displays a, b and c as the list markers.

Starting a list at a specific number

You can start numbering from any point using the start attribute.

<ol start="5">
    <li>Testing</li>
    <li>Verification</li>
</ol>

This list begins with number 5 and continues with 6.

Description Lists in HTML

A description list is used when you want to define terms, concepts or items with explanations. Instead of bullets or numbers, this format pairs each term with its description.

Basic example

<dl>
    <dt>HTML</dt>
    <dd>A markup language for creating webpages.</dd>

    <dt>CSS</dt>
    <dd>A style sheet language used for designing webpages.</dd>
</dl>

This kind of list is useful in glossaries, FAQs, or when explaining features in detail.

Nested Lists in HTML

A nested list is a list inside another list. Nested lists help show sub-items or categories. This is common in menus, outlines and multi-level data structures.

Example of a nested list

<ul>
    <li>Front-end
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Back-end
        <ul>
            <li>PHP</li>
            <li>Node.js</li>
        </ul>
    </li>
</ul>

In this structure, each main item has its own internal list. Browsers usually indent nested lists automatically.

Creating a Navigation Menu with Lists

Most website menus use HTML lists because they are easy to style and control. An unordered list is typically used for navigation bars.

Example of a simple menu

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>

With CSS, you can convert this into a horizontal menu.

Converting list menu into horizontal navigation

<style>
ul {
    list-style: none;
    padding: 0;
}

li {
    display: inline-block;
    margin-right: 20px;
}

a {
    text-decoration: none;
    color: #333;
}
</style>

This makes the menu items align horizontally like a proper navbar.

Styling Lists with CSS

CSS gives you control over how list items appear. You can change padding, margin, marker style and spacing.

Removing bullets

ul {
    list-style-type: none;
}

Adding custom spacing

li {
    margin-bottom: 8px;
}

Custom marker images

You can replace bullets with an image using list-style-image.

ul {
    list-style-image: url("icon.png");
}

This adds a small image before each list item.

Using Lists for Checklists

A checklist is simply a styled list. You can simulate check marks using CSS or Unicode characters.

Simple checklist example

<ul>
    <li>✔ Laptop charged</li>
    <li>✔ Notes prepared</li>
    <li>✔ Project submitted</li>
</ul>

Checklists are helpful for tasks, forms, and reminders.

Responsive Behaviour of Lists

Lists are naturally responsive because items stack vertically. For horizontal menu lists, using display: inline-block or flexbox helps them adjust on smaller screens.

Responsive list with flexbox

<style>
.menu {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
</style>

<ul class="menu">
    <li>Home</li>
    <li>About</li>
    <li>Courses</li>
    <li>Contact</li>
</ul>

When the screen becomes narrow, items shift to the next line automatically.

Summary of HTML Lists

In this chapter, you learned about all three types of HTML lists: unordered lists, ordered lists and description lists. You saw how to change bullet styles, numbering styles, create nested lists and build navigation menus. You also learned how to apply CSS for styling and how lists behave on smaller screens. Lists play an important role in structuring content and improving readability, so understanding them helps you design cleaner and more organised webpages.

Practice Questions

Q1. Create a numbered list of five programming languages.

Q2. Create a bulleted list of five grocery items.

Q3. Change the bullet style to circle.

Q4. Display a list of fruits using an unordered list.

Q5. Create an ordered list with uppercase alphabet style.

Q6. Make a nested list of categories and subcategories.

Q7. Create a description list of HTML and CSS.

Q8. Use CSS to make bullets square-shaped.

Q9. Create a list of countries using <ol type="I">.

Q10. Display an FAQ using a description list.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top