Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
Discover essential HTML elements for creating lists and gain an understanding of their purpose. Then, apply your knowledge by adding an ingredient list and recipe instruction steps to your project.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
We've all crafted lists at some point, be
it grocery lists, a list of our favorite
0:00
restaurants and movies, or a list of
guests we plan to invite to a party.
0:05
In web design and front-end web
development, lists play a crucial role.
0:10
Nearly every website or web application
uses lists to showcase navigation menus,
0:14
items in a shopping cart,
movie listings, and much more.
0:20
HTML offers various elements, specifically
designed for constructing lists,
0:25
providing the flexibility to organize and
structure content in diverse ways.
0:30
One of the fundamental list
tags in HTML is the ul tag,
0:37
which stands for unordered list.
0:41
Unordered lists are ideal for
presenting items where the order doesn't
0:43
hold significance, and the items
are typically showcased without points.
0:48
When you think of a list, you imagine
each item neatly placed on its own line.
0:53
However, the UL tag alone
won't display a typical list.
0:58
To specify individual items of a list,
1:02
you place them inside LI tags,
which stands for list item.
1:06
LI tags when placed or nested inside
a UL tag are displayed using dot points.
1:11
If you need to list items in
a specific order, like a step-by-step
1:18
instructions of a recipe, or
a list of your top 10 favorite shows,
1:23
you turn to an ordered list,
which uses OL tags.
1:27
Order lists are used when the sequence or
arrangement of items hold importance with
1:32
each item automatically assigned a number
to denote its position within the list.
1:37
There is a lesser known list element
called a description list designed for
1:43
creating pairs of terms and
their corresponding descriptions,
1:47
commonly used in glossaries.
1:52
Although it won't be
covered in this course,
1:54
additional resources can be found in
the teachers notes for those interested.
1:56
Taking a look at our mock up our recipe
page has two lists an ordered list to
2:01
itemize all the ingredients needed for
the dish and
2:06
an ordered list to present
the cooking steps.
2:09
Let's start by adding
the ingredient list to our page.
2:13
Given that the order of
the ingredients doesn't matter,
2:17
we'll start by typing an opening and
closing UL tag.
2:21
Inside these UL tags is where
we'll list our ingredients.
2:25
In recipe.txt,
let's copy all the ingredients.
2:29
And paste them between our UL tags.
2:35
I'll fix the indentation by pressing
the Tab key at the beginning of each
2:39
ingredient step.
2:43
Earlier I mentioned that the UL and
2:46
OL tags by themselves won't
render a standard list.
2:48
If we save our changes and
refresh the browser,
2:52
you'll notice that all the items
appear on the same line.
2:55
To specify an individual list item,
2:59
we must wrap each ingredient with
an opening and closing LI tags.
3:02
Let's go ahead and implement this.
3:07
Now if we save our changes and
refresh the browser,
3:18
our ingredient list is now
displayed with.points.
3:21
Excellent, now let's incorporate our
cooking steps as a learning exercise,
3:25
why don't you try adding
the list of steps on your own?
3:30
Remember, the recipe dot txt file
contains all the necessary text.
3:34
Feel free to pause this video and
give it a go.
3:39
How did it go?
3:44
Were you able to add the cooking
steps on your own If not,
3:45
don't worry,
we'll go through the steps together.
3:48
First I'll copy all the cooking
steps in our index dot HTML file.
3:52
We'll place our list under
the steps h3 element.
3:57
Since the order of the steps matter, we'll
use an ordered list to display the steps
4:01
Inside the OL tags, I'll paste the steps
I copied from the recipe dot txt file.
4:07
Now all that's left is the wrap each
step with opening and closing LI tags.
4:14
To make this easier to work with,
I'm gonna turn off the word wrapping.
4:20
You don't have to do this.
4:24
I'll first adjust the indentation.
4:26
Now I'll wrap each list
item with an LI tag.
4:29
We also need to remove the numbers at the
front of each step since the browser will
4:33
add the numbering for us.
4:38
Let's save our changes and
refresh the browser.
4:43
There you have it.
4:47
Our cooking steps are numbered and
displayed as a list.
4:49
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up