Ordered list
Next I’m going to create an ordered list
I will begin by creating an ordered list using the directions from the Eggnog cookie recipe.
Now, let’s use the same recipe to structure our ordered list.
Let’s get started!
Step 1:
Using the same HTML box, press enter twice giving yourself some space after your unordered list. (I ended my unordered list on line 14, and started my ordered list on line 17).
To create an ordered list, you use <li> and <ol> elements.
li = list item
ol = ordered list
Step 2:
Start creating your ordered list by using <li> elements.
Don’t forget to use the opening and closing <li> </li> elements for each item.
Example: 2
This is an example of what it looks like before you use <li> elements. See how the first set of directions are not in list form?
The ingredients are displayed on the same horizontal line, making them difficult to read and understand.
Step 3:
Now, let’s finish the ordered list by using opening and closing <ol> </ol>elements.
We selected <ol> because it effectively represents an ordered list.
Example: 3
Don’t forget to have an opening/closing <ol> </ol> elements.
There you have it!
You have just created an ordered list.
Well done!
Leave a Reply