Introduction to Unordered and Ordered lists in HTML
Today, lets talk about <ul> and <ol>. They can be used for many things, but in this thread, I’ll show you how they can be used for cooking recopies. These HTML tags are used to create lists and belong within the body tags; you can identify them as ul is unordered lists and ol is an ordered list. Although both create a list, they both appear differently. I’ll show you examples of both <ul> and <ol> and how to use them. Let’s go more in-depth down below:
<ul> Unordered Lists:
I generally look at ul’s to be great for summarizing important information. Their bullet points can identify them. Like shown down below:
- Bulletpoint 1
- Bulletpoint 2
- Bulletpoint 3
<ol> are great for creating numbered steps. They can also be identified by their 1, 2, 3 etc. See down below for example:
- One
- Two
- Three
<li> List items:
List items are what creates a list.
Code Example:
Unordered List:
[CODE lang="html" title="Unordered Lists"]
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2</li>
<li>Unordered list item 3</li>
</ul>[/CODE]
Ordered List:
[CODE lang="html" title="Ordered Lists"]<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
<li>Ordered list item 3</li>
</ol>[/CODE]
Example Usage:
Recipe Name: Morning Breakfast
Ingredients:
- 2 eggs
- Orange Juice
- 2 Slices of bread
Instructions:
- Crack eggs in a pan and cook eggs until golden.
- Then add the 2 slices of bread and toast them until golden as well.
- Pour orange juice in a glass.
- Put cooked eggs on a plate, add toasted slices and walla!
[CODE lang="html" title="Unordered Lists"]
<ul>
<li>2 eggs</li>
<li>Orange Juice</li>
<li>2 slices of bread</li>
</ul>[/CODE]
Instructions:
[CODE lang="html" title="Ordered Lists"]<ol>
<li>Crack eggs in a pan and cook eggs until golden.</li>
<li>Then add the 2 slices of bread and toast them until golden as well.</li>
<li>Pour orange juice in a glass.</li>
<li>Put cooked eggs on a plate, add toasted slices and walla!</li>
</ol>[/CODE]
Extra:
Not a fan of the bullets, you can also edit those as well using CSS! But, that tutorial will come soon!
Last edited: