- 720p
- 540p
- 360p
- 0.50x
- 0.75x
- 1.00x
- 1.25x
- 1.50x
- 1.75x
- 2.00x
We hope you enjoyed this lesson.
Cool lesson, huh? Share it with your friends
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.