Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
HTML provides support for three basic types of lists. Let's take look at them. Start by making a working copy of lists.html, and I'll rename this to lists-working.html. And I'm going to open it in my text editor, and here we have a simple HTML file with the three different types of HTML lists. Let's also go ahead and open this in the browser, and here we have these lists in the browser. So the first type of list here is the ordered list. And you see it's contained in the ol element, and each of the items in the list are li elements. And that's the same with the unordered list, use the li elements in both the ordered lists and the unordered lists.
So your ordered list is ol and the unordered list is ul. Now if we look at this in the browser-- and I can make these side by side here-- you see that in the browser, the ordered list has 1, 2, 3 and the unordered list has these bullets. And then down here we have what's called a definitions list or a descriptions list. In previous versions of HTML, this was called a definition list, and in HTML5 it's called a description list. It's effectively a list of sets of names and values.
So in this case we have dt, which we can think of is the term, and it's One; and dd, which we can think of as the description or the definition, and it says, The first non-zero number; and so we have one, two, three, four and we have these descriptions of one, two, three, four. In the ordered list, we can specify the type of ordering, and there is a few options here. We can say type=1 and we get the same kind of list that we've been looking at here.
If I reload it, it just says 1, 2, 3. Now if I change this, I say a, with a lowercase a, we reload it, we'll see now it says a, b, c. And I can use a capital A if I like and reload that and we have now capital A, B, C, or I can create roman numerals. If I say lowercase i, we get lowercase roman numerals and if I put it in an uppercase I, we get uppercase roman numerals. In the unordered list, the type attribute is considered obsolete in HTML5.
In previous versions of HTML, it would work just like this. And of course, this still works in our browser. We can say disc and that is exactly the same as what we have here. We can say type=square and we get a square for the bullets. And if we say type=circle, we get a circle for the bullets. But in HTML5 this is actually obsoleted, and we are supposed to use CSS for this. Instead, I can say style=. And I can say list-style-type, and I can say disc, and we get the disc, which is the default; or I can say square, and we get the square; or I can say circle, and we get the circle.
In fact, I can use this as an ordered list, and I can say type=decimal, and when I reload this, we now have 1, 2, 3, like an ordered list. Or I can say lower-alpha and et cetera, or there are even other options. I can say katakana and I get Japanese katakana, or I can say Armenian, and I get Armenian. So there are many options here. And in fact, you can use this in the ordered list as well, so there's really no longer any need to use the type attribute, even in the ordered lists.
HTML provides support for these three basic types of lists, and we'll cover more about this feature in the rest of this chapter.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 96523 Viewers
56 Video lessons · 110263 Viewers
71 Video lessons · 79064 Viewers
131 Video lessons · 37911 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.