Learn to create unordered lists in HTML5 with the <ul> and <li> tags, then nest lists inside each other for indented sub-bullets. The presenter shows how Komodo auto-completes tags and demonstrates the output in Chrome and Safari, while recommending CSS over deprecated HTML4 attributes for styling.
This video will show you how to set up an unordered list in your HTML document. Now first off, what is an unordered list? Well, an unordered list is a list of items without a definite order. A good example of an unordered list is a batch of bullet points on a web page describing the benefits of using the XYZ thingamajig. For example, if that batch of bullet points were, say, the top 6 reasons you should own the XYZ thingamajig, then it would be an ordered list because of the definite order of that list. But since this video is on crafting an unordered list, let's go ahead and check out how to do that in our Komodo editor. And of course you can do this in any editor, I'm just using Komodo in this demonstration. I've already crafted a little bit of our content area here along with the basics of our HTML5 web page. I've got my H2 heading right here, that's what we're looking at here in the demo area. And an unordered list starts off with the ul opening tag. It's our opening bracket, ul, and our closing bracket. And the way Komodo is set up here, it automatically inserts the closing bracket. Sometimes that's a bit of a pain, but it'll work for now. I just hit my Enter key so that I can get a little working space here. And for the items in our unordered list, we need to have an opening and closing list item tag. And that's the opening bracket. And as you can see, Komodo automatically pulls up the li tag. And if I wanted to use that, I just hit my Return or Enter key And boom, it's just like that. It's there. I just need to close it out and Komodo automatically puts in the closing list item tag. And here I put my first list item. And you can just go on and on and on. And let's go ahead and put in another one here just so I can show you what it looks like whenever we render this in our demo area. Opening list item tag. Okay, let's go ahead and save this. And there it is. See how it kind of indents it from the rest of the content. And it puts these little round bullet points. Now there are some additional styling attributes you can add, but in HTML 4.01 those inline styling attributes were deprecated and they're no longer supported in HTML5. So there's no use in even going over that in this video, but I would suggest any styling that's going to take place in the HTML area be done in a CSS or Cascading Style Sheet anyway. So if you wanted to add different colors or different shapes or maybe even images instead of the default black round dot, then do so using Cascading Style Sheets or the CSS. I'm just going to paste this in here to save some time. And basically what I've done is instead of this next line being another list item, I went ahead and added another unordered list opening tag, a few list items opening and closing tags, and the closing unordered list tag, and then a couple of additional list items for the original unordered list. Let's go ahead and take a look at this. And you see not only is that second unordered list indented further, but it also has a different looking bullet. Let's go ahead and take a look at this in the Chrome browser. Where are we at here? Let's take a look at this in one more browser. Let's try the Safari browser. But that's it. That's an example of how to set up an unordered list and how you can even add additional unordered lists inside of the unordered list. And that's the end of this video on how to craft your unordered lists for your HTML web page. Thanks for watching and you have a great day.
