HTML Project - Creating an HTML List (Ordered and Unordered)

Learn how to create ordered and unordered lists in HTML. This tutorial covers the basics of lists, including list items and different types of lists.

Step 1: Create an HTML File

Create a new file and name it list.html.


Step 2: Add the Basic HTML Structure

Set up the basic HTML structure.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Lists Example</title>
</head>
<body>
    <!-- Content will go here -->
</body>
</html>


Step 3: Create an Unordered List

Inside the <body> tag, create an unordered list using the <ul> element.

<body>
    <h1>My Favorite Fruits</h1>
    <ul>
        <li>Apple</li>
        <li>Banana</li>
        <li>Cherry</li>
    </ul>
</body>

<ul>: Defines an unordered list (bulleted list).

<li>: Defines a list item.


Step 4: Create an Ordered List

Next, create an ordered list using the <ol> element.

<body>
    <h1>Steps to Make a Sandwich</h1>
    <ol>
        <li>Get two slices of bread.</li>
        <li>Spread butter on the bread.</li>
        <li>Add your favorite fillings.</li>
        <li>Put the slices together and enjoy.</li>
    </ol>
</body>
  • <ol>: Defines an ordered list (numbered list).
  • <li>: Defines a list item.

Final Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Lists Example</title>
</head>
<body>
    <h1>My Favorite Fruits</h1>
    <ul>
        <li>Apple</li>
        <li>Banana</li>
        <li>Cherry</li>
    </ul>

    <h1>Steps to Make a Sandwich</h1>
    <ol>
        <li>Get two slices of bread.</li>
        <li>Spread butter on the bread.</li>
        <li>Add your favorite fillings.</li>
        <li>Put the slices together and enjoy.</li>
    </ol>
</body>
</html>