When to Use Semantic HTML Elements Instead of Divs #tryminim

hi guys welcome back i'm craig and i'm a software developer in the uk and in this video we're going to build upon the work we did with divs and spans by learning all about semantic html elements we'll learn what semantic elements are exactly which elements are considered to be semantic which new semantic elements were made available with html5 and also how we use semantic elements to make our markup more meaningful and descriptive to developers browsers and screen readers used by the visually impaired dividing all of our content up with divs can get a little bit messy and using semantic elements instead is the answer we're on all of the main social media platforms as everybody is these days so if you'd like to join us on twitter instagram or facebook or all of them pick your poison and we'd be happy to see you there the links for all of those are in the description below if you're finding the content useful please remember to smash the like button and subscribe we're posting a couple of videos a week so remember to click the bell and get notified when those videos drop the more engagement that the channel gets then the more youtube's algorithm will get hold of it and put it in front of the people that can benefit from the content so a quick search of the word semantic gives us this definition of relating to meaning in language or logic here at merriam-webster we have a straightforward definition of the academic field of semantics which tells us that it is the study of meanings so if we say we have semantic elements we're simply saying that we have elements that have some meaning semantic elements make our websites much more readable and accessible accessible being the keyword in the sense that web pages can be much more easily interpreted by screen readers that are used by those that have impaired vision they also better describe meaning to both the browser and to us as developers semantic html5 helps keep our hundreds and thousands of lines of code organized and easier to maintain we have of course already seen some elements that could be considered semantic in that the elements clearly define their use and their content some examples of semantic elements that we have seen already include the form element and the table element if we see these they clearly define their content examples of non-semantic elements that we have seen already include divs and spans and these elements are still great and can be used regularly and extensively i use them all of the time but on their own they tell us absolutely nothing about the content that they contain let's look at this for a second this is gmail's html code written by google of all companies and here we have lots and lots and lots of divs i count divs nested within divs nested within divs 15 deep and this is something that provides us actually with no meaning at all imagine you get a job with google tomorrow and you're placed on the gmail team and your task is to maintain the source code and if all of the code looks like this you might have problems because this overuse and nesting of divs throughout page is a well-known concept in web development called div soup diff soup is essentially where we are using divs excessively and more often than semantic html elements usually by nesting divs inside of divs inside of divs until you end up like google have here in the gmail source code with 15 divs deep this practice makes websites less accessible due to the content being harder to interpret by screen readers used by the visually impaired as i said previously also it makes our lives as developers tougher as the code is harder to read and maintain so i think we've got the idea and we're sold right we want our markup to be meaningful and descriptive in a previous video we went through and separated out a page of content and divided it into distinct sections using divs and spans and this is a perfectly fine and acceptable practice and you can do this especially with incredibly simple pages like this one in this case the comments are helping us to understand what each section is for and they even help us to understand that these are all different sections of our web page they don't help out those that are using screen readers as the html comments are not read out by screen readers so in this example a better approach would be to provide elements that have some semantic meaning that will make those sections much more identifiable to us as developers and also to screen readers and the browser before we actually tackle this task we need to know what kind of semantic elements are available to us so let's have a quick look at mdn and we see here at this link that it gives us an example of some of the many many semantic elements that are available to us these semantic elements haven't always been around and the ones that we see here were introduced in the latest recommended standard for html which we know as html5 so if we open nav main and article we see that nav says the html nav elements represents a section of a page whose purpose is to provide navigation links which is fairly straightforward main says that it represents the dominant content and article says that it represents a self-contained composition in a document page application or site like for example a forum post a magazine or newspaper articles or blog entries we might represent those on a page like so so we have a rough mock-up here of a standard layout for a simple website that is using semantic elements and this is how we might lay out such a page we have a containing div here that's wrapping all of the content and inside of that we have a navigation section that's marked up using the nav element there's a header section here which represents some introductory content this could be a main banner image a call to action or could even contain some nav links if we like we could cut this out and pop it inside the header if we wanted to we then have this main section which as we read on mdn will contain the dominant content of our site so this main element contains two nested elements a section and an aside the section element represents a generic standalone section and an aside would be something that's only indirectly related to the document's main content we could have more links to other blog posts we could put ads in there we could have a quote from inside the main content etc etc inside the section we have an article element where the main text content could go like we saw a second ago then we just have this footer section which is self-explanatory but you could put in here an address some contact links a telephone number a google map of your business location some copyright information or links to faqs and privacy policies and things like that that you can read these tags directly in the markup and know more or less about the meaning of all of them instantly is a perfect example of why we say that this is semantic html as i said using divs is perfectly fine and you can use them and we'll use them a lot especially with incredibly simple pages like this one they're often needed as genuine dividers of content that don't require any specific or explicit meaning sometimes your web pages will need a div or two to create some space or structure or to be used for the styling of elements for example in the nav element here we might want to put a company logo and a set of anchor links in this case we could use divs to help keep these two distinct parts within the navigation section separate from each other and it would be perfectly normal and standard practice here we're not looking to provide any meaning we're looking to provide some structure we'd likely add classes and ids here say a class of logo and a class of nav links for example and then those classes would be used to target those divs for the purposes of styling and layout so we would call this presentational markup rather than semantic markup presentational markup in the case that we've just seen where we have a nav that contains two divs one for a logo and the other for links are simply there to keep content separate they're not really providing any meaning to anything they're just dividing content which is the intended use of divs so this is an example of some clean markup that we would commonly use where divs keep content divided and would then be used with classes and ids for layout and style we could move the divs around space them out add styles to each one and to their children so i hope this is making sense so far guys are you sold on semantic elements yet if you are write semantic in the comments or press f to pay respects okay so let's head back to codepen and the work we did on divs and spans what we're going to do now is we're going to work through this file and start applying some semantic elements throughout the page in place of the divs the link to this file is below in the description so head down there now and get it open in codepen this exercise is incredibly simple we're going to find the divs that are separating out our content into distinct sections and whenever we come across a div we're going to take a second to consider what semantic element we might be able to use in place of the div in order to provide more meaning for the content that is within and once we've decided we will then replace the div with the semantic element if you would like a point of reference for the elements that are available to you you can use the layout that we just looked at as a guide or you can refer back to the page that we looked at on mdm before you get started don't forget to fork the pen here which basically will create a copy that you'll be able to save as you make changes to your file so i'm going to start at the top of the document and work my way down and once we've made a change from a div to a semantic element we're actually going to see a style change on the page just in terms of the colors that you used i've added all of these to the css so that's nothing that you need to worry about we're just concentrating on the semantic elements only so this first one should be quite straightforward this is quite clearly a section for navigation so here we're going to be able to use a nav element if i double click where it says div in the opening tag and then do exactly the same whilst holding command or control on windows then we're going to be able to create multiple selections that highlight the div if i now type nav it will replace the div with a nav and just as a visual guide we see that something has happened we see that the nav turns green so that is a good indication to us that we have made a change to a semantic element next we have this large section that has an h1 heading an image and a button and this looks like a page header to me possibly and handily we've also added a comment in the divs and spans video that says header so this would be a good use of the semantic header elements so i'll follow the same process of double clicking the div and then holding command or control on windows double clicking again and now that we have both highlighted we can type header and now we have a semantic nav section and a semantic header section and we can see in our markup how much clearer this is for us to read than the content underneath that is still separated out using divs again just so we know that something has changed on the page there's been a stylistic change and the header now has this yellowish color scheme going on okay the next section is going to be a little bit different as we have a couple of sections here that we could group together as these make up the main content of the page we have some main text content that we could probably make good use of the article element for and we have this other information about products perhaps we could eventually have this to the side as some more links that go directly to the company's products so i think it best to take these two sections and wrap them within a semantic main element and then this about section could be an article and the products list could be wrapped inside and aside elements so i'll cut all of the content by highlighting it and using command or control and x then i'll add a main element and i will paste everything back inside of it next we double click the opening div tag and command or control double click the closing tag as well now we're going to change this to article and then we will repeat this exact same process on the div wrapping the products list and we will have this as an aside element okay so now we have this nice main section that's been built out semantically and it contains a heading and some descriptive text inside an article element and then we have an aside element which we could use to have links going to products eventually rather than the list that we currently have next we have this contact form which in itself the form element is a semantic element as we see it and know exactly what kind of content to expect however we have this h3 heading that accompanies the form and this is the reason why we had to group all of this content in a div to keep it together separate from everything else on the page a div might actually be fine in this case but i think we can go one better and we will say that this form is a distinct section of our page so we will use the section element here again we will click in both the opening and closing tags of the wrapping div we will type section and save and just like we've seen with everything else we're going to see a stylistic change to let us know that we've updated the element to one that is semantic we'll repeat this process for the final div on our page which is right at the bottom and it currently just contains some copyright information so this is the perfect use case of a footer element so i will add that in okay so now when we glance through the html we have completely semantic and descriptively laid out markup that will be readable to us and other developers it will be readable to browsers and it will be suitable for screen readers anybody looking over this markup can quite clearly see what each section is for and what kind of content they can expect to be contained within if i take a quick glance over both the starting and finishing markup comparing the two it's apparent to me straight away how much more readable the markup is now that we've added semantic elements in the starting markup if we remove the comments that we placed above each of the divs it would be very difficult to grasp any understanding of each section on first glance we'd have to stop for further inspection i can now scroll through straight away and see instantly that we have a nav a header a main section with an article and an aside and so on so it's much much more readable okay guys i think that's a good place to stop this has been html5 semantic elements and semantic elements give us meaning they bring understanding to vague html files and they help us solve the problem that we saw earlier of div soup semantic elements make our web pages much more accessible and more easily interpreted by screen reader software that is used by those with impaired vision they also make pages more readable to browsers which is good for seo and also to us as developers so this helps us keep our hundreds and thousands of lines of code organized and much easier to maintain so thanks for watching guys remember to subscribe if you're liking the content on the channel so far we're coming to the end of the html section now and in the next videos we will be working on our end of unit project where we're going to build out a full landing page for a burger restaurant then we're going to move on to css so if you liked this video hit the thumbs up below and join me in the comments section thank you once again for watching i really do appreciate it and i will see you in the next video

Channel: Minim

Views: 3,488

Keywords: front end web development, web dev, web development, code, coding, javascript, react, css, html, tutorial, frontend, front end, lambda school, code bootcamp, minim, tryminim, minim code, minim coding, minim webdev, minim web development, minim javascript, minim css, minim html

Id: ZThq93Yuwd0

Length: 17min 56sec (1076 seconds)

Published: Sat Apr 10 2021