1 00:00:00,115 --> 00:00:02,160 We've all created lists before. 2 00:00:02,160 --> 00:00:05,360 Grocery list, a list of our favorite restaurants and movies, or 3 00:00:05,360 --> 00:00:07,920 a list of guest we want to invite to a party. 4 00:00:07,920 --> 00:00:11,540 Lists are an important component of web design and firm and web development. 5 00:00:11,540 --> 00:00:14,960 Just about every website or application on the web uses lists 6 00:00:14,960 --> 00:00:19,130 to display navigation menus, shopping cart items, movie listings and so much more. 7 00:00:20,150 --> 00:00:25,543 HTML provides three elements for creating list, <ul> for unordered list, 8 00:00:25,543 --> 00:00:30,350 <ol> for ordered list, and <dl> for description list. 9 00:00:30,350 --> 00:00:35,320 The DL element is used to create groups of terms in descriptions, like in a glossary. 10 00:00:35,320 --> 00:00:37,560 It's not as common as the other two lists, so 11 00:00:37,560 --> 00:00:40,460 I'm not gonna cover it in this course, but I've posted resources and 12 00:00:40,460 --> 00:00:43,070 examples of description lists in the teachers notes of this video. 13 00:00:44,450 --> 00:00:48,180 Now let's create a list of the different sections that will make up our website, 14 00:00:48,180 --> 00:00:50,970 Home, About, Articles, and Contact. 15 00:00:50,970 --> 00:00:53,840 We'll mark up the list using the UL element. 16 00:00:53,840 --> 00:00:55,970 UL stands for unordered list. 17 00:00:55,970 --> 00:01:01,350 So, back in our index.html file, below the main heading and paragraph, 18 00:01:01,350 --> 00:01:05,560 add a set of opening and closing <ul> tags, and 19 00:01:05,560 --> 00:01:10,088 inside the ul write Home, then below that About, 20 00:01:10,088 --> 00:01:14,595 Articles, and Contact. 21 00:01:14,595 --> 00:01:19,500 When you think of a list, you imagine each item in the list placed on its own line. 22 00:01:19,500 --> 00:01:23,225 Well, the UL tag, by itself, will not display a typical list. 23 00:01:23,225 --> 00:01:26,744 As you can see here in the browser, all items are placed on the same line. 24 00:01:26,744 --> 00:01:29,992 So, to specify the individual items of a list, 25 00:01:29,992 --> 00:01:34,337 you place them inside LI tags, which stands for list item. 26 00:01:34,337 --> 00:01:36,617 So, back in our list, let's add opening and 27 00:01:36,617 --> 00:01:39,247 closing <li> tags around each menu item. 28 00:01:54,777 --> 00:01:59,983 Each LI now represents an item in the list, and LI tags, when placed or 29 00:01:59,983 --> 00:02:04,510 nested inside a UL tag, are displayed using bullet points. 30 00:02:06,110 --> 00:02:08,798 Again <ul> stands for unordered list, 31 00:02:08,798 --> 00:02:13,570 meaning the order in which the items are displayed is of no significance. 32 00:02:13,570 --> 00:02:16,893 So for example, if you're creating a shopping list, the order in which 33 00:02:16,893 --> 00:02:20,880 the items appear doesn't matter, you just need to buy every item listed. 34 00:02:20,880 --> 00:02:23,580 But if you need to list items in a specific order, 35 00:02:23,580 --> 00:02:28,460 like step by step instructions of a recipe or a list of your top 10 favorite movies, 36 00:02:28,460 --> 00:02:32,590 then you can use an ordered list using the <ol> element. 37 00:02:32,590 --> 00:02:37,410 So we'll change the opening <ul> tag to an <ol> tag, and 38 00:02:37,410 --> 00:02:38,600 we'll do the same for the closing tag. 39 00:02:38,600 --> 00:02:41,802 We'll give it a save, and as you can see in the browser, 40 00:02:41,802 --> 00:02:47,860 the <ol> element uses numbers instead of bullet points in order from one to four. 41 00:02:47,860 --> 00:02:48,550 Ordered and 42 00:02:48,550 --> 00:02:53,940 unordered list can also be nested inside other lists to create multi-level lists. 43 00:02:53,940 --> 00:02:59,430 So back on our list, I'll change the <ol> tags back to <ul> tags. 44 00:02:59,430 --> 00:03:05,260 Then I'll expand the contact list item, and below the word contact 45 00:03:05,260 --> 00:03:09,920 let's nest an unordered list by typing a set of opening and closing <ul> tags, 46 00:03:10,980 --> 00:03:16,110 and in this list I'll create three list items but you can add as many as you like. 47 00:03:16,110 --> 00:03:17,664 So, I'll start with Email. 48 00:03:21,027 --> 00:03:28,790 Below that I'll create a list item for Phone, And a list item for Address. 49 00:03:31,256 --> 00:03:37,294 I'll give the file a Save, and over in the browser, notice how when you nest a list, 50 00:03:37,294 --> 00:03:42,040 the browser adds indentation to give the list structure. 51 00:03:42,040 --> 00:03:44,620 So notice how now our list resembles an outline. 52 00:03:44,620 --> 00:03:50,590 So to recap, unordered lists display bullets, ordered lists display numbers, 53 00:03:50,590 --> 00:03:53,930 and you're able to nest lists inside list items and 54 00:03:53,930 --> 00:03:57,340 use a combination of <ul> and <ol> tags to create a list. 55 00:03:57,340 --> 00:04:02,122 Now I'm going to delete the nested UL inside the main UL. 56 00:04:02,122 --> 00:04:06,950 But to let you experiment with lists on your own I've posted a tech snippet in 57 00:04:06,950 --> 00:04:10,360 the teacher's notes about the top VR resources. 58 00:04:10,360 --> 00:04:14,380 So go ahead and add that text below the blog entries here, and 59 00:04:14,380 --> 00:04:16,200 turn it into an ordered list and 60 00:04:16,200 --> 00:04:19,180 feel free to pause this video while you grab the text and create the list. 61 00:04:20,230 --> 00:04:25,540 So first, I'll paste the text into the page just above the closing body tag. 62 00:04:30,740 --> 00:04:34,730 So this new Top VR Resources content is indirectly related 63 00:04:34,730 --> 00:04:37,200 to the Latest VR Articles section. 64 00:04:37,200 --> 00:04:39,500 So its heading shouldn't hold equal or 65 00:04:39,500 --> 00:04:43,480 a more importance than the Latest VR Articles h2. 66 00:04:43,480 --> 00:04:49,590 So we'll mark up the resources heading as a sub-heading of the H2 using an H3. 67 00:04:53,910 --> 00:04:59,310 Then, we'll place the list inside an ordered list by wrapping it 68 00:04:59,310 --> 00:05:04,675 inside a set of <ol> tags, And 69 00:05:04,675 --> 00:05:07,460 we'll place the items inside a <li> tags. 70 00:05:20,262 --> 00:05:25,037 All right, let's save our file, refresh the browser, and there you have it, 71 00:05:25,037 --> 00:05:26,690 our top VR resources list. 72 00:05:26,690 --> 00:05:29,670 So in the next video, I'll teach you about links, 73 00:05:29,670 --> 00:05:31,360 the most important feature of the web.