HTML & CSS for Absolute Beginners: Semantic HTML

Key Takeaways

Now, just like I was talking about earlier where I said it's really important that we use the correct tags for everything we're doing. So, the difference between an ordered list and an unordered list, for example, or using the correct heading levels and the impact that the heading levels have on the page structure. And that's because all of these elements are what we call semantic elements. They carry meaning to them. Our heading one is the title of our page. Our unordered list is a list where the order of the list items doesn't matter versus the ordered list. A paragraph is a regular paragraph of text. So, all of these you're not just throwing in there, we're adding context to what all of this content is for the browser by using the correct tags. And right now, all of the tags we've been using have been directly related to the text that we're putting in here, right? This text is an H2. This text here is a paragraph, just like this one, just like this one. And then, oh, this text is an H2. But, it's also important that we organize things in a bit of a larger structure, as well. And for that, we have a few elements. I'm going to scroll all the way down. Oh, I never deleted my my bread and bacon BLT that I had at the bottom. Um, I'm going to come all the way down here at the bottom and bring in a few a new elements that we have right here that we haven't seen, which are the header, the main, a section, and footer. And these are just some. There are a lot more, and a few of them we're going to bring up as we go through this course, and other ones you'll learn about afterwards once you're finished with it. Um, the important thing with these is they're also considered landmark regions. The idea of landmark regions, I think, reinforces why we're even using H1, H2 to create the structure of our pages, as well. Because these types of things help with assistive technologies, like screen readers. Because some people are going to be visiting your sites, and they're not going to be looking at it the way we are. They might be using something like a screen reader, because they might be blind, or they just might be poor on vision, and they have technologies like that that can read websites to them, and they can navigate the web just like anybody else without actually being able to see the website or seeing a blurry version of it. And they use these assistive technologies to help them get through the site. And the example I'll be giving for for this is it's the same reason like if you were to walk into a an office building and you got to the floor you wanted to get to, you know, it's a huge building and you get to the floor you want and then there's no numbers and no company names on any of the doors throughout the entire building. And then you're just going like, "Oh, I they told me to come on to floor six. I don't know where to go." And you just go to every single one of the offices and try and figure out well, hopefully this is the right one and you just go one to the next until you find what you're looking for. That would be a nightmare, right? You would that would just be a very unpleasant experience of awkwardly knocking or going into each and every office until you find the right one. That's why we put door numbers and why we put company names so you get there and you look around and you're like, "Oh, that's what I'm looking for." and you can go to the right place right away. And it's the same thing when we're using the correct semantic HTML. We're creating these different sections of a website to let browsers and assistive technologies know what all these elements they're coming across actually are. And while a lot of users might not see these elements that we're going to be adding in now, they help convey that page structure and as I said for people using screen readers, it makes it a lot easier for them to understand and navigate the site. And it would also help with bots and other things that are scraping websites too to make sense of the content. So for, you know, Google bots that are scraping websites trying to understand what your website is, proper structure is going to help with that search engine knowing what's going on as well. So there's lots of reasons for using the correct tags. And so using these, the typical structure of a website might actually look something like this. We'd have your body that has all, you know, the body we've already seen that. We already it's all the content that's showing up on our actual page. Then we'd have a header at the top of the page that usually has the logo and navigation in it. We'd have our main section so it's all the main content. Then optionally inside the main, you definitely don't need to do this because our heading levels do create the structure, but I find it easy if there's like clear sections of a website, we can use a section element to create these separate sections along the way. And then you often have a footer at the bottom of the page. It has things like your copyright. A lot of time it has a navigation in it as well. So the header has the logo and navigation. A lot of footers have the copyright information. They end up with another navigation, the social links, contact information, that footery stuff that you see on websites all the time. And so I'm going to leave this on the screen right now so you can actually see the structure that we have. And so I'm going to encourage you to go and add all of these things to your website right now to add the proper structure to it. And as you're bringing these in, make sure that you're using the proper nesting, where we're closing things in the right places. These sections can also be closed. So with each section opens and closes along the way. And we're creating the proper structure so everything is properly nested, and then you're using your tabs to also make sure that the indentation is correct so we can see that nesting nice and clearly. Once you're done with that, you can hit play and I'll show you my solution. All right, so I'm assuming that you've gone through and done all of this. So I'm going to go through and update my own version. And also depending on how you've done things, if we look at the design right now, I do have a logo that we haven't brought in yet cuz we haven't seen images yet. So if you put the header around the H1, that would be great. Cuz we can definitely do that. That's sort of the title of our page and the introduction to our project. So if we can do something like that, and I'd be very happy with that. What I'm actually going to do is I'm going to take the header right here and I'm going to throw a comment in and say logo will go here. Just because once we get to version two of our website, we have the logo, the navigation, and that tends to be the very standard things that we do include within the header. So a little bit of a trick there, but if you put the H1 in the header, fantastic. You're thinking about things in the right way. So with that though, I am going to come and we're going to come right here. And we're going to add in a main. I'm going to delete this main from the top here and bring them all the way down to right before the copyright at the bottom cuz the copyrights for me the footer information at the bottom. And I'm going to close my main and then I'm going to tab that over just so it's lined up properly. And then I'm going to grab everything. So I'm actually just I'm placing my cursor down here. I'm selecting a little bit of content. I'm going to scroll all the way back up to where I get to my main here and I'm going to select to that H1. So I have everything in between my opening and closing main tags selected and I'm going to push tab there. And now all of that is inside of my main. Then we get to the optional part. If you didn't add sections, that's completely fine just because as I said this real structure is coming through the heading levels that we have here. But since we're doing this, we might as well come in and add in a section right there. And then we can delete that. Close section. We can open a new section. We can delete that section from here and go all the way down here. Close that section. And I accidentally opened a new one. We want to make sure that is with a closing tag right there. And then I want to go after my main. We can add in the footer. Put in return. I'm going to select this entire line by clicking a whole bunch of times. I think three clicks selects a whole line. 1 2 3. And then I can drag it up and drop it in there. And the first thing I'm going to do is save this. So control S to save. I'm going to refresh my page and we don't actually see any changes. If things change, then I'm know maybe I I broke something along the way. But seeing no changes at this stage is actually a good thing. And we can actually see that VS code's trying to help me understand where how the nesting is in this project cuz as I scroll down, like when I'm in my main or in my section, it actually sticks that to the top of the page there. So this can just help you know like how far into something you are at times. And it just VS code does this automatically where where shows us the nesting and creates these like sticky header levels Uh or these sticky yeah these these sticky elements at the top and so I'm in my header and then when I go past my header it sort of falls back away and then I go into my main. Now, while we're here, we do want to fix up things though because um these H2, these paragraphs are all nested inside my section so I visually want to represent that. So I select it, hit tab and it knocks them over a little bit. And then I'm going to put a return here. This is just for me to I like having visual separation between things so add an extra space. All of this is inside of that section. This UL is inside of that section. And I want to you can even see it VS code draws this line here and I just want my my opening section and my closing one to be aligned with each other so I can tab that over and I can see now that's visually all together. Then my main is going to close. I'll add an extra space. We can come here and I can shift tab to bring this back in and I can get rid and I can get rid of that extra space that we had right there and then I have my footer, my main and everything there. Uh you'll also notice I do have word wrap off. If you have word wrap on, I just find at this stage it makes it really messy. So again that would be under view and your word wrap or alt Z. Again, I probably option Z though it could be an alt Z on Mac as well. Um just cuz I find I mean it's fine. You can definitely see all the text but you can see how it just makes it a little bit more squished and everything when we have nesting going on and it makes it a little bit harder sometimes to see the structure of your site. So when I'm bringing in content, I like having that on but when I'm just worrying about structure and making sure my elements are all there, I like having word wrap off and it just makes it a lot more clear to see the structure of everything without really stressing too much about the content itself.