Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • 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.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • 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>

Malcolm

Administrator
Administrator
Staff Team
Code Plus
Company Plus
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:
[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:​
  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:
[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:
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.​
 
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>
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom