HTML lists are a great way to organize information on a web page. They can be used to create numbered or bulleted lists, and can help make your content more readable and easier to understand.
But note that they are not only used to make lists of items. They can also be used to create a navigation bar, a definition list, or a directory of files. We will look at these examples in the next lessons.
Ordered Lists#
Ordered lists are used when you want to list items in a specific order. To create an ordered list, use the <ol> tag and wrap each list item in an <li> tag. Here’s an example:
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
This will create a numbered list that looks like this:
- First item
- Second item
- Third item
Now, as a reminder of a previous section about attributes, let’s add an attribute to the <ol> tag to change the starting number of the list. We will use the start attribute to set the starting number to 5. Let’s also add an ID to the <ol> tag so we can style it later. Here’s the code:
<ol start="5" id="my-shopping-cart">
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ol>
This will create a numbered list that looks like this:
- Apples
- Oranges
- Bananas
Unordered Lists#
Unordered lists are used when the order of the items doesn’t matter. To create an unordered list, use the <ul> tag and wrap each list item in an <li> tag. Here’s an example:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
This will create a bullet-point list that looks like this:
- First item
- Second item
- Third item
Don’t forget to close the <li> tag for each item in the list. You can also nest lists inside of other lists to create more complex structures. Experiment with creating your own lists and see how they can help organize your web page content!