Check out a free preview of the full Complete Intro to Web Development, v2 course:
The "HTML ID Attributes" Lesson is part of the full, Complete Intro to Web Development, v2 course featured in this preview video. Here's what you'd learn in this lesson:

HTML ID attributes are used for a specific and unique portion of an HTML document. Brian takes questions from students.

Get Free Access Now

Transcript from the "HTML ID Attributes" Lesson

[00:00:00]
>> Brian Holt: IDs are far less useful than classes, to the point that I rarely find myself using the IDs. In ID you only have one of one ID in a page, whereas I have multiple post here, if I go down here towards to have my ID right here, house metaphors post.

[00:00:22] So if I make an ID for something, you need to guarantee that that's the only one of those on the page. And you use IDs for relatively the same reason that you use classes, that you want to target them for styling. And you want to target them for JavaScript but it's basically like.

[00:00:40] You know a big flashing neon signs, like this one right here is a housing metaphor ID, and so I need to guarantee that that's the only one on the page. The reason why that's far less useful is because by definition it's not reusable, I can't reuse that because I can only have one of those.

[00:00:58] And as a program where I'm striving to write less code, I'm striving to like write this post styling, and then reuse it a bunch of different times. So therefore am stealing away from IDs because I can only use those ones, does that make sense? There's kind of like a legacy product as well, like I think they were somehow used previously, and these days we kind of recognize it's better to write things using classes.

[00:01:26]
>> Brian Holt: And ideally, you want IDs to not only be the only one on the webpage, but you want it to be the only one on your site.
>> Speaker 2: Would one instance be if you're assigning javascript to a specific Identifier.
>> Brian Holt: Yeah, that would be probably the most common way to use an ID.

[00:01:52] Even then, you could still use classes though. So some people will tell you absolutely never ever use IDs. I'm not gonna go that far. I will say that IDs are sledgehammers, and so therefore most problems that we have as programmers require more like, you know, small, normal carpenter hammers.

[00:02:20] However, there are problems that require sledgehammers, that's why sledgehammers exist. [LAUGH] Like, we have IDs, they are occasionally useful for things. That, so don't throw it away, don't say I'm never, ever going to use this, just very, very sparingly if ever. So I don't, I cannot remember the last time that I've use IDs but I introduced some to you because you will see documentation has a, you will see bad code that has that It's important for you to know what they are, but don't use them very much.

[00:02:58]
>> Brian Holt: Questions about that?
>> Brian Holt: Cool.
>> Brian Holt: So yeah, it looks something like this that you would say, notice that the house metaphors post, this ID name is very specific to what I'm talking about. This is very much, like when not to overextend house metaphors, and notice that my class, which is post, is very generic.

[00:03:25] So they're on opposite sides of the spectrum, that IDs strive to be very specific about what you're talking about. And post strive to be as generic as possible for that particular item. So this is the most generic thing that I could call this little container right here, is a post.

[00:03:41] That's why I called it that, because you want that bit of styling to be as reusable as possible.
>> Speaker 3: You meant class, because you said you want post to be as.
>> Brian Holt: Yes, so post the class, yeah, thank you.
>> Brian Holt: Yes.
>> Brian Holt: Other questions?
>> Brian Holt: So things can have ids and classes, things can have multiple classes, that's fine too.

[00:04:19] So maybe this is a featured post or something like that, and I would make that have additional style or something like that. So you can have multiple classes of the same thing, you cannot have multiple IDs, you can only have one ID.
>> Brian Holt: You will often see things having multiple classes, that's very common.

[00:04:50]
>> Brian Holt: Something that IDs are useful for, they are useful for linking. So, for example, if I wanted to link someone to this particular section of this particular page, I actually put this here on purpose so if you wanted to share this link. If I click on this, notice it takes me directly to an IDs.

[00:05:12] Are the ID section, and like scrolls me down to that point. So if I open this in the new tab and I paste it right there, it's gonna take me directly to the ID section. That's what IDs are actually quite useful for, is they allow you to deep link directly to that point in the page, so if I go back here and inspect the element here.

[00:05:41] Notice the ID here, IDs which that's actually kind of a bad one, I think that's more confusing that it needs to be. But let's look at the classes one. Inspect element, so you can see here the idea is called classes, and then you can see up here in the URL, it's a found classes.

[00:06:05] So, it takes you to directly to that ID, which is this corresponds to whatever comes here after the found, the hash, whatever you wanna call that.
>> Brian Holt: Does it make sense? So that is one case that you would definitely use ID's for, is deep linking. And that's why it makes sense that you would only have one on the page, because there's only one place that the browser can navigate to.

[00:06:33] So,
>> Brian Holt: So you can say here, if you click this link right here, it will take you to this h1 right here.
>> Brian Holt: The navigator or the header covers it but It's navigating to the top of the page. Any question so far?
>> Speaker 4: So I have one. Besides like you said class you can use multiple sign, or term on a page ID you can only use one term per page.

[00:07:13] But does it have any meaning, I mean, When I write ID, does it have any meaning for it?
>> Brian Holt: Does it have any meaning for it?
>> Speaker 4: Cuz I wanna see the word ID, I keep thinking like ID interup, identification
>> Brian Holt: Right, that's what it means. So it's like, it's a unique ID, it's a unique identifier for that particular element on a page.

[00:07:36] Does that make sense?
>> Speaker 4: Yeah.
>> Brian Holt: Cool. Yeah.