Introduction to Web Development HTML Tags - Void Tags

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

[00:00:03]
>> Brian Holt: Void tags or self closing tags are essentially tags that do not need a closing tag. That's what void tags or self closing tags mean. So if you notice for every div I have, there's a closing div, right, the slash div. There are some elements that doesn't really make sense on, because they're kind of like, they would never encompass something else.

[00:00:30]
>> Male Student 1: Going back to the m and strong tags, I was just wondering, can you override that with CSS?
>> Brian Holt: Absolutely.
>> Male Student 1: Okay.
>> Brian Holt: Totally. Cool. So void tags. You know when you're filling out a form and they have a little piece of something that you can fill out, it says enter your name, enter your last name, enter your address.

[00:00:55] Those are input elements, it's something that the user can click on and then start typing into. So you would never have anything inside of an input and the fact of the matter is you can't have anything inside those input. You're not going to have a paragraph inside of your input.

[00:01:09] So instead of being contrived and just doing input/input, they said let's just save four keystrokes and we'll have like a trailing slash at the end, right? So that's what this trailing slash right there means. It means that this is a tag that is self contained, that needs no closing tag, it closes itself.

[00:01:36] So, I think I have. Get rid of that.
>> Brian Holt: I have an example right here.
>> Brian Holt: You'll find that we have a lot of cat pictures in this workshop. So if you like cats, get excited. [COUGH] So, here I have two different self closing tags. Apparently I put in attributes.

[00:02:14] So ignore the image for right now, okay? We're just gonna talk about the input up here. So the input is this thing right here, right and you can type things in it, okay. Again, it doesn't make any sense to put anything inside of there, right? You can't put a paragraph in here, you can't put a div in here, it's just a tag that exists by itself and so what they have done is they have just made this a self closing tag.

[00:02:48] Any more you actually don't even have to put that slash, this is actually valid as well and it's just a tag that just never closes. That's okay. You'll see it quite often, you'll also see this, both of them are valid. I'd recommend at least until you really understand about development, just putting it there, it's really just kind of an useful indicator to yourself.

[00:03:11] This is what this is, right? Okay, so down here, I have the IMG which is an image tag as you might imagine, an image tag is just like it's a tag that I'm gonna put a picture on the page, right and as you notice, it is a self closing tag, right?

[00:03:34] You're not gonna put something inside of the image or rather you can't. You might want to, but you can't. If you want to maybe at the end of the class, we'll show you how but it's not intuitive. Okay, so that's what the image tag does. Now in order for an image tag to work you have to tell the browser this is the picture I want you to use, right?

[00:03:57] You can't just say please give me a picture, right? Asking the Internet for a picture probably is not going to end well, so you wanna define the picture yourself. So that's what this SRC is, right? It's just saying here's the picture I want you to put here. In this particular example, I use this place kitten website where you can just say like please give me a 400 by 400 image.

[00:04:27] 400 is pixels, right it's 400 pixels. So if I say 300, I'll get a different picture. You're so lucky, right? You get to see cat pictures all day. But what are you expecting form someone from Reddit, right? It's just tons of cat pictures on Reddit. Okay, so
>> Brian Holt: That's the place kitten part's not important, they're just place holder pictures.

[00:04:49] So that's what this SRC is, it's called an attribute. So sometimes
>> Male Student 1: Hey Brian, you're asking what's the difference between the bold tag and the strong tag?
>> Brian Holt: So there is a bold tag. It does exist, just don't use it. It's old and I was describing the very problem with the bold tag earlier, that sometime later you're gonna want your bold text to not be bold but be green instead or just you're gonna wanna change it to be something other than bold.

[00:05:21] And in that particular case, you now have a bold tag that no longer makes things bold. It just doesn't make any sense. It's bad. Don't use it. Use the strong tag a bit. They do accomplish the same thing but the strong one is going to make more sense later.

[00:05:37] All right, good question. Thank you anonymous internet stranger
>> Brian Holt: Cool, so.
>> Male Student 2: Next question's about like XHTML versus HTML5?
>> Brian Holt: So in this class, we're gonna be talking about HTML5. So there are different revisions of HTML. Any more, HTML5 is supported everywhere. So just don't even worry about old stuff, at least for this class.

[00:06:06] You might go to a job and you might work on like Windows XP and have to use Internet Explorer 6, and then you might have to care about like XHTML and if that's the case, I'm really really sorry. [LAUGH] But for the purpose of this class, we'll be talking about HTML5 and practical differences, they're 90% the same thing, for the most part.

[00:06:32]
>> Male Student 1: And then on that note on HTML 5, they're talking about self closing tags, is that considered bad practice in HTML 5?
>> Brian Holt: The self-closing tags? You mean having trailing slash versus not having the trailing slash or just having self-closing tags.
>> Male Student 1: Yeah, I believe so.
>> Brian Holt: Okay, well you have to have self-closing tags, right?

[00:06:53] You can't make an image any other way, right? If I did this
>> Brian Holt: This is not valid HTML like the closing IMG. So either have to have this like no closing tag or space like this. Either one's fine.
>> Brian Holt: That make sense? Yeah, it just doesn't exist like it's wrong, so don't do it.

[00:07:23] And it makes sense right? You have an image and just an image stands by itself, it's it's own entity, it wouldn't enclose, it's not a container. It's just a thing that is, that is.
>> Male Student 1: So some you have the closing complete tag, some you have self closing tags only, and some are void tags and self-closing?

[00:07:47]
>> Brian Holt: Those terms are interchangeable. Self-closing and void tag, it means exactly the same thing. And some tags are self-closing, others are not like for example, you cannot have a self-closing div. That's invalid as well. A div must have an opening tag, and it must have a closing tag.

[00:08:05]
>> Male Student 1: Like paragraph, you can do both with paragraph.
>> Brian Holt: So, just have a like that? Is that what you're saying? That's not valid either, it has to have that. Now I say not valid. Your browser is pretty smart and it can kinda guess what you're trying to do, but it's just like don't.

[00:08:29] [LAUGH] Right? You don't want your computer guessing what you wanted, right cuz it's usually gonna get it wrong.
>> Male Student 2: I think the main difference is a paragraph is gonna wrap something, a div is gonna wrap something, each one's gonna wrap something, there's content inside of those tags versus an image is an object, it's just.

[00:08:48]
>> Brian Holt: It's an entity that exists.
>> Male Student 2: Yeah, you're not gonna wrap.
>> Brian Holt: Something in an image.
>> Male Student 2: You're not gonna wrap text in an image tag.
>> Brian Holt: Does that kinda make sense? I think it's just one of those things with practice comes. And another disclaimer that I'll throw out here is I've learned a lot of things from teaching my wife to code because she yells at me when she doesn't like stuff.

[00:09:15] You all are very nice that you don't yell at me and throw things. My wife is not quite that nice when I'm teaching her things or maybe I deserve it probably. So it's not her problem, it's my problem. I make my wife sound abusive, she's not. So I love her.

[00:09:31] Yes, so my wife wants to understand every little piece of something right now. She's like well what is that title doing right now, right? Sometimes there's just things that it's better to just ignore them right now and try and come back and understand them later. Because like I said, there's a very wide foundation you need to get to understand HTML.

[00:09:54] And so to try to understand every micro piece of data right now, it's going to paralyse you, right? Because sometimes this has to be there but it is not gonna make sense until you understand this other piece, right, very common thing in web development. So ignorance is bliss sometimes, I guess that's what I am trying to get at, is learn to ignore something until it's the right time to learn it.

[00:10:20] Okay, so other questions before I start talking about attributes?
>> Male Student 1: There's onw where I wonder why you are using the doc types in here, in this HTML file, is that just an example in CodePen?
>> Brian Holt: Yeah, and like it's just another one of those things, I don't want to explain it right now and I will explain them.

[00:10:39]
>> Male Student 1: Okay.
>> Brian Holt: So there's a thing that's called doc types that kind of let the browser know what type of HTML you're gonna give it. That's the basic story. I'm omitting it. Don't omit it when you're doing it in code, but it's okay to omit it when we're talking about it.

[00:10:57]
>> Brian Holt: Cuz right now, actually technically, everything's all ready wrapped in HTML and body. So you have to nest it in HTML body which is not correct, you can't have two body elements. Anyway, okay so SRC right here, okay? An image needs to know where to go. So sometimes these HTML, let's see if I can even get it on the same page.

[00:11:25] So notice like you have line numbers right here. So this SRC actually is on the same line, it's just too long to fit it on the same line. Sometimes these HTML tags need additional information that are kind of metadata about the tags, right? We'll talk about classes and IDs later, which are also attributes.

[00:11:46] For this particular case, you need to tell it where the image is, and that's what this is what this SRC thing is. And so notice, it's enclosed within the tag. So most of the time we've just seen head and head is surrounded by angle brackets right. Here image is surrounding not only IMG but and the first thing is always going to be what type of tag it is and then after that the order isn't important, right?

[00:12:12] [COUGH] So the source tells it where the image is, and then we close the tag afterwards. That kind of make sense?
>> Brian Holt: Okay. Well I think, again we'll repeat this ad nauseum I use images all over this. So you'll see attributes a ton as we go forward. But it's essentially like here's more information about this tag that you'll need.

[00:12:39] That's kind of the point of an attribute.