Attributes, Classes, & IDs

[00:00:00]
>> So let's talk about attributes for a moment. You have all these various different tags, but these tags can have multiple different capabilities built into them, and we saw that with the inputs specifically, right? Either type = text, the type = color, number, all those different things. This is all just an input tag, right?

[00:00:19]
But we can modify the behavior of this particular input tag to be a specific type of an input, right? This right here, where we're modifying what this is, is called an attribute. So the type of tag will always be the very, very first thing, 100% of time it always must be the very first thing.

[00:00:42]
So this will always say input here if it's gonna be an input tag, and then you can have a bunch of different things of key = value, right? So, I'll just do this to demonstrate to you. You'll call this part of it the key, and you'll call this part the value.

[00:01:02]
Makes sense? That's just terminology so you make sure that we're all speaking the same language here. So the key will always be what kind of attribute it's gonna be and the value is going to be what we're setting that attribute to be. So we're setting the type = text.

[00:01:21]
And then you can see it changes what kind of input that we end up with. And that's really about it. So what kind of tag it is will determine what kind of attributes that could have, right? So for example, I have an input here and type = text, right?

[00:01:41]
Inputs can have types, but if I put for example href here, input has no concept of what href is, right? So this just doesn't do anything, the browser's like, I don't know what this is, I'm going to ignore you. That's another thing you'll find about HTML is, the browser will, if it doesn't understand something it just ignores it and moves on.

[00:02:04]
It doesn't crash or anything like that, it's just like, you're trying to do something here and I don't like it, so I'm just going to ignore you. So that's attributes. So let's look at, for example, here a href = www.frontendmasters.com. Click me. You'll see here I now have a link tag down here that if I click on, takes me to as you see frontendmasters.com.

[00:02:52]
So if I try and put a type on here, type = color, the browser is like, I don't know what that is, so no, you don't get that. So every a tag will always have an href on it because that's how a tags work. Or image, src = let's see, I can get this one, inspect.

[00:03:23]
So I'm just gonna grab the image to this, Add an attribute. That's what I want. Okay, so now I can say src equals that. This is just a pathway to an image that I have already stored on the website. And you can see here, it produces the image here which is the course logo.

[00:03:51]
Now why did they make href and src different for these? Cuz they both go to URLs. I don't know, I wasn't in the room when they made that decision but they are. Images always have an src which is a source, right? Href just takes you to wherever you wanna go for linking.

[00:04:07]
The next question, you might ask me is, how do I know which one to do? It's like, you just have to learn it, right? It's kind of arbitrary and it's what they decided to do.
>> Why did you put a div around the select options again?
>> Why did I put a div around the select option, which I think is this one here, right?

[00:04:23]
If you look up here, This has a div here and the question is, is why do I need the div? Could I have just done this? You absolutely could have. There's no rhyme or reason that I had to have a div there. In fact, I don't think it'd actually even really change anything.

[00:04:46]
The only reason that I did have it there is because I was using it to kind of divide it from everything else, which a div, division, divides it from other things. But we're kind of coming back to round to HTML. It's totally arbitrary, right? It's whatever you feel like doing, whatever you feel like makes the most sense to you.

[00:05:04]
When I was writing the course, I felt like putting a div around everything to divided sections of things, made sense to me, so I did it that way. So just because it's the answer to that question, almost everything can have a class. So for example, this h3 here, I gave it a class of the red one.

[00:05:29]
And I have this one here, this is the blue one. And then inside of the style tag here, which we'll talk about that when we get to the CSS section, but I wanted to demonstrate to you what classes are. This one is red, and this one is blue.

[00:05:45]
Classes are the way that you kind of denote, this is what type of h3 this is to me, right? So you'll kind of use it, one, as documentation for yourself, so the red one and the blue one doesn't really add any meaning to it. But this could be the brand of my website and this one could be the name of my blog, right?

[00:06:03]
And they could be different things. And you'd be showing to yourself later. So no one's gonna see your classes other than anyone that inspects your code, which you're not really making website for them, right? So a class is just a way to say, this is what this is, this is what type of h3 that I'm having here.

[00:06:23]
And what's nice about that is if you give it useful names, it makes it really easy later to come back and do all your CSS4. But it's a way to show that there are, you yourself have different types of attributes or different types of H3s or divs or spans.

[00:06:41]
All of these things that I've shown you so far can have a class, right? So this can have a class = my text input. And the other thing is it can have multiple types, multiple classes rather. We'll get into why that's important later. But you separate them with the space, that's all, which is why I'm using dashes here for the spaces of the class name.

[00:07:12]
But then later you can come back with CSS and you can style it based on your class names, which is typically why you're gonna give things class names. But it's the way that I have some paragraphs that look this way, other paragraphs look other ways. Technically this is an anchor tag, right?

[00:07:30]
This watch on Frontend Masters button, but it's styled differently and I'm able to do that because I give them different class names. In other words, classes are mostly important for CSS and they're kind of important for yourself to know what type of HTML you're looking at. For now what's cool is I can come back.

[00:07:56]
Let's say later I come back and I write another h3 here and I say, well, I want this one to be the same style as the red one. This is also red. Just having a real, it's cuz I needed to do this. I didn't have to write any more CSS, right?

[00:08:19]
Just because I reused this red one, class, right? This one also became red. Or let's say I could decide later, it's like no, this was better as the blue one. And now it's lying to you, [LAUGH] right? But now this is blue. Okay, so that's classes. And we'll, again, we're about to do a whole section on CSS, so you can ignore the CSS part just know that the class parts, the part that I want you to learn here.

[00:08:54]
We'll talk about IDs in a second. So I have this one down here that this one is red and bold, so they can have multiple different classes, right? So I made this bolded class down here and now this is not only red cuz it has the red one class.

[00:09:10]
But it's also bolded cuz it has the bolded class which I wrote here. And yeah, we just space, that's how you get multiple different classes. Okay? So first, let's say classes are so much more useful than IDs. I'm gonna show you how to work with IDs, because they're important and they're gonna be in a lot of different bits of documentation, you'll find them in code that you have to maintain.

[00:09:43]
But I'm gonna say 95%, and that's probably underselling it, 99.9% of the time you should use classes and not IDs. IDs are meant to be very, very sparing. Classes are not unique, that's the important thing. So, for example, here I have a blue one here and a blue one here, right?

[00:10:04]
So it's not unique in the sense that there's not only one blue one, there can be as many blue ones as possible, right? You can have as many of them as you want. With an ID, you can only have one, right? So this one I have this h3 here, so you can make that an h1, And I have an id = brand here, right?

[00:10:25]
That means that on this particular page, there is no other brand, right? That's the key difference between classes and IDs. IDs there's just one, classes there's zero to infinity of them. So that's why I like classes in general. If I do a bunch of work to do like some CSS for this one particular red one here.

[00:10:53]
If I do it on a class, that means I can use that over and over and over again. I just had to do it once and now I can reuse it a bunch of different times. If I do this on an ID and I do a bunch of stuff to the id = brand, I can only ever use that once.

[00:11:08]
Which in general, as programmers, we wanna be as lazy as possible. We wanna write code once and use it as many times as we can. So I'm just gonna tell you just use classes. Until you learn to tell me that I'm wrong, just use classes And in general I think I use IDs, Once a year, right?

[00:11:31]
It's really rare that I need to use them whereas I use classes every day, multiple times a day, multiple times an hour. Why would you want to use an ID? So like the id = brand, you are only gonna have one brand on your page guaranteed or one.

[00:11:50]
Like this complete intro to Web Dev V3, I am not going to reuse this on the page, right? I have just one of those. That would be an acceptable reason that you might wanna use an ID. Actually, probably even more importantly is you can, let's see if I can just show you this really quick.

[00:12:10]
So this id="ids" here, that's cool. Okay, so what I can do here, let's say I had an a tag. Go to the ids header. So if I do it like this, I now have a link here and if I click this, notice that it scrolls me to the IDs.

[00:12:36]
So that is one useful reason to use IDs is cuz now you can have a link directly to that part of the page. So if I click that up here and notice, it'll scroll me all the way down to where I'm trying to go, right? So that is one compelling reason to you might use IDs.

[00:12:54]
Notice that pound ID right there, that's how you do that.
>> Is it best practice to embed a link to an image?
>> Is it best practice to embed a link to an image?
>> I guess when you use an image to link to its source.
>> So that's an okay question, let's say I have my image here, do I still have that?

[00:13:25]
I do. Okay, so I have an image here. Right now this image doesn't do anything, right? It's just an image on a page. So if you wanted to make that image link somewhere, what you can do is you can put an href = ., I don't know, Github.com or something like that.

[00:13:53]
So now this link, if I click on it, I guess I might have to put the https:// there. So now if I click on that link it'll take me to github.com, right? So that's the way that you make an image link somewhere, is you put whatever you want to be linked, right?

[00:14:24]
And you can put a's around anything, right? So if I wanted to make the entire page link somewhere, I would wrap the entire body with an a tag, right? But this allows you to have an image that comes from somewhere and then a tag that leads somewhere else, right?

[00:14:42]
And I mean you can make them the same thing. If I do this what do you expect to happen? Well, it should just link into the image itself. So now if I click on here, notice it's literally just a link to the image itself. So that's why they disambiguate the two.

[00:15:09]
But if you ever want clicking on something to go somewhere, you have to use an a tag, have to. That's the only way to do it. But I mean you can wrap entire blocks of things in a's, right? So if I do this and this, Now, all of this is an a tag.

[00:15:36]
So if I click on, this is red, or if I click over here or over here, all of this stuff, no matter what, will all go to wherever I tell it to link. GitHub.com, right? So now if I click on the blue one here, all takes me to GitHub.