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
Start a free Courses trial
to watch this video
You will learn how to create a list in HTML. Lists are a clean and useful way to organize information and, paired with anchor tags, to create navigation menus.
ul -Unordered list. For listing things that do not need to be in any specific order. Navigation menus are often created with unordered lists, and are styled with CSS to display horizontally.
ol -Ordered list. A list that is automatically numbered.
An HTML element you'll
probably use a lot is lists.
0:00
An HTML list is simply a list
of items numbered or unnumbered.
0:03
Lists are used in a variety of ways.
0:07
We can see a couple of
examples on the profile page.
0:09
There are currently two
lists on this page,
0:11
the main navigation and
this list of skills.
0:14
Both of these lists are being
styled with CSS, so
0:19
that they line up horizontally,
rather than vertically.
0:21
Let's convert this background
information here into a list, so
0:24
that we can see what a list
looks like by default.
0:27
So let's go to index.html, and first,
0:32
I'm going to delete these two paragraphs
that we created in previous videos.
0:36
You can create a list with
one of two tags, ul or ol.
0:41
ul stands for unordered list,
and ol stands for ordered list.
0:46
To start, put an ol around the paragraphs.
0:50
To separate the items in a list,
you need to nest another tag inside ol,
1:00
an li tag which stands for list item.
1:06
I'll replace these paragraph
tags with li tags and
1:09
make each sentence its own list item.
1:12
And we'll indent these list items because
they're nested inside of the ordered list.
1:34
And just for fun,
let's add a fourth list item.
1:40
I'll just say, Fourth list item.
1:46
Let's save, refresh, and take a look.
1:53
And as you can see, by default, this
HTML structure gives us a numbered list.
1:55
A ul, or unordered list,
is the type of list you'd use for
2:00
items that don't have or
need to be in any specific order.
2:04
Go back to index.html and
change ol to ul and see what happens.
2:07
The numbered list becomes a bulleted list.
2:18
Now that you know how to structure
web pages and work with some common
2:21
HTML elements, let's learn how to
make these elements look fantastic.
2:25
In the next part of the course,
cascading style sheets.
2:29
You need to sign up for Treehouse in order to download course files.
Sign up