 Hi there, my friend and friends. When you first start learning HTML, it can seem really straightforward. You have a paragraph. Oh, you just need a little p tag for that. Then you learn that there's different types of headings and that's not so bad. And then you have lists and there's actually two different types of lists. And then there's the items inside of that. And then there's the strong and the M and there's links and there's images. And the list just seems to keep growing. And you wouldn't be wrong because there's actually 118 different elements in the current HTML living standard. But don't worry, you definitely do not need to learn all of them, especially not right now. I'm assuming that you're very early on, you're just starting to learn HTML and maybe sprinkling a little bit of CSS in there. And if that's where you're at right now, in my opinion, there's only really 20, maybe 25 tags that you actually need to learn and remember sort of what their purpose is, especially early on in your journey. And to help simplify things a little bit, I also like to group these offs and we have less than 10 in every single one of the groups. And by doing that, it makes it a little bit easier. So we have a meta group of tags. I have a layout group of tags and what I like to call the content related tags. Now, I like grouping them off because I find by giving them sort of a more specific purpose, it sort of just makes life a little bit easier. Like I'm putting in content or I'm making a layout. I should be looking for one of these ones. And these are completely made up by me. These aren't like official categories or anything like that. I just again think it helps simplify things, especially when we're learning. And one thing I just want to say before we jump into these different categories is this video is really intended for people who have at least started writing a little bit of HTML and CSS. Because we're going to be going through an overview of tags. If you're looking to get into web development, you haven't even written one line of HTML yet. This video might seem like a little bit much. And I'm going to link to a playlist just down below this, which is my complete beginner series on getting started with HTML and CSS that really starts from like absolute zero of how like what an HTML tag or element even is and the syntax behind it. And it starts very, very simple. But if you have started playing around with it a little bit and you want to know the things that you really need to focus on, especially in the very early stages, because there's a lot more than what we're going to cover in this video. But these are the ones that you need just when you're starting off and then you're in the right place and we're going to start off with that meta category that I just talked about. Now in this meta group, there's actually a meta tag that's going to come later. You don't even have to worry about that one for now. So hopefully that's not too confusing, but in this grouping of meta tags, the first one there is your doc type. Now you'll always have your doc type is the first thing in your HTML documents. And this is just telling the browser that it's an HTML document that it's seeing, and it's also actually telling it that this is an HTML five document. This is important because we've had previous versions of HTML that were actually a little bit different in the rules and the syntax that had to be followed. So it's just saying, you know, I'm using the most current version of HTML. Just so you know, and it just helps the browser know what it's looking at. Then of course we have the HTML tag itself, which opens at the start and then ends all the way at the bottom because that's where all of the HTML is going. And I know it can seem a little bit silly that like we just told the browser it's looking at an HTML document and then here's where it starts and here's where it ends, but when we're dealing with computers, we usually have to spell every single thing out. And that's exactly what we're doing. We're giving it a file type, doc type at the top. And then we're saying, and that here is where that HTML content actually lives. Our next up, we have two very important tags, which are the head and the body. And the head is really where like the meta type things live. It's the things that the person doesn't see, but just like those other ones we've looked at, which is why I sort of group all of these together and the whole purpose of the head is to put information in there. That's like extra information. And it's a little bit like when you take a photo with whether it's your phone or a DSR or any digital camera, it's going to store a whole bunch of extra information about that photo from the location to the time of day to a whole bunch of other stuff, the ISO you have and all those types of things. I'm not much of a photographer, but all of that information is stored in the photo. But when you look at the picture, you don't see that. This is what's in your head. It's extra information you're providing to the page, but it's not actually things that are showing up on the page itself. So one of the important things we have in there is our title and the title will show up in the tab and it also shows up in search results. So this is a very important thing to have in there because this information is available, but it's not actually part of the content of the page itself. And you just include whatever the title of your page is. That's nothing too complicated. And then after that we have sort of a grouping, which is either going to be a style tag where you can put your CSS or a link to an external style sheet. So if you're very early on, you haven't maybe touched CSS yet or you've just started looking at CSS, you might have seen the style tag. And if you've been doing this for a little bit longer and you're just watching this as a bit of a refresher, then you've definitely seen the link tag, which is linking off to an external style sheet. If you've just been doing like the inline CSS where you're going on the individual tags and applying CSS rules, you're very soon going to find your style tag in a future tutorial. So just know and get used to putting that there or the link to your external style sheet, which is generally how we do things. Though a lot of the time with early content, we use a style element at the top to put the CSS in. I've already mentioned the body, but this is where we finally get to like put content on the page. And these next two categories, which are the content related ones and the layout related elements, they are all going to be included here. And I've just realized I've been going back and forth. Sometimes I'm saying tags, sometimes I'm saying elements. The tag is we have an opening and closing tag, of course. Right. So the P for our paragraph, which we're going to talk about in a second, the opening one and the closing one. And then the content goes in there. So if we look from everything from the beginning to the end is our element and a lot of learning material you do, whether you're watching my channel, you're reading blogs, you probably see them used a little bit interchangeably. They tend to mean the same thing unless people are being very specific about an opening or closing tag, but sticking with that P tag, that's one of the essential content related tags that I do like to talk about. It's usually the first one that people learn, or they learn the heading tags first, the H1 through the H6. And I sort of group these as like, if you know one of them, you know all of them. So you have a heading one, a heading two, a heading three. And so for both of these, it's we're sort of telling the browser what the content is. I have some text here. What is that text? Is it a regular paragraph or is it a heading? Now, one thing that's really important about the headings is while they come with default styles on them, where when you do an H2, it gets a certain size. It gets a bold font on it and stuff like that. You don't actually want to be using these for styling purposes, because it's actually creating the document outline for your document or for your page. So it's a lot like a table of contents. And if you look at like a textbook or something like that, where you have a table of contents, where you have like a main section, and then there's subsections within there. And then there might be even subsections within the sections. That's a lot of what the headings are doing. Or it's exactly what the headings are doing where the H1 is your page itself, the title for the whole thing. You should only have one H1 per page. Then the H2s, they're the next level down. So this is sort of creating like the sections of content in the document outline. Then you might have an H3. So the H3 would be a separate section within that H2 that was just before it. And then you might have several of those. And then you go to another H2 and that's sort of pulling, okay, we have another separate section here. So the way that you use your H elements, the H1 through H6, it's really to create the document outline and treat it as if it's creating a table of contents, because that's basically what it's doing behind the scenes. And then, of course, we have our lists and there's two different types of lists. There's actually another type of list that we're not going to talk about today, but there's the two ones that you see the most often, which is the OL and UL, and that's for ordered list and on ordered list. And then whenever you have these lists, first we're saying I have a list and I have to say every item that you have in there. So then we have our list items, which is our li tags. So again, it's you put a UL, then you put all your li's for each one of the different bullet points or the numbered lists that you might be running there with an ordered list. Is each one of your li's that are in there. And then at the bottom, you can close that off and keep going with some other content. The next two that I like to look at that are sort of treat them similarly to one another is the strong and M tags, first of which is strong, which actually stands for strong importance, which by default will make your text bold. And then the EM, the M, as you'll often hear it is your emphasis tags. You're putting emphasis on that text. And these both have semantic meaning to them, just like our H1 through H6 help define the document structure. There's semantics and there's actual meaning behind when we use the strong or the M tag. And that comes to like how the text is read. Because obviously a big difference between I love you and I love you, right? And if some, depending on how someone says that. And so that's if you have the love in the M tags there, you get the more, the more serious one, maybe there, you're putting extra emphasis on that text. And it's not just about the visual of it being italic, but some people will be using screen readers that read a page to them. And it will, this helps inform the screener how it should be reading the text aloud. It's giving that extra information to the browser as well. Now up until now, most of them, I think are pretty straightforward, though strong and M, maybe sort of like it's strong importance, but you get there. Then you have the A tag and an A is a link and that can seem a little bit weird. But what it actually is, is the anchor tag and you can see it as it's anchoring that text that you have to another location. So when I click on it, it's going to bring me to that. So it's like tethering it or anchoring you to another spot. And if ever you have trouble remembering it, that's just what it's that's what it is. And it's nice and short, which is good because we tend to put a lot of links on our pages and there's two different ways we can use links. We can link to another page or we can link to within the same page. And if you want to link within the same page, you would link to the ID of the element. And then when you click on it, it will bring you to that part of the page. And of course, if you're linking off to another page, you just put the URL for that page and you can be brought over there. Next up is another one that you probably end up using a lot, which is our image tag and that one's pretty straightforward. I am G. It's a little easier to write than writing out image and you just tell it where the image is and you have an image. So that one's nice and easy and usually pretty easy to remember as well. And the last one that I want to look at that's more content related is the span tag and span is similar to your strong and your M. But the difference with it is it's it doesn't come with any default styling and it has no meaning to it. So you might be going, well, what's the point of it then? But the point isn't to take the default styling and it's nice that it doesn't come with any meaning. And the idea is that I can select a piece of text and I can style it. So if I have a heading and I actually need like say it's a two word heading and you want the color for each word to be different for a design that you're creating, well, then you would use a span tag to be able to select one of those two words and change the color of it. And those are the essential for me, the content related ones where we're really working with content. We're telling the browser what the content is like, this is a paragraph, this is a heading, this is a list and things like that. This is a link and image and all of that. So like for me, those are very content related. I like grouping them like that. The next group that we're going to be getting to is more of the leot types of things. We're still telling the browser and giving it information about what each piece is, but it's a lot more leot related and grouping related, I guess you could say. But I just want to let you know like right now we're going through all this. It might be a lot of information. If you want a cheat sheet that has all of this information in it, I have made one. There's a link down in the description below where you can get this. I list all of these tags out with little descriptions of what they are and include a couple of links on some of them that might need a little bit deeper of an explanation. But with that out of the way, let's get to it. And the first one I want to talk about is the main and the main element or the main tag open and close. It's a little bit like the H1 where we should only have one per page. And the idea with the main is this is the main content of the page. And you might be saying, well, Kevin, the entire page is my main content. That's why I have a page. And if that's the case, just throw one in there because every page should have one main. And if everything is your main content, then just main at the top, main at the bottom and your content goes in there. No problem. But you might have other things on your page as well. One of those things being the header. And a lot of the time we have a header at the top, then we have the main and then the other one that fits after that is the footer down at the bottom, the header, which often is at the top of the page. And most websites these days will include your logo and your navigation because that's not really part of the main content of your page. That's like the before your main content of the page, right? Because it's always there. It's not like if I go to like a pricing page, the navigation is not really related to that pricing. It's related to everything on this website that I'm on, but it's not about the pricing itself. The main content is the pricing. So I have this extra information that's coming before I get to the main stuff. Unlike the main, you can actually have multiple headers. We'll talk more about that in a second, though. The other one that I just mentioned though is the footer. And the footer is similar to the header where it's something that's at the bottom that's not related directly to the main content but is usually related to the entire page you're on. So often this actually has like a different navigation in there on a lot of pages now. You may have your copyright information there. There could be like extra other information that you find down in the footer and it's usually repeated on every page though it doesn't necessarily have to be. And in both the header and the footer, I said that you often find navigations and that's where you would have a nav tag. And our nav tag is used to say this is a navigation. Importantly, though, it should be like an important navigation. So it's not every group of links that should necessarily be a nav. If you're just throwing like here's like a couple of pages you might like. That's not really a navigation. That's just a group of links. But if you're doing it as a navigation, so like this is how you should get around my site. Here's the primary, all the primary pages that you might be interested in. Then you can use a nav and list out those pages that you might be going to. There you have your nav and then in the nav you'd have a list of links that you'd be using to list out all the different places that people could get to. And next up is two that are a little bit more people get a little bit confused between the two of them, which is the article and the section. And an article is something that should be a standalone piece of content within a page. And that means like if I took it out of that website and I brought it somewhere else and placed it there, could someone make sense of what's going on in this piece of content. And so this could be a recipe, right? Like say I'm on a recipe site that has all these different recipes. Every page might be a different recipe. But could I take that individual recipe off and go like I could I could take hopefully your recipe from your page, bring it over to my website that's a web development and put a recipe there. It might be weird, but it would make total sense. So that's the idea with an article is the standalone piece of content that can stand on its own. And the other one is the section. And the section is more about like sectioning off content. So here is, you know, you might have a homepage that has like your main area at the top that's talking about your product, then you have like a little about us section, then you have a pricing section. And it's one page that's broken up into different pieces. And those pieces are sort of related to one another, but you're you're separating the different sections. It could even be within an article, you could have several different sections within a larger article. So they don't really stand alone. They're related to the other content that's around them, but it's different sections that you're sort of organizing your content by. You can use your section element. I have one more element that's probably the one you're going to use the most. But before we get to it, I just want to circle back to the idea of the header and the footer, where as I said, you might have a header at the top of your page and a footer at the bottom of your page. But you can also have headers and footers in other places too. And one of the common areas you will see them is used within articles because you can open an article and then your article might have a header where it's sort of the title of the article and it's introducing the article. Then you have the main content of the article. So the article itself, don't put the main tag in there. You have main tags on the outside probably, but it's the article itself. And then you might have a footer down at the bottom. You do not need to have a header and footer within an article. You might only have one or the other and not both. And if you're not too sure about it, don't stress too much about it. Header at the top of your page, main inside your main, you might have an article or a few articles and then a footer down at the bottom. And the very last thing that we're going to talk about is the div, which is your division, which is used all over the place. And divs is we will call them is something that we use to divide our content up into ways to organize it. And the only real reason you'd be using it is when you're going to be using CSS to create a layout, because this is how we sort of group different things. So when we need two things to go next to each other, we sort of have to wrap them up in a little box to put them next to each other. And in general, I'm going to encourage you to go and use one of those other more layout related things before you use a div. So maybe an article makes more sense or maybe a section makes more sense. You want to use something that actually has meaning to it. But if, you know, I just need to create these boxes because I need to organize content in a very specific way when I'm making my layout, then the div is completely fine. And that's what we use it for. And we use them all over the place. And you'll definitely see them used a lot. But if we can use the correct semantic tag, we want to use the correct one. But you might say like, no, this really isn't a section. I have a section of content. I just need three columns in there or whatever it is, then just put each one of those in a div. There's no problem at all. So once again, that cheat sheet is linked down below if you'd like to get that. And if you really are just learning HTML and you're very early on in your journey, you might also really enjoy this video that's right here where I look at five important HTML concepts, specifically for beginners that are just getting started with it. And with that, I would really like to thank my enablers of awesome TT LLD Andrew James and Rico Michael Simon Tim and Johnny as well as all my other patrons over on Patreon for their monthly support. And of course, until next time, don't forget to make your corner the internet just a little bit more awesome.