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