Introduction to Web Development HTML Tags - Meta, Content
This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.
Transcript from the "HTML Tags - Meta, Content" Lesson
>> Brian Holt: Let's talk more about these meta tags that we're seeing. HTML needs to be present, always needs to be there. Again, it's just letting the browser know this is an HTML document, please treat it as such. The head tag is where all your metadata goes, nothing in here gets displayed.
[00:00:20] And the body is like, that's your actual content on the page. So typically your head's gonna be 30 lines, your body will be, if it's a short page only a couple lines but it often can also be thousands of lines. So tens of thousands of lines even. So we saw some h1s.
[00:00:40] There's actually h1 down to the h6 if you go, if you're using older browsers, even in the newest browsers you can actually go to h8, h10, stuff like that. I don't know why you would. I don't ever use much more than like h3, or h4, but it exists, it's there for you.
[00:00:58] And like we saw before, the browser has some default styles for it, notice it was bold, it was larger, there was spacing around it. The browser just assumes that he's given me an h1, I think he wants it to look like a title. But we'll see later how to change that.
[00:01:15] Paragraphs, just to note, it's like, here is a block of text that is a paragraph, please display it separated from other things. It's just like a paragraph, exactly what you think of in terms of semantically what a paragraph is.
>> Brian Holt: And then, a div is both very useful and very frustrating.
[00:01:37] But it's a separation of content. Like, it's a container. Just like, if I give you a piece of tupperware, you can't assume anything about what's in the tupperware. It's kind of like the same idea of a div. It's just a container to hold other things. It has no meaning, like a paragraph means like I'm gonna have text in here like it's a tupperware specifically for text.
[00:02:07] That's the weirdest example I've ever used, but we will stick with that. A div is a container for anything. And then, you will kind of define what's going to be in it using other means that we'll kind of discuss later. But you'll see lots of it and your temptation when you're doing web development like I still do it so you'll definitely do, it is to put everything in the div, like everything just like we call div soup, or dividers, that just like you just have like this total huge mess of divs.
[00:02:42] You'll kind of figure out the balance, or you won't, like me, and you'll just continue doing it for the rest of your life, so whatever. [LAUGH] Confessions of a web developer.
>> Nina Zakharenko: [LAUGH]
>> Brian Holt: So we'll just go over some of the more used tags, ul stands for unordered list.
[00:03:01] You find out there's a lot of abbreviations. It's annoying, but you just get used to them. So there's an unordered list. So you notice like on my slides, I have like a bullet point list. That's an unordered list. It's just kinda saying, I'm about to give you a list of items and there's no specific ordering to it.
[00:03:19] Like you can re-arrange stuff and nothing would really change. No order is implied whatsoever. Ordered lists is saying, I'm about to give you a list, and please maintain the order of this list because it's important. The steps to, I don't know, bathing someone, never mind, I'm not gonna go there.
[00:03:40] Let's think of something else, like-
>> Nina Zakharenko: Driving somewhere?
>> Brian Holt: Driving somewhere, like open the door, get in the car, turn on the car, and go. Like you can't really mix those up, like if you try and start the car before you're in it, you're gonna have a bad time.
[00:03:52] Thank you. [LAUGH] I didn't like where that other one was going, so [LAUGH]. This is a family friendly audience I think. [LAUGH] So yes, please like it implies ordered, please maintain it and you'll notice most the time ordered lists start with like numbers or letters like one, two, three, A, B, C or something like that.
[00:04:15] Something to denote that it has some order to it. And then, an li goes inside either one of those, it's just saying like this is an element inside of here. So why is this really cool? Like if you're doing an ordered list, and say, we're going back to the car driving example, we forgot to put in the open the door step, and we had all ready numbers in one, two, three, four, five, six, seven, say we had to add a second step in again.
[00:04:44] We would not have to go back and change all those numbers. I'm sure all of you have done that before, your making a list on a document, and you have to go back and change all the God damn numbers cuz you added a new second element. You can have it so your styling will just, I have five elements, I know I have to put five tags and so the second one always gets the second one.
>> Speaker 3: In the chat, they're asking for a link to some references on these tags, I guess maybe the documentation on listing them all.
>> Brian Holt: Yeah, [INAUDIBLE] what's that?
>> Speaker 4: I can send one.
>> Nina Zakharenko: Yeah, I have [INAUDIBLE] as well.
>> Speaker 3: Sure, post it in chat.
>> Brian Holt: Yeah, that'd be great.
[00:05:22] Looks like Nina will take care of it, but the best place for documentation for everything web in my personal opinion is the MDN or it's the Mozilla Developer Network. I'm sure many of you use Firefox. Great browser. Great company and so they put out something called the MDN.
[00:05:43] Which is essentially just documentation for how to be a web developer. At least for me, it's the authoritative source of truth. So if I do not know something, you can go there, and if it says it on the MDN, it is just truth, just solid truth. So yes, you can search for MDN space li, and then, I bet you the top result would be, well, let's just try it.
[00:06:10] So mdn li, right there. Let's get rid of this.
>> Brian Holt: So I don't expect you to read this, but this will tell you everything that you have ever wanted to know about the li.
>> Brian Holt: Yeah, great source. I will recommend not using W3 schools, that's usually one of the top results and it's usually the worst one.
>> Nina Zakharenko: [INAUDIBLE]
>> Brian Holt: [INAUDIBLE] W3 schools.
>> Nina Zakharenko: Yeah.
>> Brian Holt: Thank you Nina, just kidding. No, it's fine. It's very simplified. And so, it might be good to start out with.
>> Brian Holt: Cool. So do we have any questions about lists? I think we're about to do an example with them.
[00:07:08] So we'll get some hands on experience with that. Here's a good example. So my favorite social media sites. The top one obviously and the best ever would be reddit.com. Thank you. But let's talk about the fact that I used an ol versus a ul here. Like this is implying that there is an order to this like, if you put Instagram on the top, it's not the same list anymore.
[00:07:36] Like this one implies that Reddit is my absolute favorite, and then Instagram is my third favorite. That's what that ol means, if I had put a ul there it's like here's a list of sites that I like and no necessary order implied. Now, you might be asking yourself, well, why does this matter?
[00:07:56] Like ul versus ol? For the most part it's just gonna be the developer that sees it. There are some default stylings to it but, when we get to the CSS part like I'll show you how to change it. You can make an ol look like a ul and like, it'd be totally transparent to the user.
[00:08:10] So why? Why do we painstakingly make sure that we're using the correct tag for every single thing that we do? This concept is called semantic HTML, and it's going to make your life easier, because you're going to write code, then you're gonna go back and do something else for three months and you're gonna come back to it, and you're gonna look at it, and it's like, what the hell was I thinking?
[00:08:32] Why did I do it this way? If you do get into this habit of doing semantic HTML, it makes everything just really easy, because you come back and you say, I made this list and there's order to it, so I should not change this. So it's kind of like you communicating either A, with your future self, or B, with one of your coworkers.
[00:08:53] Cuz your coworker's gonna come in here and say, why the hell did he do this, this way? And you'll find out a lot of the habits I'm gonna try and get you into, or we're going to try and get you into, is for that. It's for service to your future self.
[00:09:09] Because you write something once and you're like this is the greatest thing ever, I'm never gonna have to touch it again and then you're just gonna be so sad when you have to touch it again. [LAUGH] It makes the difference to get into good habits right now.
>> Speaker 3: They want you to explain semantic market a little bit more.
>> Brian Holt: Sure.
>> Brian Holt: Let's see, it's semantic market, and we'll get into more of it as we go further and further, but it's using the correct tag for the correct situation. So for example, there's another tag that we have not talked about yet, it's called article. As you might imagine an article describes an article.
[00:09:53] If you were on a news site you wouldn't expect your article to be inside an article tag and then everything inside of it you knew was a part of an article. Now, article doesn't have any special power that a div doesn't have. It's just an article is special tupperware just for articles.
[00:10:12] And so, when you look at an article, this is an article, this container can only contain articles. But you look at a div, and you're like, I don't know what's gonna go in here. You have to go through and read all of the code to figure out, what the hell did I stick in this tupperware and why is it moldy, or something like that.
>> Nina Zakharenko: [LAUGH]
>> Brian Holt: I'm sticking with the tupperware example, I'm really proud of this one. Not as proud as I'm of the bath one, whatever. It's like putting a label on your tupperware. It's letting your future self know like this is what's in here because it's kind of a black box and you kinda have to like poke around and figure out what's in there, it's a labeling system for it.
>> Speaker 4: Does it also make it a lot easier and more powerful when you start doing dynamic pages with CSS because you can reference those tags in the code?
>> Brian Holt: That's also true, so it makes those like tags addressable by CSS. It doesn't make sense to you right now, that's okay, we'll get to it but it's also giving more hooks for your CSS to pick up on, thank you.
>> Brian Holt: Cool, is that kind a make sense that the tupperware labeling sort of example, we'll stick with that.