HTML Lists

An HTML element you'll probably use a lot is lists. 0:00 An HTML list is simply a list of items numbered or unnumbered. 0:03 Lists are used in a variety of ways. 0:07 We can see a couple of examples on the profile page. 0:09 There are currently two lists on this page, 0:11 the main navigation and this list of skills. 0:14 Both of these lists are being styled with CSS, so 0:19 that they line up horizontally, rather than vertically. 0:21 Let's convert this background information here into a list, so 0:24 that we can see what a list looks like by default. 0:27 So let's go to index.html, and first, 0:32 I'm going to delete these two paragraphs that we created in previous videos. 0:36 You can create a list with one of two tags, ul or ol. 0:41 ul stands for unordered list, and ol stands for ordered list. 0:46 To start, put an ol around the paragraphs. 0:50 To separate the items in a list, you need to nest another tag inside ol, 1:00 an li tag which stands for list item. 1:06 I'll replace these paragraph tags with li tags and 1:09 make each sentence its own list item. 1:12 And we'll indent these list items because they're nested inside of the ordered list. 1:34 And just for fun, let's add a fourth list item. 1:40 I'll just say, Fourth list item. 1:46 Let's save, refresh, and take a look. 1:53 And as you can see, by default, this HTML structure gives us a numbered list. 1:55 A ul, or unordered list, is the type of list you'd use for 2:00 items that don't have or need to be in any specific order. 2:04 Go back to index.html and change ol to ul and see what happens. 2:07 The numbered list becomes a bulleted list. 2:18 Now that you know how to structure web pages and work with some common 2:21 HTML elements, let's learn how to make these elements look fantastic. 2:25 In the next part of the course, cascading style sheets. 2:29