Locked lesson.
About this lesson
Learn how to nest lists within other lists.
Exercise files
Download this lesson’s related exercise files.
Nested Lists.docx59.4 KB Nested Lists - Solution.docx
59.5 KB
Quick reference
Nested Lists
It is possible to nest lists inside of lists.
When to use
Whenever you want to add sub-categories or expand your list items into their own lists, you can use nested lists.
Instructions
To create a nested list, simply add another list <ol> or <ul> before, after, or inside a list item <li> and </li> of your current list.
<ol>
<li>Item 1</li>
<ul>
<li>This is a nested list item 1</li>
<li>This is a nested list item 2</li>
</ul>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Hints & tips
- You can nest lists inside of list items.
- You can nest as many lists inside of your list as you like.
- You can change the style of the nested list the same way you change the style of the main list.
- You can mix and match ordered and un-ordered lists (you can nest ordered lists inside un-ordered lists etc).
- 00:04 In the last video, we talked about lists, we talked about ordered lists and
- 00:08 unordered lists.
- 00:09 In this video I wanna talk nested lists.
- 00:12 And basically, a nested list is a list inside of a list.
- 00:17 And there's a lot of different reasons why you can do this and
- 00:19 it's actually pretty easy to do.
- 00:22 So, let's take a look at our list, let's look at this buy groceries.
- 00:25 Let's say we wanted another list underneath the buy groceries list item.
- 00:31 So that's pretty easy, we just come over here to our buy groceries and
- 00:36 just create another, let's call this unordered list, and
- 00:42 let's say, get Coffee and let's see,
- 00:49 Hamburger and Pizza Sauce, gotta have Pizza Sauce.
- 00:57 And what else?
- 00:57 For good measure, let's go Cookies, I love the cookies.
- 01:02 So if I hit reload, boom.
- 01:04 Now we have this underneath here.
- 01:06 And you notice since it's nested inside here,
- 01:09 the little bullet points are slightly different.
- 01:12 And you can change those just like we changed the other ones.
- 01:17 If we go, let's say, we want, I don't know let's give it square.
- 01:25 Save this.
- 01:28 Hit reload, boom we've got squares.
- 01:30 So, just that easily you can nest things inside of other things.
- 01:35 We can nest list items inside of other list items, and you can keep going.
- 01:39 You want to add another one inside of here?
- 01:45 So the hamburger, let's go, Li,
- 01:49 if there's a ground beef and ground sirloin.
- 01:55 So I mean we can just keep going and going and you can see the little square here,
- 02:02 it's sort of inherited that from this one.
- 02:06 We can also override that if we wanna give it let's say a circle.
- 02:16 We could do that, so pretty easy and you can even do,
- 02:20 I mean obviously we've done unordered lists.
- 02:23 You could do unordered list and let's change that,
- 02:28 we should change it, the closing tags, save that, and we have 1, 2.
- 02:34 So, pretty easy to mix and match, however you wanna do it.
- 02:37 Not a big deal at all, and, nested lists.
- 02:39 So, like I said,
- 02:41 lists are something you're gonna use a lot throughout your HTML coding career.
- 02:46 Websites always have lists, it's just sorta the way it is.
- 02:49 And they're useful, they're good, they're easy to format,
- 02:51 they're nice visually, and you'll use a lot of these.
- 02:55 So, ordered lists, unordered lists, nested lists, and yeah, pretty simple.
- 03:00 So, that's all for this video, in the next video,
- 03:02 I wanna talk about something called block elements versus inline elements.
Lesson notes are only available for subscribers.