Tags

[00:00:00]
>> Let's get into some HTML. We are going to build our very first website and it's not gonna be a particularly exciting website, but it's gonna be a website, it'll be a valid website. It's gonna be a little ugly. It would be like building a house and then not putting any wallpaper or siding on it or anything like that.

[00:00:19]
Technically a valid house, maybe not the best house, but we're gonna start with technically valid house because I think that's a good place to start with. So HTML, Hypertext Markup Language, technically not a programming language because it doesn't actually do anything. You can think of it kind of like English, right?

[00:00:40]
You can't run English, when you just say English it has meaning, right? But it's the same thing with HTML. It has meaning but it actually doesn't run, it doesn't do anything by itself, you'll need the JavaScript to actually do something to it. So the base building block in HTML is something called a tag.

[00:01:01]
And here on this line right here, we have the most basic HTML that you could think of. So I have my text here. This is a title to my document. And then it's surrounded by these two, what we call tags, a beginning tag and an end tag, okay?

[00:01:18]
By the way, these are totally interactive so you can just start editing and you'll see what that looks like down here in this little result thing. We'll be doing that a lot today, okay? So I have this h1 tag which is a heading tag and every tag in HTML has a beginning tag and an end tag.

[00:01:40]
Some of them are self closing, we'll talk about that here in just a second. But for now, think about the opening tag which doesn't have the slash here, right? So you have this little slash thing here. A beginning tag doesn't have the slash and then the end tag always has the slash.

[00:01:58]
So that's kind of how you can think about it. There's an opening tag, everything between it and then a closing tag. So everything inside of this h1. So this is the title to my document, is inside of that opening or this header tag. The tag declares what you are looking at, right?

[00:02:18]
So this particular one is a header. So for example this complete intro to WEB DEV V3, that is the heading of my website that I've created here. So that would be in an h1 tag. There's some 300 different types of tags, I think we're gonna go over some of them, the most useful of them today.

[00:02:40]
We're then going to take these tags and we're gonna start building larger and larger documents. So we're gonna have hundreds of tags on a page, there's probably websites that have thousands of tags on a page. I'm sure this site probably has at least a hundred on it, cuz we'll start using them and we'll start nesting them and I'll show you that here in just a second.

[00:03:02]
So something that's important is obviously by putting this in an h1, I've made this big, right? And I can put in a different kinda tag, like, if I made this a p tag, instead of an h1 tag, notice that it is much smaller now, right? Because a paragraph of text, which is what p stands for, it's gonna be much smaller than a heading, right?

[00:03:19]
I think if you're creating a Word document, you have some sort of heading, right? And then I'll have all the little text underneath it. That's kind of the same concept here. But just know that later, I can actually go and use CSS, the styling component here, to make things bigger or smaller or things like that.

[00:03:37]
So what I'm actually more communicating here by what kind of tag I'm choosing is what the semantic meaning of this particular bit of text is, right? I wouldn't wanna put a paragraph of text here like this paragraph here, I wouldn't wanna make that an h1 because it's not a heading in my document, right?

[00:03:55]
Whereas something like this, this tags portion right here, this is obviously heading, I would wanna use some sort of heading tag for it. That's kind of the idea here of how we choose which tag to use. You'll have a ton of practice by the end of this course so if it's not sticking quite yet, just know that you're gonna get a lot of repetition on it.

[00:04:12]
Hopefully one of these explanations of it will stick. Practice, practice, practice, basically. So h1's, that belies the fact that there's probably an h2. You're right, there's actually h1 all the way down to h6 and that's cuz you have headings and sub headings and sub headings on your sub headings all the way down to h6.

[00:04:32]
I don't think I ever use h6's to be honest with you but they're available there if you ever need it though. Okay, know that if it's ever angled bracket which is what these are called and then slash it's always a heading or a closing tag, right? So, this slash belies the fact that it's always going to be a closing tag, okay?

[00:04:57]
We'll talk about self closing tags here in a little bit or sometimes called void tags, though I don't hear that definition very much anymore. But that'll look like this, where you have a slash there at the end and that's a tag that opens itself and closes itself. Though technically you can actually leave it off, it's optional.

[00:05:14]
Sometimes you will see opening tags that don't close because they're self-closing tags. Again we'll talk about it, okay? So you can nest tags as well, right? So I have a div tag, which stands for a division, as you're basically saying here is a, Something that's self contained and let me rephrase that here in just a second.

[00:05:40]
But I have an h1 tag here, right? My Hi tag here, or I can put something else, the title of my website, right? But notice I have a div tag that contains an h1 tag and then it closes the div down here, right? So that's kind of my point here is you can have nesting of tags, right?

[00:06:01]
And I could actually put another div in here. And another h tag here, the subtitle of my website, right? And so I have an h1 here and then I have another div here and then I have an h2 here, right? So you can see that showing up here.

[00:06:28]
So the question you might ask me is, how much can I nest this? And the answer is infinitely, all right? Some of these, if you looked them into my source code, are nested probably 15 to 20 layers deep, probably even more nested than that, so there's no limit to how much you can nest these.

[00:06:48]
But something I want you to notice here is, notice that I have div and then if I open an h1 tag here, then the next thing that I have to close is this h1 tag, right? So notice I opened the h1 tag, I could not close the div here, I have to close the h1 first before I can close the div.

[00:07:09]
So let me show you an incorrect example because I think that might demonstrate it better. I have the div tag here, then I have the h1 tag. Notice that this closes the div tag here. This is incorrect. I have to close the h1 before I can close the div.

[00:07:24]
So another way of verbalizing that is that the most recently opened tag must be the first one closed. So this h1 here is the most recently opened one or let's look at this h2. This h2 is the most recently opened tag therefore I have to close it before I can close the div.

[00:07:43]
I think it's intuitive once you start working with it but it's kind of hard to verbalize, right? But it just makes it so everything neatly nests together, think of those Russian nesting dolls, right? I have to close the inner one before I can close the outer one, right?

[00:08:02]
You have to have pieces that fit together and things that fit inside of each other, it's kind of the same idea here. That's kind of the basic premise of what tags are. We're basically just making content and then we're putting them inside of tags that describe what's inside of them.

[00:08:16]
So again think of it like writing a Word doc but instead of going highlighting something and saying, make this italics, we're gonna put a tag around it that says, this is emphasized text that then describes what is inside of the text. It's actually a relatively similar process to writing a Word document.

[00:08:37]
Cool. We'll talk about what divs are and literally here in the next chapter, so if you have a question like what is a div? I'm literally about to show you. Right? Let's get into types of tags. So I've shown you an h1, I've shown you, alluded to what a div tag is.

[00:09:01]
I'm just gonna go through it now and show you a bunch of different kinds of tags. So first one here, we have the heading tag or the h1 tag. But I wanted to show you that there's actually all the way down to h6. Now you might ask, Brian why does this h2 have an underline underneath it?

[00:09:20]
It's actually using the CSS directly from my website. So every time you see one of these with a underline underneath it, it's my h2 tag, right? So I have the h1 up here, complete intro to web dev. It's the name of my entire course, it's the name of my entire document, right?

[00:09:37]
Some people will say that you can only have one h1 tag on the page. I'm not so draconian that I think that's the case. But some people will say that but a good kind of information taxonomy to think of is that you'll have an h1, which is a title of a whole page.

[00:09:58]
And then you'll have sub headings, right? So I have types of tags, other things like that and we'll have subheadings throughout the entire page. And then if my types of tags had a subheading underneath that, I would use an h3, so on and so forth, it's with this.

[00:10:12]
So that you can have various types of nesting of headings. I've probably gone down to an h4 before, I don't think I've ever used an h5 or h6 before. Because I don't think I've ever had such nested information before but you could and it exists precisely for that reason.

[00:10:28]
But notice there's kind of this implied information hierarchy by making the heading smaller and smaller. And again just to remind you, these are editable if you wanna mess around with them. That's kind of the point here of me making these little editable tags here so that you can try them and see and mess around with them and have fun.

[00:10:52]
There's a lot of learning to be done in play I think, personally. Okay, so I have a paragraph tag here and I showed you that maybe a little bit earlier but it's basically I have a paragraph of text, literally this, right? This would be a paragraph of text.

[00:11:11]
So a really good analogy for paragraph text, imagine you're reading a chapter book, right? And there's various different paragraphs on the chapter book. You can use a p tag to surround every single chapter in the chapter book. In a good place of when you would use a paragraph, right?

[00:11:27]
Notice when you would end a block of text, you would have some sort of hard return, an indentation, right? And you would continue on the text, that grouping of text is when you would use a p tag, right? So here I have two different paragraphs of text, notice that it's nonsensical text, it's called lorem ipsum text.

[00:11:48]
It's meant to just look like real text but don't actually say anything, it's a design thing that people do. Yeah, I have two different blocks of texts, I would use two different paragraph tags to do that.