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

Check out a free preview of the full Introduction to Web Development course:
The "HTML Tags - Naming" 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:

Brian talks a little about how to pick names for you ID’s and Classes. He stresses not to pick “presentational names” which describe what something looks like because if you decide to redesign the object, you’d have to update the ID or Class too.

Get Unlimited Access Now

Transcript from the "HTML Tags - Naming" Lesson

>> [MUSIC]

>> Brian Hold: This is going back to semantic stuff. If you feel like I'm talking about this a lot, it's because I am and I meant to. So I'm really hammering this home because it's really tempting as a beginning developer to not do these things. And you're going to find out the hard way that you should, so it's better just to start by doing it this way.

[00:00:28] Naming is just shitty in all of computer science. You look at something like, I need to name this, I do not know what I need to name it, it needs to be a good name, but I don't know what the good name is. Very, very tempting in HTML and CSS to say I have a container, it's purple so I'm going to call it the purple-container or this is my right-navigation.

[00:00:50] It's a navigation bar and it's on the right so I'm going to call it my right-navigation. This is bad. Do not do it, you're going to make yourself sad later. Because say you're redesigning your site and you have your navigation on the right whereas your redesign calls for it to be on the top.

[00:01:05] You now have a thing called right navigation that is on the top of your page. You're just gonna confuse the hell out of yourself, out of others, it's just bad. So, rather than naming something based on it's presentation you're going to name it based on what it is.

[00:01:21] So, instead of calling it right-navigation or side-navigation you're going to call it minor-navigation or I can't remember what we call it. It might be inferior navigation. Inferior and superior navigation right. Something that implies hierarchy or something like that. So, it is very tempting to give those names, don't, call them something based on what they are rather than based on how they look.

[00:01:50] Again if you call it purple container. And you have your purple container which is green. I guess what makes it really different is that you're going to go look at your code and you're gonna say, there's something wrong inside of this container, and you go look at it in your CSS, and you're not gonna find it because you're gonna be looking for something called green container, when in reality, it's called purple container.

[00:02:13] Right, something that like, they just make for weird things that are hard to find. And the point is that, when you change things later you don't want to have to rename things. And that's just a question you need to ask yourself, is like if I need to change this in three months, am I going to screw myself up if I call it this?

[00:02:34] Or if I need to find this later and my co worker has modified this or someone else I'm working with has modified this to be different, is this name still valid, right?