Lists

In this lecture we're going to talk about HTMLl lists. Now, lists are an incredibly useful HTML structure that allows you to group related content. If you think about it we, as regular people we think of things In terms of lists. To do lists, shopping lists, so on. And therefore it's totally natural that lists appeal 

to us as an organization tool. Let's go ahead and jump straight into the code and take a look as to how to implement these lists in HTML. 

Okay assignment sublime text and I'm looking at the document called unordered-lists-before.html. And the file is located in the examples lecture 07 folder. And as you can see her we have a list here in front of us, my typical dinner shopping list. Milk Donuts, cookies, some different types of cookies, and then obviously at the end, Pepto Bismol. So what we'd like to do is produce a bulleted list in our HTML document. So if you look at the page right now, the way it looks in the browser, is you can see there is no list. It's just a bunch of spaces in between them. And the reason that is, as I've told you before, all the different new line characters or any other separator characters such as tabs, extra spaces, they're really all ignored by the browser and only one space is honored. And since typically, our shopping list is not something we need to buy in order we can use an unordered list for this example. So the way you create an unordered list is you specify a ul unordered list ul tag around your entire content, and every item within the list Is in li tag, otherwise known as list items. So let's go ahead and indent this and surround every one of these items with and li tag. 

When we get to the cookies item we could see that the cookies item contains more than just the word cookies. It actually contains its own list inside of it. Which means the content of our li should really expand not just the cookies, but expand all the way to chocolate, sugar, and peanut butter. 

And it also means that we need to create another unordered list inside our cookies item. 

Let's go ahead and indent this and we'll surround each one of these items in an li as well. 

Last but not least, Pepto Bismol is supposed to be surrounded by an li tag as well, and that list item really belongs to our original unordered list. So let's save the document, and let's refresh and look at it in a browser. And here we go. We have our unordered list. As the last step, let's make sure that we actually wrote HTML that is valid and we'll cut and paste the HTML into the W3C validator. 

As you can see, our HTML page is valid But let's see what happens if I take one of the items in my unordered list and simply remove the li tags around it. In this case I remove the li tag around the Pepto Bismol list item. 

If we check it again, we see that the HTML that was written is now invalid and the reason is, it says, text not allowed inside ul In this context. And what it's telling you is that the only thing is allowed inside a ul element is an li element. Anything else is not allowed. 

There are lists out there that absolutely require some ordering to it. For example, I'm looking at ordered-lists-before.html in the same folder, examples > Lecture07. And here there's a very important procedure called Oreo cookie eating procedure and it's important that this procedure is followed step by step, without mixing up step one and step two. So as you can see in terms of our html, the only difference is that our ul tag got replaced with an ol tag, which stands for ordered list. But the li items are exactly the same. 

And the way we treat a sublist within an ordered list is also exactly the same as we treated it within the unordered list. So, for example, here we have make a double Oreo, which is list item that has its own step-by-step instructions. And it does appear inside an ol, which is ordered list, inside the lI item. So this item right here, contains an ordered list inside of it. Let's take a look what this page looks like, in the browser. 

And here's our ordered list. Our Oreo cookie eating procedure. Open box, take out cookie, make a double Oreo, has its own list. Which is peel off the top part, place another cookie in the middle, and put back the top part. And the fourth one is enjoy. Wow there's so many things you're learning in this course. In summary, lists provide a natural and commonly used grouping for content. Very often lists I use for structuring navigation portions of the web page. Next we're going to be talking about HTML character entity references.  

Video Images