Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
There are three types of lists in XHTML and HTML. There is the Unordered List, the Ordered List and the Definition List. So we'll start our discussion with the Unordered List and here an example in the text editor on the top and we have browser on the bottom. The Unordered List is specified with the ul tag, which is container. It's a block level element and it contains Line Items using the li container, which is also a block level container. li for the Line Item.
So you can see it's rendered down here using bullets. So you can change the types of bullets by specifying different type up here. You say type = "disc". Disc is the default, so we'll just show that one real quick. I'll save and reload and you will see that it doesn't change at all. "circle" is like the disc only. It's open. There is circle and "square" is the other type and you will see it's rendered here in the Firefox browser with a solid square.
These may be rendered differently in different browsers, so you might want to check the different browsers that matter to you and see how they are rendered there. You can also nest list, and I'll show this here with a nested list. Save that and reload and you'll notice that the nested list has these circles as a default. The outer one will have the disc as the default and save and reload, you will see the outer one has discs.
The next level in has circles and if we nest yet another level, which we can do here easily with a little cut and paste. Copy and I'll go ahead and paste it here and we'll indent that a little bit so it makes sense and save and you will see we have two levels of nested items and the inner level has squares. The choices may be different, but they will try to use a different type of bullet for each level, and of course it will cycle them after three levels.
So that's the Unordered List. Let's take a look at the Ordered List now. The Ordered List uses the ol tag which is a block level tag and the items are the li tag for Line Item. Here is what it looks like in the browser. You will notice it's counting 1, 2, 3, 4 and it's using standard numbers for the list. You can change the type using the type attribute and you can say "A" for using the alphabet to number them.
You can use a lowercase "a" to get lowercase alpha, save and reload. You can use hit "I" for Roman numerals. That's an uppercase "I" for uppercase Roman numerals and you can use a lowercase "i" for lowercase Roman numerals. You can also spell it out. You can say upper-roman for uppercase Roman numerals, reloading there. You can say lower-roman for lowercase Roman numerals, save that and reload.
You can say upper-alpha for uppercase alpha and save that and reload or you can say lower-alpha for lowercase alpha. And of course, you can say a number to get the default, which is the numbers. Save and reload. You can also nest the Ordered List just like you can with the Unordered List.
I'll go ahead and use copy/ paste to get my list here. And save that and reload. See, I closed it with the wrong tag there. You want to close it with the same tag that you are using and then it will work as you expect. There we go. So the outer one is numbered 1, 2, 3, 4 and the inner one is 1, 2, 3. I can change the type of the inner one if I like so that I have some sort of a structure to my outline and of course you can do this in whatever way makes sense for you.
The Definition List is our final type of list and this is very different than the Ordered List and the Unordered List. The Definition List is used for defining terms and it looks like this in the browser. So the outer container is dl and that's a block level element and inside you have dt for the Definition Term and dd for defining the definition itself. You see these are rendered in this way. The Definition Term is 1 and the definition is the first non-zero number 2, which is here and the Definition Term and the dd is the number after 1 and so on.
There aren't any options for the rendering of the Definition List, but of course you can format it using CSS. So these are the different types of lists. You have three types of list. You have the Unordered List, the Ordered List, and the Definition List and they look like this in the browser, Unordered List, Ordered List, and Definition List.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 105445 Viewers
56 Video lessons · 117130 Viewers
71 Video lessons · 86351 Viewers
131 Video lessons · 41267 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.