Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Lists are incredibly useful ways for organizing content. HTML gives us three different types of lists to use based on how our content needs to be organized. Let's take a look at all three of those by opening up the lists.htm found on the 03_05 directory. Just underneath the h3 element that we have here are Ordered and unordered lists. We have some items that appear to be destined for a list. The first two types that we are going to tackle are ordered and unordered.
Now, you may have referred to them before as numbered or bulleted lists. They are really the same thing. So here we have item one, two, three, four. This is exactly what we need. The list syntax for ordered and unordered lists are exactly the same, and that's why we are sort of tackling them together. The first thing I am going to do is I am just going to create a little bit of blank space here. This isn't necessary for formatting a list; it's just necessary to make it little bit more readable for all of us. So above all these item properties I am going to go ahead and create a ul tag.
ul stands for unordered list, and that is the parent-level tag that's going to wrap the entire list. And I am going to do the same thing at the bottom of all those list items, unordered list. That's step one. Step two would be to identify the items within the list themselves. A browser can't just sort of guess how many items you have in a list. Right now it thinks you only have one, which is all this text that's we are looking at here. So we need to identify the fact that each of these guys are individual items within the list, and we do that by using the list item, or li tag.
So I am going to go ahead and wrap item one in a list item tag. Now, go ahead and do that for the rest of the items, and just go ahead and remember to do the opening and the closing tags for these list items. Now, one of the interesting things about the li tag, everybody when they first start doing lists they do them like this, which is here is my list item and here is some text inside of it. And sometimes that will pass along the mistaken impression that the only thing that you can have an inside of a list is text.
You can place almost anything you want to inside of a list item. As a matter of fact, if you look inside the HTML specification, what it's going to say-- at least in the HTML5 Specification--it's going to say that any items that's considered part of flow content can go inside a list item. Now what's flow content? Just about anything: paragraphs, headings, images, other lists. So really, inside of a list item you can put anything you want, and that means that our list can become, if we want them to be, incredibly complex structures that represent organized data in a really, really complex way.
So if I save this and preview this in one of my browsers, I can see, there is our list. And because we used an unordered list, you can see that we have bullets showing up in the place of numbers. It's quite common to need to nest lists from time to time, and it's easy enough to do in a word processing program. You just sort of highlight the ones that you want nested and you click the right indent button, and there you go. It doesn't quite work that way when you are coding it by hand. You have to pay attention to the syntax, and essentially what happens is, you are going to be nesting one list inside of another one. But you are not actually nesting the list inside of another list; you are nesting it within a list item.
So for example these items 3.1, 3.2, and 3.3 obviously are referencing item 3. These guys are going to be wrapped inside of another list, which is inside this list item. Now, that may seem a little confusing, so let me kind of show you how this works. What I am going to do, just for readability's sake, is I am going to take this list item and I am going to hit Return on this. I am going to cut this, just to make this a little bit easier for us to see what's going on here, and then I am going to create a new line underneath those submenu items and paste that closing list item text.
So now you can see what's going on here. These three list items are now part of this list item. That doesn't mean anything right now, because I need to wrap them and let the browser or the user agent know that, hey, there is an unordered list inside this. To do that I am just going to use another unordered list tag. And I have got to remember to open and close that tag properly. So let me indent this a little bit so you can get a better feel for what's happening here. So you will notice that here is the opening list item.
Here is the closing list item. Inside that we have not only the text that identifies that, but we have an unordered list inside of that, and that is how you nest the list. A lot of people get confused about that syntax and they will try to close the list item and have another unordered list happen right after it. It does not work, because what happens to the browser is the browser sees an unordered list, it goes down and sees all of the list items, and then it sees another unordered list, and it assumes that the first one has ended. So what you end up with is not a nested list, but two lists stacked right on top of each other.
So just make sure that any nested lists are inside the list item that they apply to. So if I save this and go into the browser and preview that again, you can see that now those items are indeed going to nest. What's the difference between an unordered list and an ordered list? In terms of your code, not a lot. If I go up to the parent-level unordered list tag and I change that from a ul to an ol-- and remember to change the proper closing tag as well-- if I save this and then refresh it, you can see that now instead of those bullets we have a nice ordered list with items one, two, three, and four.
There is not that much difference in terms of code. I mean, you are just using one letter instead of another one. But what is actually changing on behind the scenes? Well, now we have information that's not only organized in a list, but it's organized in a list in a very specific fashion. Now, one of the best ways that I can describe to you when to use an ordered list versus when to use an unordered list is think about this: If you had a list and you jumbled up all the items in the list, would it still make sense? If the answer is yes then you have an unordered list on your hands. If the answer is no--for example, maybe you are giving somebody step-by-step instructions on how to get your house-- that's going to be an ordered list.
There is always a judgment call made as to whether you want something in an ordered list or an unordered list, but really, that is the logical reason behind using those. Now if you are saying to yourself, well, yeah, but I don't want numbers to show up. I want something else. Well, that's fine. CSS can do that for you. It can cause those numbers to go away, and you can even replace them with your own specific icons if you wanted something other than that out there. So don't let that be the deciding factor, in terms of how you want the list to display. Rather, think about how the list should be structured logically.
Now, there is one more thing that we can do to our ordered list. All these lists have certain attributes. Most of the attributes of lists have been deprecated, meaning they're no longer a viable part of the HTML specification, but there's one for the ordered list that's been brought back in HTML5 and that is the start attribute. So if I go up to my opening ordered list and I type in the word start and then equals and then I can just type in whatever number I want--let's say 6 for example in quotation marks-- now what that's going to do for me is it's going to cause this particular list to now start at 6.
So there is no mechanism in HTML that says pick up and continue numbering from the list above me or the list on the previous page, but you do have the ability to go in and manually set a start for that particular list by using that attribute. So there's one more list that I want to tackle really quickly, and that is what's known as a definition list. And you're probably going to see ordered lists and unordered lists more than you will definition lists, but these are incredibly useful lists to use, so let's take a look at the syntax of those. Going back into our code, just below the h3 we have Term one and then we have Term one definition, and we have Term two, Term two definition, and of course it carries on for Term number three.
Definition lists are just that. They are term then followed by definition. Think about a glossary or frequently asked questions or something like that where you have an item and then some information about that item, an individual and then maybe the person's bio. So there is all sorts of different reasons for using definition lists and they have this sort of really neat structure to them. Just after the h3 I am going to start a definition list by typing dl. So it's pretty self- explanatory in terms of what this is: ul unordered list, ol ordered list, dl definition list. But there is some differences in the definition list in terms of syntax.
Instead of identifying every time inside of it as being a list item, in a definition list we have to identify as being either a term or a definition. So, what I am going to do is I am going to go up to the term one and I am going to wrap that in the dt tags, which stands for definition term. Underneath that, I am going to wrap that in a dd tag, which stands for definition, definition. I am just going to follow suit for each of these. And if you're wondering, do I always have to follow this particular order? oddly enough, you don't.
You have some leeway. I've seen plenty of people do lists where they have multiple terms without a definition and then they'll add some more definitions. And yes, you can nest additional list and things inside of it, and inside these terms and definitions you can have whatever content you want inside of them the same way you can do with list items. So there is our initial structure here. We have a definition list and then we have terms followed by definitions. This is sort of the basic, if you will, structure for a definition list. If I save this, again go out to my browser and refresh that, you can see that most browsers are going to render definition lists in this manner.
They are going to have the term left-aligned and then the definition they are going to sort of indent down that little bit. Of course, using CSS you can style that any way that you want. You can italicize things, bold things, put them on the same like. You can really format that any way that you want. That's just the browser default formatting for it. Be sure to take some time to practice this syntax for these lists so that you understand exactly how they are structured and how nesting the list inside of each other, how that works. You are going to use lists far more often than you might think at first glace. They are great for organizing menus, form elements, product information, any content that needs to be grouped together in a related manner.
Their flexibility and utility make them among the most commonly used HTML elements, so once you are used to their syntax, you are going to find yourself using them all the time.
Get unlimited access to all courses for just $25/month.Become a member