This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.
Transcript from the "HTML ID’s" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Brian Holt: IDs are quite similar to classes, that you're gonna put them on there, and it's just kind of another way of labeling, what you're having on there. The big difference in ID's is that they are unique to your page, right? So in the previous example we saw picture groups, right?
[00:00:21] We can have ten picture groups, we can have ten blog posts, we can have ten paragraphs. They're kind of things you can have multiple of, and they're reusable, right? I guess that's the biggest thing I'm trying to get at is that they're reusable.
>> Brian Holt: IDs are different that they're totally unique to your page.
[00:00:43] So, like for example if I had ten blog post and I would needed to address only the second one I could call that one blog-post-2, right? Like you're only gonna have one blog-post-2 on your page.
>> Brian Holt: That kind make sense a little bit. Yeah, yeah that's the example I used, good for me.
[00:01:07] [LAUGH]. So yeah classes are made to be reused. You're creating classes because you say like this is going to be useful and you wanna make things as generic as possible, right? Because the idea with writing this html is you want components to be reusable so that when I go create my third blog post, I don't have to redo everything I did for my second blog post.
[00:01:31] I can just reuse everything I used from my first post. And it goes back to, developers are lazy and we wanna do the absolute least amount of effort to get the thing done. Again this will become more applicable with CSS. Or rather probably it will just make it more concrete anyway.
[00:01:54]
>> Brian Holt: So, let's just go straight to the code ben.
>> Brian Holt: Resolving host.
>> Brian Holt: There we go, okay. So as you can see here, more cat pictures. Surprise, surprise, okay. So here I have two groups of cat pictures, right? And say, I, for whatever reason, like I needed to hide group-2, right and I only wanted to hide the second one and I didn't wanna hide the first one.
[00:02:43] I now have the ability to kind of hook into that and say, only hide group-2 and keep group-1, or something like that. So they're just kind of like, again, labelling your Tupperware, but even being more specific. So I cannot put another group-2 on this page. So here's the reason why this name is actually a bad name, right?
[00:03:07] Group-2 is really not that descriptive because let's say, I have like, blog-posts-groups, right? And I say group-2, right. Am I referring to group-2 of the picture-groups or group-2 or the blog-posts-groups? So you wanna be specific enough but as general as possible. There you go, that's [LAUGH] that's your contradiction for the day.
[00:03:28] Be as specific as possible.
>> Speaker 2: On the IDs and classes they were asking about like, how many IDs can you use versus classes? Can you just explain that?
>> Brian Holt: Totally, you can only have one ID. Like, that's like hard and fast rule only have one ID, right? Because ID's in themselves are unique so there's no point in having multiple groups, right?
[00:03:48] You can have as many classes as you want, which is kind of fun because now you can mix and match them, right? Let's say, I have, let's just modify this a little bit. So I'm just gonna put another group here, this is now group-3, right? Okay. So all I've done is just added more cat pictures.
[00:04:11] But let's say I really wanted to emphasize both first group and the third group, for example, right? What I would do is, I would say emphasis-group or something like that. Some name like that, right? And then here, on the picture-group, I can also put that as well. So now you can kinda mix them together, right?
[00:04:34] So you can have, I don't know, going back to our contrived Tupperware example, you can have this is a vegetable, and this is also meat. Right, it has both of these things in there, so I'm gonna label with both of these things, right? So in this particular group I wanna it to have all the attributes of being a picture group, but I also want you to know like this one's actually really special so I'm gonna emphasize that one as well.
[00:05:02] That's a great question. But now the second one it lacks the emphasis-group so it's not gonna have the emphasis-group qualities it's just gonna have the picture-group qualities.
>> Speaker 2: And that's only if you have CSS?
>> Brian Holt: If this is gonna be used a lot in CSS and can be used a lot as well in JavaScript.
[00:05:24]
>> Speaker 2: But within the browser, that class label does absolutely nothing except-
>> Brian Holt: Correct.
>> Speaker 2: Okay.
>> Brian Holt: Yeah, there's no special classes, right? Everything that you do with class is gonna be something you define. Either style that you define or behavior that you're gonna define. That's what their one for labeling your containers, right?
[00:05:49] For example, I see picture-group and I know that one's a picture-group, right? Or I can see emphasis, I know this is a special picture-group, right? So that's one of the uses but the second use, like the part the actually the users gonna see that's gonna be from the CSS and the JavaScript.
[00:06:12] It's good question.
>> Speaker 3: When the DOM interpreters going through parsing the page what does it do if it finds two identical ID's?
>> Brian Holt: I believe it actually ignores them, so it's good to get different based on different browsers. I know in old versions Internet Explorer will handle it differently.
[00:06:33]
>> Brian Holt: They're gonna go into quirks mode, which is a really bad thing. It just, does weird stuff to try and make your code work.
>> Speaker 3: It varies depending on what [INAUDIBLE]
>> Brian Holt: It'll vary based on your browser, but for the most part I think it will actually honor it.
[00:06:45] You can have group-2 and it would just apply everything-
>> Speaker 3: So it'll treat it more like a class then?
>> Brian Holt: Actually, I'm thinking about it. I think what it will do it will apply it to the first one only. That's my guess. And I guess the point of all of it is just don't do it, right?
[00:07:07] Yeah.