This course has been updated! We now recommend you take the Complete Intro to Web Development, v2 course.

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

Classes are like labels in HTML. They allow developers to add context to grouped items. Later, Brian will demonstrate how classes can be used to apply styling to object in HTML.

Get Unlimited Access Now

Transcript from the "HTML Classes" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Brian Holt: Classes. So, here is your marker right, now we're actually to give classes which are essentially labels right. I'm gonna say like this is a div right here and encompassing this amorphous entity to you. And guess what? It's a blog post. And so you look at it and say, this div is a blog post.

[00:00:22] And now you know why that div exists. So again, to someone that had never seen that code before, they'd look at that and say, why the hell did they put a div here, right? What is this? And so that's what we're gonna use, and they're called classes. And to preempt the question that I know is coming from the online people, we're gonna talk about IDs in just a little bit.

[00:00:47] Right now we're gonna talk about classes. So here is a very small example. We now have a div that's surrounding two images but we wouldn't even have to see the images to know, this is a group of pictures, right? So this is an attribute on that div called a class and that's just saying like you're taking your marker to your Tupperware and saying, this is I don't know spaghetti from last night or something like that, that's what the class is for.

[00:01:22] And then again you can address the classes later using CSS, which is super useful. So, let's take a look at this example. And I know you're all excited, because you get to see more cat pictures.
>> Brian Holt: All right, so expand that out.
>> Brian Holt: Okay, so.
>> Brian Holt: That's what that class is for right, so it's essentially just saying you don't even have to see what's underneath here to know what's in it.

[00:02:01] Does that kind of make sense? Cool, I'm sure you're all really happy you get to see more cute cats. All right.
>> Speaker 2: So I have a question.
>> Brian Holt: Sure.
>> Speaker 2: Can you go back, yeah, right there, okay. So here, you have a div class, you have your image but then your image has that forward slash at the end of the image.

[00:02:33] But then you have, well I guess you have to close that, okay never mind.
>> Brian Holt: Yeah, I got it sometimes you just got to sound it out loud. There's this concept in computing called, what is it? Rubberducking. Yeah, so, and we actually did this with one of my coworkers.

[00:02:55] I really hope he's not watching, [LAUGH] at one of my former jobs. So he would always come over to my desk and he'd just ask me like, hey man how do you do this? And he'd just start explaining to me his problem. And like halfway through it he'd solve it himself and just go back to his desk, right?

[00:03:09] So rather than have him come over, we bought him a rubber ducky. And we put it on his desk and was like, before you can ask anyone any questions, you must explain your problems to your rubber ducky. And so I'd hear him mumbling over the wall just saying okay rubber ducky, I'm doing this, and this is going on.

[00:03:29] And he was like, I get it, and he was just pounding on the keyboard, right? [LAUGH] So, it's actually extremely useful, right? Just enunciating your problems will help you solve a lot of them. So, I'm serious, go buy yourself a rubber ducky. I feel like I should get Amazon affiliate fees for that.

[00:03:47]
>> Speaker 2: Okay, now, I do have another question.
>> Brian Holt: Okay.
>> Speaker 2: You started with div class, but you don't have to close it as div class?
>> Brian Holt: Correct.
>> Speaker 2: Why?
>> Brian Holt: So your closing tags will never have attributes right? It's actually only-
>> Speaker 2: Okay.
>> Brian Holt: Yeah.
>> Speaker 2: Okay.
>> Brian Holt: Because this one knows that I mean if you wanna talk about the way the browser looks at it, it says I have now opened the divs.

[00:04:19] So whatever happens after this is inside this div and it looks until it finds another closing tag and it closes out all of that.
>> Speaker 2: Okay.
>> Brian Holt: So it doesn't have to match.
>> Speaker 2: Gotcha.
>> Brian Holt: Okay, good question though. Does that make sense to everyone else? Yeah you don't need the attributes as well on the closing tags, closing tags will never be anything but like slash, the name of the tag close it that's it, great question.

[00:04:47]
>> Speaker 2: [INAUDIBLE] like. If you are looking at a photo album, so you have your photo album open. Now your photos are here. Then there's nothing.
>> Brian Holt: Yep, there you go.
>> Speaker 2: Like that.
>> Brian Holt: There you go, I appreciate that.
>> Speaker 2: Okay.
>> Brian Holt: That's a good example though.