This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.
Transcript from the "HTML Elements" Lesson
[00:00:00]
>> Brian Holt: So there are, I looked it up. Did I put how many there are? We're gonna go over some of the more important ones right here, but,
>> Brian Holt: There's some 300-odd tags, I think there's 300 or 350-ish tags. But you definitely, definitely, definitely do not need to know all of them.
[00:00:27] I don't know all of them. I probably, I don't even know half. I guarantee you, I don't even know half. You probably use, I'm gonna guess 50, at most. There's probably 1 to 30 that you use a lot, 30 to 50 of them that you use sometimes, and the rest that you use never.
[00:00:46] [LAUGH] And there's a certain amount of them that are deprecated, is the word that we would use for that. Which is they used to exist, and they are no longer in use, and you're discouraged from using them. So there's a bunch of those as well. I mean, HTML is how old?
[00:01:04] 30 years old or something like that, maybe longer. And when they were designing how to use HTML, 30 years ago, they did not know how we were going to be using and abusing it today. [LAUGH] So they could never have predicted things that were gonna be good ideas and things that were gonna be bad ideas.
[00:01:22] That's why we're on HTML 5.1 right now, which means we're on the fifth major revision of it. And the .1, they added a couple more things as well. So there's a bunch of stuff that has changed over the years. So, we'll get a bit more into that later as well.
[00:01:40]
>> Brian Holt: So now we're gonna, we'll talk about divs here in just a second. But we're gonna explore a bunch of different kinds of tags that you should know about. These are the, I would deem to be some of the more useful ones. So we talked about h1 through h6, which are headers, or headings rather.
[00:01:59]
>> Brian Holt: So this, for example, is an h1. Or no, this is an h2, I think right here, this Types of Tags.
>> Brian Holt: So that's gonna be some sorta heading on the page, something that you would have at the top, right? That's gonna be some sorta title, some sort of important descriptor that you want kinda to stand out.
[00:02:19] That's why this one's bigger, it's bolder. It's a heading, right? You're scrolling down, what you're doing if you come to this page and you just wanna peruse it really quick. You're gonna scroll down really quick, and you're just gonna look at headings, right? That's kind of what they're for.
[00:02:34]
>> Brian Holt: And that's why you have h1 through h6. On this particular page, this basic HTML, that's the h1 because that's the most important thing this entire page is about, Basic HTML, okay? And then everything underneath that, these h2's are kinda subheadings in here. So you can scroll down and just look at Types of Tabs, and those sorts of things.
[00:02:57] And then if this had headings underneath it, then you would have an h3, so on and so forth.
>> Brian Holt: And just to kinda highlight, a bunch of these are kinda they're pretty squishy subjects, that there's not necessarily the right way to do it. I kind of liken it to formatting a Microsoft Word document.
[00:03:20] There's multiple ways to do this. It's as much artistic license as it is engineering. Which you're gonna find a lot throughout this course, is lot of this is just kinda doing your best, taking the knowledge that you have and just applying it the best way that you know how.
[00:03:36] That make sense? Any questions?
>> Brian Holt: Cool.
>> Brian Holt: p tags, so p stands for paragraph. And you'll put paragraphs of text inside of a p tag. So up here, this right here, that little bit, that is a p tag, right? It's just a paragraph. And so if you have multiple paragraphs next to each other, this is multiple p tags right here.
[00:04:14]
>> Brian Holt: And that's what it is. It's just whatever you would put inside of a paragraph. So you're gonna use p tags quite a bit. So only text goes inside of p tags. So for example, you can't have a div inside of a p tag. Or you can't have an h1 inside of a p tag.
[00:04:30] Only text ends up going in there. And some sorta, spans can go in there, things that describe text. Which we'll get to spans in just a second. But there's a bunch of things that cannot go inside of a p tag. And what the browser will actually do if you try to put something inside of there, it will actually kick it out.
[00:04:48] So it looks really weird. So don't put weird things in there. [LAUGH]
>> Brian Holt: Anchor tags, so that's an a. These are links, right, and it stands for anchor. I can't remember why it stands for anchor. I don't know why that's the appropriate term for it, that's just what you call it.
[00:05:11] [LAUGH] So this link right here, where you put your pointer over and it turns to a cursor, so you can click on it, that is an anchor tag, that is a link. So if you look here, so you have the a, href equals frontendmasters.com, right? So this href is where it actually ends up going, that needs another quotation mark right there.
[00:05:38] Whatever, that's fine. Then this is the text inside of it. So you can see here, this link actually doesn't go anywhere. But that's what it looks like. So you use a tags to create links, and you would link it to some other URL.
>> Brian Holt: URL stands for a Uniform Resource Location, I think.
[00:06:04] It's whatever the address is, the Web address. So you can see up here, this is the Web address for this particular page. That's what would go inside of here instead of the href. You would put it in there, and then the link would take you to that place.
[00:06:18] Does that makes sense?
>> Brian Holt: Okay, I'm seeing mostly head nods, so I feel pretty good about that.
>> Brian Holt: That href, this part right here, is called an attribute. And that is in the next lesson, we will talk a lot more about attributes. But basically, you can give additional information to these tags via attributes.
[00:06:42] And again, we will go over that. We actually have a whole section on it. So if that doesn't make sense right now, it's coming.
>> Brian Holt: Div, okay, so this is one we had the question about. It is short for division. And I like to think of divs as cardboard boxes.
[00:07:02] That it's not actually, the cardboard box is never the important part, right? It's actually what's inside of the cardboard box. So it's just like a box that you stick stuff in, you stick other, more important things inside of. A div, in and of itself, has no what we would call semantic meaning.
[00:07:19] It doesn't necessarily mean anything because it's inside of a div. It's just kind of a no-name container that you put stuff into. Does that makes sense? It's just, you're gonna use divs everywhere. Because there's a lot of times where you can't really describe anything in particular.
>> Brian Holt: You don't need a tag that has any sorta semantic meaning, so yeah, it's a generic tag for grouping things together.
[00:07:48] Divs can be really useful with CSS. And that's in particular where you're gonna use them a bunch, just cuz they're really useful for styling with CSS. So that's why you'll see those a lot.
>> Brian Holt: So if you had a blog post kind of thing, you'll kind of group the entire blog post container into one div, usually.
[00:08:09] So yeah, spans. If a div is a cardboard box, a span is like a Ziploc bag. It's like a smaller div. And you'll have spans inside of paragraphs. So if I wanted to highlight this block of text right there, something like that, I would put that inside of a span right?
[00:08:26] So it's actually just a small snippet of whatever you're dealing with. You can have spans really inside of anything. You can have them inside of h1's. You can have them inside of paragraphs, inside of divs. They fit kinda anywhere. And it's just for this small block of something, I'm gonna put a span around it.
[00:08:43] I don't actually end up using them a terrible lot, just not usually that I need to do something like that. But if I needed to, that's how I would do it. Okay, so ols and uls. So ol stands for ordered list, and ul stands for unordered list. So what you see here, where I had this kinda list of tags that I'm talking about, this is an unordered list.
[00:09:09] So it's an unordered list, because I could swap a and p, and it doesn't really make any difference. It doesn't change the meaning of the list. It's an unordered list. It's just a list of stuff, and it doesn't really matter what order it comes in, right? So that's why this is an unordered list.
[00:09:24] If something was an ordered list, it would be, if I change the order of it, it would change the meaning of it. So for an example, I have here the list of the ten most populous cities in the world, right? I can't switch number one and number two, or else that list is now incorrect, right?
[00:09:41] So that's when you would use an ol, an ordered list. So and instead of here, of having bullets, it would have numbers like one, two, three, four, five, six, seven, eight, nine, ten, so. ol is ordered list, ul is unordered list, and then all of the individual elements inside of it.
[00:09:59] So the span one, the ol one, the button one, these are li's, they're list elements, right? So it's one individual entry inside of the ol or inside of the ul. So you can see here, I have an example.
>> Brian Holt: This is a ul, so it would be an unordered list.
[00:10:18] The ul ends here. And I have one li here, another li here, another li here, right? So you'll have an opening ul or ol, and then you'll have a bunch of li's. And then you're gonna close your ul or ol, just like that. Any questions about that?
>> Brian Holt: It's useful for making lists of things.
[00:10:41] Buttons.
>> Brian Holt: A button is a button. It's very self descriptive in this particular case, kinda hard to forget that one. Buttons, in and of themselves, do not do anything out of the box, right? You don't put a button on the page and it just suddenly does something. So usually this is for some, it's a hook for JavaScript, right?
[00:11:02] It puts a button on the page, and people know how to click buttons. It's one of those things that you look at, and you instantly know what to do with it. And then you'll use JavaScript to respond to a user clicking a button, right? So you'll put a button on a page, and then later you'll attach JavaScript to it, to make it do something when clicked.
[00:11:21] That make sense?
>> Speaker 2: Do you add anything for accessibility within the button tag?
>> Brian Holt: No, you don't actually have to, which is really nice. That's another good reason to use a button tag, is that the screen readers already know to look for buttons. Cuz they know that they're really important, and that that's how you interact with the site.
[00:11:41] And I'm happy you bring that up. Because you can actually, there's no reason you have to use a button. You can put a div there, and you can make it work the same way. But a screen reader would not find a div, because a screen reader's not looking for divs.
[00:11:53]
>> Speaker 2: Okay.
>> Brian Holt: So that's another good reason to use buttons, because screen readers already know what to do with them. Good question.
>> Brian Holt: Other questions?
>> Brian Holt: Cool, so let's just go up here in just a second, so you can see what a button looks like.
>> Brian Holt: <button>Click me.
[00:12:22] So if you don't do anything, the button just looks like this, right? It looks very clickable. It's something like, when you click on it, it depresses a little bit, right? So out of the box, it already looks like a button. It looks like something you can click.
>> Brian Holt: Later, we'll be able to see how to style it different, make it look different, make it look nicer and things like that.
[00:12:44] But also you kinda wanna keep this aesthetic mostly, because that's what people expect when they're looking for buttons. And you wanna make your site as intuitive as possible.