HTML Tutorial Introduction to <ul> & <ol>

Master Yoda

Administrator
Administrator
Verified
Jan 2, 2018
1,403
371
95
Canada
codeforum.org
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> Ordered Lists:
<ol> are great for creating numbered steps. They can also be identified by their 1, 2, 3 etc. See down below for example:​
  1. One
  2. Two
  3. Three
Now just like most HTML tags <ol> and <ul> require a closing tag. Just like this: <ol>Content</ol> and <ul>Content</ul>. Okay, so let us dive deeper into what goes between them. As shown in the examples above, Bulletpoint 1 to 3, One, Two and Three are known as list items <li>. They too also require a closing tag e.g. <li>List Item</li>, again list items are within <ol></ol> and <ul></ul> (or where content is).

<li> List items:
List items are what creates a list.​

Code Example:
Unordered List:
Unordered Lists:
<ul>
   <li>Unordered list item 1</li>
   <li>Unordered list item 2</li>
   <li>Unordered list item 3</li>
</ul>
Ordered List:
Ordered Lists:
<ol>
   <li>Ordered list item 1</li>
   <li>Ordered list item 2</li>
   <li>Ordered list item 3</li>
</ol>
Example Usage:
Recipe Name: Morning Breakfast
Ingredients:​
  • 2 eggs
  • Orange Juice
  • 2 Slices of bread
Instructions:​
  1. Crack eggs in a pan and cook eggs until golden.
  2. Then add the 2 slices of bread and toast them until golden as well.
  3. Pour orange juice in a glass.
  4. Put cooked eggs on a plate, add toasted slices and walla!
Ingredients List:
Unordered Lists:
<ul>
   <li>2 eggs</li>
   <li>Orange Juice</li>
   <li>2 slices of bread</li>
</ul>
Instructions:
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>
Extra:
Not a fan of the bullets, you can also edit those as well using CSS! But, that tutorial will come soon! :)
 
Last edited:

Tealk

Active Coder
Moderator
Verified
Jun 5, 2019
290
66
28
SysAdmin
Anzah.Tools
You might want to keep the sample code and the result the same.
Also the "
" has no place in the HTML code.​
Code:
HTML:
<ul>[/INDENT]
[INDENT]    <li>Ingredients:</li>[/INDENT]
[INDENT]    <li>2 eggs</li>[/INDENT]
[INDENT]    <li>Orange Juice</li>[/INDENT]
[INDENT]    <li>2 Slices of bread</li>[/INDENT]
[INDENT]</ul>
Example:
  • Ingredients:
  • 2 eggs
  • Orange Juice
  • 2 Slices of bread
This makes it easier to understand the example if you copy the code 1:1.​
Otherwise I think it is very well understandable.​
 

Master Yoda

Administrator
Administrator
Verified
Jan 2, 2018
1,403
371
95
Canada
codeforum.org
You might want to keep the sample code and the result the same.
Also the "
" has no place in the HTML code.​
Code:
HTML:
<ul>[/INDENT][/INDENT]
[INDENT][INDENT]    <li>Ingredients:</li>[/INDENT][/INDENT]
[INDENT][INDENT]    <li>2 eggs</li>[/INDENT][/INDENT]
[INDENT][INDENT]    <li>Orange Juice</li>[/INDENT][/INDENT]
[INDENT][INDENT]    <li>2 Slices of bread</li>[/INDENT][/INDENT]
[INDENT][INDENT]</ul>
Example:
  • Ingredients:
  • 2 eggs
  • Orange Juice
  • 2 Slices of bread
This makes it easier to understand the example if you copy the code 1:1.​
Otherwise I think it is very well understandable.​
Thanks, Edits have been made.
 
  • Like
Reactions: Tealk

gothictrade

Coder
Feb 2, 2020
30
6
8
You might want to keep the sample code and the result the same.
Also the "
" has no place in the HTML code.​
Code:
HTML:
<ul>[/INDENT][/INDENT]
[INDENT][INDENT]    <li>Ingredients:</li>[/INDENT][/INDENT]
[INDENT][INDENT]    <li>2 eggs</li>[/INDENT][/INDENT]
[INDENT][INDENT]    <li>Orange Juice</li>[/INDENT][/INDENT]
[INDENT][INDENT]    <li>2 Slices of bread</li>[/INDENT][/INDENT]
[INDENT][INDENT]</ul>
Example:
  • Ingredients:
  • 2 eggs
  • Orange Juice
  • 2 Slices of bread
This makes it easier to understand the example if you copy the code 1:1.​
Otherwise I think it is very well understandable.​
In my opinion I think since "Ingredients" is the title it should not be bulleted, apart of the list, but rather standalone paragraph text before the list..
So rather,

Code:
HTML:
[INDENT]    <h2>Ingredients:</h2>[/INDENT]
[INDENT]    <ul>[/INDENT]
[INDENT]    <li>2 eggs</li>[/INDENT]
[INDENT]    <li>Orange Juice</li>[/INDENT]
[INDENT]    <li>2 Slices of bread</li>[/INDENT]
[INDENT]</ul>