Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
HTML provides several tags for displaying lists. Let's go ahead and make a working copy of lists.html, and I'll name this copy lists-working.html, open that in my text editor, and you can see we have some lists down here, various types. I will go ahead and display this in the browser as well. So up at the top here, we have an ordered list, see it's displayed as 1, 2, 3, One, Two, Three, and that's created with the ol tag which is of course a block level container, and each of the items with the li tag which are actually in-line level containers and that creates this ordered list. The unordered list is created exactly the same way except with ul as the outer container and li as the inner container, and it just comes up with these bullets. And in fact, if I were to nest another one inside of it, and I'll just go ahead and indent this so we can see that it's nested, and save that, and come over to browser and reload it, you see we get a different type of bullet. And if I go ahead and paste yet another one inside of those, you will see we get a different type of bullet again, and likewise if I nest the ordered list, in this case I just get numbers again. But if I wanted to do this differently, if I wanted to have say Roman numerals or something like that, it's actually possible in CSS to change the way that these behave. So we'll talk more about lists later on, and we'll see some more examples of how we can format these. Let's just talk about this one final type of list down here at the bottom, and this is the definition list. You see its--dl is the outer container and we have inner containers of dt and dd, so that's the term and the definition. And so we have one is the first non- zero number, two is the number after one, three to get ready, four, now go, cat, go! And these are formatted like this. Now I tend to indent these dds under the dts and you'll see some people will format it more like this. Of course, the indenting is entirely ignored by HTML. It's just going to display the same either way. So HTML list elements can be very flexible especially when combined with CSS, and we will revisit this subject later in this course.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98934 Viewers
61 Video lessons · 86222 Viewers
71 Video lessons · 70072 Viewers
56 Video lessons · 102298 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.
Your file was successfully uploaded.