Summary of HTML Lists

Okay, let's talk about a little more complex HTML element, and that's for lists. I'm going to delete the whole code because it's going to cramp. Let's talk about lists. So there are different kinds of lists. Have you ever seen a bullet point list? So that's called an unordered list. So to make that in the HTML, you have to open the tag called UL, which stands for unordered list. So less than UL, greater than. And make sure to put the closing tag as well. So between the opening and closing tag, we're going to write list item tags. So this is a kind of new to us, because before we had just a simple one element. Now this is a tag within the tag. So we're going to write less than li, greater than. Don't forget the closing, and then we're going to type some tags here. First point. And I click run on top left. So this is how it appears visually. So there's a bullet point, and there's first point, whatever I typed between the li. Usually when I open this, I like to add indentation. One, two spaces to make me visualize, oh, okay, so this li is inside a UL. This is optional just for programming purposes. We'd like to do that. So we have a UL, and if you want more bullet points, all you have to do is add more li's inside the UL. So we can break a line or not. I can write it here, or I can write in a new line. I think it looks better in a new line. So open the li, make sure to close it, and in between the tags, type second point, click top left run, you're going to see there's another bullet point. So you keep going following the same pattern, and you can add more and more bullet points. So I can just go here, add another li, third point, run. So it's important that all these li's be within the, between the opening and closing tag for the UL. Okay, if you put outside, it's not the proper way to do this. It has to be always inside or within the UL. When I say within, I mean between the opening and closing tags, okay? When you see an element is inside another, between the open and closing tag, or this element is a child of this element, this element UL being the parent element, while all these li's are the children elements, okay? That's another notation or way of saying these things. Okay, that's nice. There's also other kind of list, right? Remember there's one, two, three kind of lists, when there's a number one period or one dot two and then three. That's called the ordered list. And to do that's pretty much the same pattern. We have an element covering all the li's. And to change this bullet point list into that kind of list, it's very simple. Instead of UL, you're going to change it to OL. Don't forget to change the closing tag as well. So this is called ordered list. Click the top left run, and there you can see the bullet points turned into one, two, three, and so on. If you want to add more, again, just add more li's within the open and closing OL.