• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.
    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Introduction to <ul> & <ol>

Master Yoda

Administrator
Administrator
Verified
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
Verified
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
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.
 
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>
 
Top Bottom