Why & When to Use Semantic HTML Elements over Divs

in this tutorial we'll discuss why and when to use semantic HTML elements over divs alright so I just have a couple of examples for you but first of all why do we even want to use semantic tags instead of divs well first of all it's easier to read and scan the HTML if it has been properly structured with these semantic tags and I'll show you why in a second it's also better for SEO it makes it easier for those search engines like Google to come to your website and properly index all the contents that's on there which in turn will make it more likely that you rank higher in their search engine results right so you get more traffic and it's also better for screen readers or assistive technology and to properly you know categorize and index what's going on on your websites once it's also better for accessibility these are the three main reasons for why we want to use semantic tags so let me actually just give you an example of what a very typical HTML boilerplate would look like so this is currently basically an empty HTML file now globally speaking you're gonna have a header usually a main section and a full footer section and so these are already semantic tags because you could also use divs right you could use divs this stands for divider right you could you could use that practically they would work the same but in practice if you want to use semantic tags this is what you're gonna get so header is usually for introductory content you know the logo like the introductory links the main is really for the the dominant content on the page and the footer is for you know maybe some other links like terms and conditions privacy policy not really important stuff going on there so in the header then typically you also have some kind of nav so the nav is really for the most important links on the page or the like the most important navigation on the page typically people structure it like this so you're gonna have a list of links so in a list we have Li so it's going to be quite nested here and then in here you're going to have the actual anchor tag and so usually you're gonna have a bunch of links here and then maybe you also have like a logo right a logo that could be just an image let's say and so you would have an image in the in the header and then you would have a nav right so it's quite nested here but this would be a pretty typical semantic structure in the header then in the main the dominant content on the page usually you're gonna have a bunch of sections as it's called right so in practice a lot of people use div but it's better to use section and I'll show you some practical examples on real world websites in a second but usually the main consists of a bunch of sections right and then in the section you can have a heading right so maybe an H1 or H2 and you would say something like about us maybe or maybe some kind of a benefit section let's do this it's a bit more realistic and then perhaps a paragraph section with a bunch of words and that will be a section and then you would have another section benefits instead of benefits we would have something like um how it works right and maybe some paragraph with a bunch of text so in practice what you see a lot of people do is they use div hair but it's better to use section so why section instead of div and I'll show you that in a second on real world exercise websites but in practice what you also have in the main sometimes is have some kind of sidebar or some related content that's not really the not really something that should get the focus but you could have something like an aside in here as well that's also what you see sometimes so this could be for a sidebar or something like that you're also going to see the article tag sometimes it's a bit trickier this one this one is more suitable for if you can pull out this content and place it somewhere else and it wouldn't lose any meaning right so this is a bit more rare and then in the footer usually um you know you're gonna have a bunch of links maybe some text but here you would also use that nested structure again except now you wouldn't use the nav now so nav is typically more common in the header because this is actually meant as you know a really important that of navigational links or you know navigational section if it's really important this probably shouldn't be in the footer alright so here you wouldn't see the nav tag alright so this is really common uh a you know semantic setup that you would see and now we're going to look at some actual websites to see how they've done it and I'll show you some of some examples for those more rare tags as well like article and aside all right so this is the stripe website but honestly I could have picked any landing page because they're they're all quite similar so we can inspect here and we can see how they've marked up their HTML so in the at the top we indeed see um a header here right so here they have a logo they have a bunch of important links and they have this sign in button right so there's a header for them and they have a bunch of divs in here in here because sometimes you need to use a div simply for stylistic purposes let's see if we can find a good example here doesn't look like it maybe we'll find a good example of that later but here we have a section so this is what they call the the hero section right really the the the the thing you look at first when you when you come to the website this is a section because all of this is related to each other it's like a way to introduce their company or their product it's all related to each other this heading and this text and this this graphic it's all uh it all has the same semantic purpose and that's why it should be a section and not just a div right so if it would not be related to each other and you would only need some kind of element just for layout purposes from stylistic purposes you would use a div right then we get to this section here and let's see so they used a section tag again and this is actually just a bunch of images actually right these images well what what it represents is the type of companies that use as this is like credentials for them and because each image here belongs to that same semantic purpose they all should be in a section tag and not in a div because a section means that the content in there is related to each other it has the same semantic purpose so it's better to use the section tag now why not use the article tag here but article tag means that I should be able to pull this out of here place it somewhere else and it would still have the same meaning or it would still be clear what it means but if I would take these images out of here and I would put it somewhere else on a different website or somewhere else it would just be a you know collection of images it wouldn't mean anything it wouldn't mean the same as it means here which is that these companies use stripe right so this only makes sense in the context of the striped website and therefore this is not the article tag but a section tag alright so then if we go down you're going to see a bunch of other sections they have that showcase why people should use right so they want to convince the viewer to use strap so here let's see this section it has to do with an overview of their product and it's a section tag because all of this in here is related to the to it to a an overall semantic purpose right so this heading is not some stand-alone random piece of text right it's it it's a heading that describes everything else that's also part of this and so it's all related to each other right that's really what it comes down to with Section versus div right this is a section this is a section and usually it's quite easy to identify them on these landing pages but this is a really typical example of sections versus divs all right now let's take a look at the mdn website the developer.mozilla.org so if you go to one of their articles you can see that we have the actual content we have some header on the top and then we also have this sort of sidebar let's see how they have marked this up so here we can see um this is the main content so you're only gonna have one main tag on your page because it's for the most dominant content on the page and they've used an aside tag for this sidebar here right and actually you could make the argument that the aside never should be in the main because it's not really part of the dominant content right so um you could make that argument and then in the main we see an actual article tag here so here they actually chose article instead of section so article is actually a bit more like there's an additional requirement that's how you can think of it the section just means that everything in there is related to each other or it has the same semantic Purpose with article the same has to be true but I also need to be able to take this out of here and put it somewhere else and it should still make sense and that's actually the case here I could take out this all of this text here you could put it somewhere else but it will still be the same it would still have the same value essentially right so it will still be clear what it is and therefore it should be an article tag another example would be if for example they had some kind of job posting here right maybe they they have some kind of um you know job post that would also be a good candidate for an article tag because I could take the job post out of this website I could put that somewhere else maybe on like um a jobs website and it would still make sense there right I could put it on any other website and it would still make sense that article tag is self-contained it explains itself it you can you can look at it you can read it you can consume it and it's clear what it is what its purpose is what it represents and therefore you want to use an article tag now this is quite rarely a site and article tags you don't use that much you don't use it often in most of your projects you're gonna use the section tag and a bunch of divs okay so here they also have some kind of navigation here so this is maybe interesting to look at as well so here they use the section for that actually they use a size for this overall piece and then they use a nav tag again and that's right so you're not only going to see a nav in the header but also sometimes outside of there if it's important set of navigation which it is right so this like a table of contents isn't important uh piece of navigation so you could opt for using the nav tag there this all may seem a little bit confusing and overwhelming in practice you know if you would if you didn't use nav here but you used just an UL perhaps or maybe a section instead of an aside all of that is generally fine in practice um you know it it doesn't matter that much for readability of your HTML the search engines don't really care that much I mean they must be pretty Adept at this point to dealing with with unstructured HTML because most websites out there are quite unstructured so all of this doesn't make that much sense and you know to to spend a lot of time and energy on but you know if you want to be precise about it that's how you would do it now I want to give you one example of where you would use the div instead of the section right because now we've seen a couple of examples of where to use something else than this so then where should you use actually where should you actually use divs well basically everyone else so here for example and this is one of my projects from my CSS course here we have a bunch of like we there's some uh well these are breadcrumbs and then we have some other button on the other side now this is not really related to each other they just stylistically speaking in the same uh white bar here but they have different um purposes right they don't have they're not they don't belong to the same semantic purpose but they are still stylistically in the same bar here and therefore you probably need some kind of element in your HTML to get the proper layout so in that case um you want to use the div actually right so here there's some kind of info bar but they're two different things this is breadcrumbs I use the section for that because the text the text in there they all belong to the same uh well overall semantic uh goal and this is a button tag but they are two completely different things they don't have anything to do with each other but I still needed some kind of element month to get this layout right so here I would I would not use section I would use a dip by the way if this was helpful I'd really appreciate it if you could like And subscribe also check out my courses on CSS and JavaScript if you want to take those skills to an advanced level because in there we will build some beautiful real world projects from scratch so you can see how everything fits together and really Master CSS or JavaScript and I will also release other courses from like react and node.js so if you want to be notified then make sure you are subscribed to the email newsletter you can find the link in the description thanks for watching and I hope to see you soon

Channel: ByteGrad

Views: 76,453

Keywords:

Id: bOUhq46fd5g

Length: 12min 1sec (721 seconds)

Published: Sat Dec 17 2022