Creating Lists5:31 with Guil Hernandez
Lists are an important component of web design and front end web development. Just about every website or application on the web uses lists to display navigation menus, shopping cart items, movie listings and more.
We've all created lists before. 0:00 Grocery list, a list of our favorite restaurants and movies, or 0:02 a list of guest we want to invite to a party. 0:05 Lists are an important component of web design and firm and web development. 0:07 Just about every website or application on the web uses lists 0:11 to display navigation menus, shopping cart items, movie listings and so much more. 0:14 HTML provides three elements for creating list, <ul> for unordered list, 0:20 <ol> for ordered list, and <dl> for description list. 0:25 The DL element is used to create groups of terms in descriptions, like in a glossary. 0:30 It's not as common as the other two lists, so 0:35 I'm not gonna cover it in this course, but I've posted resources and 0:37 examples of description lists in the teachers notes of this video. 0:40 Now let's create a list of the different sections that will make up our website, 0:44 Home, About, Articles, and Contact. 0:48 We'll mark up the list using the UL element. 0:50 UL stands for unordered list. 0:53 So, back in our index.html file, below the main heading and paragraph, 0:55 add a set of opening and closing <ul> tags, and 1:01 inside the ul write Home, then below that About, 1:05 Articles, and Contact. 1:10 When you think of a list, you imagine each item in the list placed on its own line. 1:14 Well, the UL tag, by itself, will not display a typical list. 1:19 As you can see here in the browser, all items are placed on the same line. 1:23 So, to specify the individual items of a list, 1:26 you place them inside LI tags, which stands for list item. 1:29 So, back in our list, let's add opening and 1:34 closing <li> tags around each menu item. 1:36 Each LI now represents an item in the list, and LI tags, when placed or 1:54 nested inside a UL tag, are displayed using bullet points. 1:59 Again <ul> stands for unordered list, 2:06 meaning the order in which the items are displayed is of no significance. 2:08 So for example, if you're creating a shopping list, the order in which 2:13 the items appear doesn't matter, you just need to buy every item listed. 2:16 But if you need to list items in a specific order, 2:20 like step by step instructions of a recipe or a list of your top 10 favorite movies, 2:23 then you can use an ordered list using the <ol> element. 2:28 So we'll change the opening <ul> tag to an <ol> tag, and 2:32 we'll do the same for the closing tag. 2:37 We'll give it a save, and as you can see in the browser, 2:38 the <ol> element uses numbers instead of bullet points in order from one to four. 2:41 Ordered and 2:47 unordered list can also be nested inside other lists to create multi-level lists. 2:48 So back on our list, I'll change the <ol> tags back to <ul> tags. 2:53 Then I'll expand the contact list item, and below the word contact 2:59 let's nest an unordered list by typing a set of opening and closing <ul> tags, 3:05 and in this list I'll create three list items but you can add as many as you like. 3:10 So, I'll start with Email. 3:16 Below that I'll create a list item for Phone, And a list item for Address. 3:21 I'll give the file a Save, and over in the browser, notice how when you nest a list, 3:31 the browser adds indentation to give the list structure. 3:37 So notice how now our list resembles an outline. 3:42 So to recap, unordered lists display bullets, ordered lists display numbers, 3:44 and you're able to nest lists inside list items and 3:50 use a combination of <ul> and <ol> tags to create a list. 3:53 Now I'm going to delete the nested UL inside the main UL. 3:57 But to let you experiment with lists on your own I've posted a tech snippet in 4:02 the teacher's notes about the top VR resources. 4:06 So go ahead and add that text below the blog entries here, and 4:10 turn it into an ordered list and 4:14 feel free to pause this video while you grab the text and create the list. 4:16 So first, I'll paste the text into the page just above the closing body tag. 4:20 So this new Top VR Resources content is indirectly related 4:30 to the Latest VR Articles section. 4:34 So its heading shouldn't hold equal or 4:37 a more importance than the Latest VR Articles h2. 4:39 So we'll mark up the resources heading as a sub-heading of the H2 using an H3. 4:43 Then, we'll place the list inside an ordered list by wrapping it 4:53 inside a set of <ol> tags, And 4:59 we'll place the items inside a <li> tags. 5:04 All right, let's save our file, refresh the browser, and there you have it, 5:20 our top VR resources list. 5:25 So in the next video, I'll teach you about links, 5:26 the most important feature of the web. 5:29
You need to sign up for Treehouse in order to download course files.Sign up