HTML: Lists

Hello, young web designer! In this tutorial, we're going to learn about HTML lists and how to use them to organize information on your web pages. Lists are a great way to present information in an easy-to-read format. There are two main types of lists: ordered lists and unordered lists. Let's get started!

1. Ordered Lists An ordered list, also known as a numbered list, uses numbers to indicate the order of the list items. To create an ordered list, we use the <ol> (ordered list) element and the <li> (list item) element for each item in the list.

Here's an example of an ordered list:

htmlCopy code
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

2. Unordered Lists An unordered list, also known as a bulleted list, uses bullets (also called list markers) instead of numbers. To create an unordered list, we use the <ul> (unordered list) element and the <li> (list item) element for each item in the list.

Here's an example of an unordered list:

htmlCopy code
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

3. Practice Time Now let's practice creating lists for your web page! Follow these steps:

Step 1: Open the HTML file you created in the previous tutorial or create a new one.

Step 2: Create an ordered list with at least three items. For example:

htmlCopy code
<ol>
  <li>Wake up</li>
  <li>Brush teeth</li>
  <li>Have breakfast</li>
</ol>

Step 3: Create an unordered list with at least three items. For example:

htmlCopy code
<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

Step 4: Save your file and open it in a web browser to see your lists displayed on your web page!

Understanding and using HTML lists is an important skill for organizing information on your web pages. Keep practicing, and soon you'll be able to create beautiful and functional lists like a pro!