HTML Lists

[00:00:00]
>> So let's move on here. We're gonna start out by talking about the humble list. Last week on Twitter I asked people how many kinds of lists there are in HTML. So I will ask you all here again, how many kinds of HTML? We don't mean how many kinds of tags like LI as a tag, we mean how many kinds of lists.

[00:00:20]
Anyone wanna take a guess at that? Online or here in person, it's a number. How many, pardon?
>> Two.
>> Two.
>> Ordered list, unordered list.
>> We have one vote for two, other votes? Concurrence, concurrence, concurrence, okay. Everybody in the class here is saying two. How about online, how many kinds of lists are we saying online?

[00:00:45]
>> Three, three, two, three, two three, two.
>> There are four [LAUGH] there're four in HTML that are content oriented, there're two that are oriented towards forms. And so briefly for the ones that are oriented towards forms, there's one select element, okay? Write that drop down that comes down, it's really ugly, that is technically a list.

[00:01:09]
Also there's another one, data list that you might be familiar with. You associate data list with a blank on the page like a text input and when you start typing, it'll match to whatever is in that data list, okay? So those are two on forums, I'm not gonna talk about it at all but for the purpose of content four kinds of lists and we're gonna go through them all.

[00:01:34]
So the four kinds of lists are as follows. We have bulleted lists and the number lists, ordered and unordered kinds of lists and those are the ones you're most familiar with. That's why you all said two cuz you kinda know those two. Description lists which are formally called definition lists are for key value pairs, one of my favorite HTML elements that are out there.

[00:01:58]
Be willing to associate two pieces of data together, super fun. And then menus are so called interactive lists. So if you are making a button bar, button the element and you have a series of buttons on that. Maybe cut, copy and paste or maybe reply, reply all, forward like an email kind of button group, this is the way to mark it up is with the menu, okay?

[00:02:23]
So not oriented towards text links but oriented towards JavaScript buttons and we're gonna talk about all of these in a little bit detail and we'll learn selectors along the way. So with that let's code. If you're following along on the website, this is semantics-selectors.css.education, this is the website that goes with what we'll be covering today.

[00:02:45]
If you wanna scroll on down here, we have just finished chapter 1. This is our overview and prerequisites. We took a look at some slides and here's just some background about what you're gonna need in order to take this course. You can read on that on your own and test to make sure that you have the right level of HTML and CSS background and the kinds of technologies that we'll be using today, that's all that's covered here.

[00:03:09]
All right, so let's go through them for our lists and selectors, let us take a look at what we have been missing. So we're going to start with our ordered and our unordered lists and we'll start here with our code pen. So just briefly because I'm sure that a lot of you remember this although hell, based on what I see from Markup I don't know guys, that's why we're going through this.

[00:03:34]
Unordered lists are just designed to be a list of things. They can go in any order, you can do them in any order, you can visit them in any order, there's no ranking implied, it's just a group of things. And the way you mark those up pretty straightforward.

[00:03:50]
You start with ul for the unordered list, you end with slash ul and there's a bunch of LIs in between. All that stuff about list roles and all of that happy thing, all that stuff is baked into this so use it when you have a list of things.

[00:04:04]
The next one is the ordered list. Now the ordered list is kind of fun because it has a few additions that the unordered list does not have. So here's a few attributes you probably aren't aware of. So ordered list of course implies that you do this thing first and then you do this thing and then you do this thing.

[00:04:22]
So it's a list that goes in a very specific order. You start with number one, then you go to number two or it could be like a ranking kind of thing, this is the first place, this is the second place. Because those numbers are significant there are some attributes that are associated with this that may also be of a significance for you.

[00:04:44]
So one of these is if we said reversed, okay? We said reversed, notice we can just flip our numbers right around. So that's 3, 2 and 1 instead of 1,2 and 3. Again, this applies when you put it in your HTML as opposed to putting it in your CSS, right?

[00:05:07]
Because of course you could do something with reverse numbers, maybe in CSS or something. Here you're implying that there is a reason, you're trying to communicate something with these numbers. It's not just to look cool, it is you're actually communicating meaning behind these numbers. So here we're putting the third place finisher first, followed by the second place finisher, followed by the first place finisher.

[00:05:32]
That is the purpose of the reversed attribute. How many people knew about that one? Nope, cool, super fun. Then we have start =, some number. So let's say we wanna start at number 6 and. Then it will start numbering from number 6 right there on the page. So that is what that HTML looks like, the start attribute and then you can put a number inside of it.

[00:06:05]
It'll start numbering from there. I haven't tried to combine that with reversed. Combine those, does that do a thing? Yeah, 6, 5, 4. So you can combine those two attributes in order to start at some numbering go backwards. And then the last one has to do with type.

[00:06:31]
type = something like this and a would be for lower case letters. Oops, I got rid of my closing bracket there. That's why that first bullet didn't work, okay? So a,b, c, right? There's also the ability to do Roman numerals, lowercase i. So we have i, ii, iii.

[00:06:59]
So this type of numbering where it matters whether these are Arabic numerals or Roman numerals or letters, that is important and things like law and government where you're referring to certain sections of code, this becomes a really useful way of doing that. And again, we're communicating meaning because we're doing it through our HTML not our CSS, okay?

[00:07:21]
And as it says right here in the note, unless the type of the list number matters like legal or technical documents where you're referencing their number or letter, use the CSS list style property instead. So that's how we differentiate those two, doing it in the HTML doing it in the CSS, all right?

[00:07:36]
And then the last one is the nested lists and I'm sure that you all know this one also but the number one mistake that I see is when I teach beginners. This is the first thing that I asked them after we talk about lists is notice here on line 41 we do not have an LI after this particular item because we have list nested inside of it, see how we have ol, li, li, slash ol, and then slash li.

[00:08:04]
So the nested list needs to be inside of a list item. Doing this thing where we say /li, and then close our lists like this may or may not lead to the results that you want. It may render just fine but it may wind up being weird things particularly when we get to styling with selectors and so forth.

[00:08:29]
And may lead to other weird things happening again, when you get to mostly to advanced styling types of things and who knows what every browser is going to do when you markup your HTML incorrectly. So that's a few little tips there. You can always come back to this code pattern if you want it here for reference or fork it to your account even better and then you'll have it to refer to later.