Creating Ordered and Unordered Lists

1. Introduction

In this tutorial, we will learn how to create ordered and unordered lists in HTML. HTML allows us to structure content on the web in various ways, and one of the most common ways is using lists.

By the end of this tutorial, you will be able to:
- Understand what ordered and unordered lists in HTML are
- Create your own ordered and unordered lists

Prerequisites:
- Basic understanding of HTML

2. Step-by-Step Guide

HTML provides two main types of lists:
- Ordered lists: These are numbered lists
- Unordered lists: These are bullet-point lists

To create an ordered list in HTML, we use the <ol> tag. Each item in the list is marked with the <li> tag.

The same goes for unordered lists, but instead of the <ol> tag, we use the <ul> tag.

3. Code Examples

Ordered List

<!-- This is an ordered list -->
<ol>
  <!-- Each list item is marked with the `li` tag -->
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

When you run this code in a browser, you will see a numbered list as follows:

1. Item 1
2. Item 2
3. Item 3

Unordered List

<!-- This is an unordered list -->
<ul>
  <!-- Each list item is marked with the `li` tag -->
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

When you run this code in a browser, you will see a bullet-point list as follows:

• Item 1
• Item 2
• Item 3

4. Summary

In this tutorial, we learned about ordered and unordered lists in HTML. We learned that ordered lists are used for items that need to be in a specific order, while unordered lists are used for items that don't need to be in a specific order.

Further learning could include nested lists, where you put a list within a list, and other types of lists, such as description lists.

5. Practice Exercises

1. Create an ordered list with the names of your top 3 favorite movies.
2. Create an unordered list with the names of your favorite foods.
3. Create an ordered list of your top 3 favorite books, each with an unordered list of main characters beneath it.

Solutions:
1. Ordered list of favorite movies:

<ol>
  <li>The Shawshank Redemption</li>
  <li>The Godfather</li>
  <li>The Dark Knight</li>
</ol>

1. Unordered list of favorite foods:

<ul>
  <li>Pizza</li>
  <li>Burger</li>
  <li>Pasta</li>
</ul>

1. Ordered list of favorite books with nested unordered lists:

<ol>
  <li>
    Harry Potter
    <ul>
      <li>Harry Potter</li>
      <li>Hermione Granger</li>
      <li>Ron Weasley</li>
    </ul>
  </li>
  <li>
    The Lord of the Rings
    <ul>
      <li>Frodo Baggins</li>
      <li>Samwise Gamgee</li>
      <li>Gandalf</li>
    </ul>
  </li>
  <li>
    Game of Thrones
    <ul>
      <li>Jon Snow</li>
      <li>Daenerys Targaryen</li>
      <li>Tyrion Lannister</li>
    </ul>
  </li>
</ol>

Practice further by creating lists within lists, and try to style them using CSS.