- 720p
- 540p
- 360p
- 0.50x
- 0.75x
- 1.00x
- 1.25x
- 1.50x
- 1.75x
- 2.00x
We hope you enjoyed this lesson.
About this lesson
Exercise files
Download this lesson’s related exercise files.
Creating Lists59.3 KB Creating Lists - Solution
59.5 KB
Quick reference
Creating Lists
Creating ordered and un-ordered lists in HTML is easy.
When to use
Whenever you want to create a list, either ordered (with numbers) or un-ordered (with bullets), use an HTML list.
Instructions
To create an ordered list (with numbers), use an <ol> tag:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
To create an un-ordered list (with bullets) use the <ul> tag:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
To change the type of bullet point, add the style tag to the <ul> tag:
<ul style="list-style-type:disc">
Your options are disc, circle, square or none.
To change the type of numbered point in an ordered list, add the type attribute to the <ol> tag:
<ol type="i">
Your options are I, i, A, a
Hints & tips
- Ordered lists are created with the <ol> and </ol> tag.
- Un-Ordered lists are created with the <ul> and </ul> tag.
- List items are wrapped in the <li> and </li> tag.
- To change the style of a <ul> use the style attribute: <ul style="list-style-type:square">
- To change the style of a <ol> use the type attribute: <ol type="i">
- 00:05 In this video, I wanna talk about lists.
- 00:07 With HTML,
- 00:08 there are basically two types of lists, ordered lists and unordered lists.
- 00:12 Kinda hard to say.
- 00:13 To create them, it's pretty simple.
- 00:14 Let's head on down here, let's give this a couple of line spaces.
- 00:20 And let's give this a strong and say to do list.
- 00:27 So let's create first, an unordered list.
- 00:29 And to do that, we use the ul tag, ul stands for unordered lists.
- 00:35 Now to create that actual bullet item in a list, you just use the li tag and
- 00:40 the li tag opens and closes.
- 00:42 So let's create, let's say, three things and let's go,
- 00:47 Buy Groceries,
- 00:50 Return Library Books,
- 00:56 and Feed The Dog, I don't actually own a dog, but if I did.
- 01:02 So, here's our to do list and we just see these nice bullet items, very,
- 01:06 very easy, very nice.
- 01:08 We can also, Give us another line break here.
- 01:15 Create a checklist with ordered list, ordered items.
- 01:19 And that's ol.
- 01:21 And ol has an opening and a closing tag.
- 01:24 And to create a list item, we do the same thing, li.
- 01:30 And to this, let's go, Open Hood.
- 01:37 Remove Oil Cap.
- 01:42 Pull Out Dipstick, I don't know, it's oil changing procedure.
- 01:48 And here we see these are ordered in numbers, 1, 2, and 3.
- 01:51 So you'll notice you don't have to actually type in 1, 2, and 3.
- 01:55 The li does it automatically because it knows it's an ordered list.
- 01:59 So that's pretty cool.
- 02:01 Lists are important.
- 02:01 You're gonna use them a lot in HTML.
- 02:04 Get in the habit of remembering these.
- 02:06 Now we can also change these around.
- 02:08 We have numbers here and we have these little bullet points.
- 02:10 We can change those pretty easily.
- 02:12 And we're gonna use a little bit of inline CSS, and there's basically three or
- 02:16 four ways you can change unordered lists.
- 02:18 You can do disc, circle, square, or none.
- 02:21 So to do that, we just come back here and in our opening ul tag,
- 02:25 we just pop in the style thing and then list type colon, and let's go, disc.
- 02:30 And if we hit reload, nothing happens because these are already discs.
- 02:34 Well, we can change this to circle.
- 02:38 Save this, hit reload and we get these other circles.
- 02:42 We can change it to square.
- 02:45 Get little squares.
- 02:47 And we can change it to none, if you don't want any.
- 02:51 And you might think, that's kind of weird, but
- 02:52 there are a lot of times when you actually need none.
- 02:57 So we can do the same thing down here with our ordered lists.
- 03:01 And we do that with the type tag.
- 03:03 It's just T-Y-P-E equals quotation marks.
- 03:06 And think back to like an outline, back when you were a kid in school.
- 03:10 If you had to outline things in English class, you could do Roman numerals,
- 03:13 you could do letters, you could do numbers.
- 03:15 So let's do letters.
- 03:16 So you just type a capital A.
- 03:18 If we save this and come back, these changed to A, B, and C.
- 03:21 If you want lower case letters, you just type in a lower case a.
- 03:24 Then we get lower case.
- 03:27 Likewise, with Roman numerals, we just put a capital I for Roman numeral one.
- 03:32 And we get these cool Roman numerals.
- 03:34 And if you want lower case Roman numerals, you just do lower case i.
- 03:39 So that's kinda cool.
- 03:41 So those are lists, very useful, you're gonna use them a lot, forever,
- 03:45 it's one of the things you're always gonna use, cuz websites always have lists,
- 03:49 they always have list of links.
- 03:51 And a lot of times, when you create a nav bar, up at the top of the screen,
- 03:54 you'll actually use these guys to make the links in the nav bar,
- 03:58 because then you can style them easier with CSS.
- 04:00 But that's something for another lesson.
- 04:02 And in the next video we're gonna talk about nested lists.
Lesson notes are only available for subscribers.