Semantic HTML - How to Write Clean Code (Beginner)

hey what's going on everyone in this video we're going to learn about semantic HTML this video is best watched on a computer or laptop and does require the basics of web development including separation of concerns and a text editor if you need to learn about those check out my last two videos in the description now let's begin the tutorial by learning what a semantic HTML element is so what is a semantic element or HTML tag and semantic hTML is when an element clearly describes its meaning to both the browser and the developer so if we take a look at this diagram to the right we can see two models that are represented in two different ways over on the Left we have what we call a div element and spans and they basically create this model but it doesn't really tell us what it does right I mean it has a div and inside the div there's a span and though there's another div and another day if not another div but what does that really mean it'd be hard if we coded this and came in and we're like hmm there's no real meaning behind this when we compare to something over on the right it clearly defines what it's doing right so we have the header tag inside it's the nav right and then we have an article and a figure and even a footer and right we might not really know what article or figure means in this context right now but we have an idea of right we've read an article before usually it's some type of content a figure is usually something that's like a picture or we go to an art museum it's it's a model right so we have an idea of what these are and that's what semantic elements are what semantic hTML is it describes the code in a way that it basically documents itself right so when we compare these two models we're gonna choose the model on the right side because it clearly defines what the code is doing to both the browser and the developer in the previous videos we learned about how to build an HTML page in in the index.html file and in this video we're gonna learn about a way to really specify our code in a more direct way to the browser that will basically increase the meaning to the browser and to the developer ourselves so what we call this is an html5 template right so at the top we have doc type HTML and this is a is a tag that tells the browser that this is an HTML file and this is required on all HTML pages alright so now we have the HTML tag and we've seen this before and the other two videos and we have laying HTML attribute and that stands for language and it's equal to en for English because we are going to be right in our website in English if you were writing your website in Spanish you could you would change en tu es right and we learned about the head in the other videos this is usually this you this is a basically information that describes our website now these are two two tags we haven't seen before and they're both the same so it's meta tags right but they both take different HTML attributes and this first one is char set equals utf-8 and that's basically a set of characters that that this meta tag tells the browser that we're going to use and this is the standard set of characters so this is required if you want the browser to be able to understand the code that you are writing now in this other meta tag we have what we would call a viewport meta tag and right here we have an attribute name and it's equal to viewport and this is because we want to tell the browser that when when we are resizing the browser at any point we want to keep the width to the device width right so if we load our website on our mobile page we - equal to the size of the phone vice versa if we were on a desktop we wanted to go to the size of the laptop we were on right so this tells the browser to always make our words like the size of the device that it's on and we learned about the title tag this goes to the document and then this is for the browser tab and we wrote document in here this is usually just default but we can change this to whatever we want and then we have our body where we write our content and then we have our closing HTML tag now let's go into our vs code app and create an index.html file using this html5 template so now let's create an index type HTML file using what we learned about the html5 template and semantic HTML so let's create a folder on our desktop and name it website there's like we did in the other videos we're going to drag or we're going to open up our via Skoda going to save we're gonna create a new file then save index.html file we're going to save that to our website I'm folder and we should see that within that right and the goal of this is to create this model that we talked about the semantic model we're gonna create a header tag and inside that is going to be nav we're gonna have an article tag and side that is going to be a figure tag and then we're gonna have a footer element we want it to look just like this okay so how we're gonna do that is we're gonna start with that html5 template and the way you can do that in vs code is you can just type in HTML you can go down to here and click enter and you will have a shortcut that basically creates that html5 template now inside the body tag what we're gonna do is we're gonna start building out that semantic HTML template and we're not actually going to keep this open so we can take a look at it if we need to reference it right so here we go right at the top we have well we have is this outline gray component or element that's wrapping around the whole thing and we can kind of just keep that as the body tag right we can think of that as the body tag so the first thing we want to do is enter in the header tag and then it looks like inside the head of tech is a half tag okay so we'll put that in there and then below that is an article tag let's put that in there and then looks like there's a figure in there cool and so if there's a flutter below that right sweet now let's compare that to what we would have created if we had fallen this model right so we got a div inside that is a span right and below that's a div and but then that's a div alright and then below that's a dip let's zoom out just get so we can compare these a lot better so we got this compared to that and Wow you can really tell that this code is a lot easier to read than this code with all these divs right that's the importance of semantic HTML it really cleans up our code and tells us how to tell the browser and the developer the meaning of our okay but there's not really any content on the page and we kind of want it to look like this so let's add a what we call a link tag we learned about separation concerns and create a website that CSS file we can do that by doing command click and it will create the file for us and now we can start to write our CSS within there okay so we have our first our header tag and a nav tag within that and so we want to make the header green right so let's go over to our website dot CSS and we actually can split this right right and close that out now we can have them both side to side let make it a lot easier when we start refreshing okay so let's also open up our page so keep that up and over there so what we're gonna do is we're gonna target our header file and we're gonna sorry header element and change the background color to green awesome and if we refresh we won't see anything because there's no content within page right so there's no type to header so let's actually add a height and a width and we'll say 100% so it's equal to the height of our our width of our browser so if we drag it it will still remain as you can see it's always 200 pixels high the width is always a hundred percent of the browser cool so now if we go into right about that let's actually target our body tag right that was supposed to be gray so you remember that so the way we could do that is we can write this role and it's called border and we can go 1px solid right right and now we can see kind of the kinda you can see it maybe it'll be a little clearer if we did 5px huh oh yeah that's a lot easier to see and you can see like for some reason there's this it doesn't go right to the edge of the browser right and that's because by default some tags have CSS applied to it right and in this case there is a margin being applied to it so if we do margin zero I'll actually see that get taken away within the browser awesome and then let's make this the height of the full width of the browser and this stands for viewport height so if we do that again you'll see that it is the height of the viewport pretty cool and if we did a hundred percent you'll see it's only 100 percent to the content that's within it and that's this utter element but for now let's just keep it here or refresh it okay and then we have this nav element that's within it right and so let's target that and let's give that a background color of light whoo okay now if we refresh again you're not gonna see it because there's no height to the element all right so let's apply some height we'll do it half the height of this header so you should see it halfway pretty cool okay but in this diagram it's kind of often to the right right and there's like these three boxes that represent the navigation of our site and then we have this over here so if we wanted to follow that what we could do is we could change the width of this right we could do 50% right so now it's only half the size of the the browser and since this header tag is a hundred percent of the browser that means they will always be 50% this will always be half the size the be cool next we wanted to color our article Orange and that'll be below our header tag so what we want to do is target that Tiger that article element and change the background color to orange right and we can save it and let's give it a height remember because it will be height there won't be any content so we need to add height to it and we'll say that's 500 look at that it's right below our our header tag that we created up here and you'll you'll notice that there's a whitespace you're like hmm what's going on there the the most likely thing is that there are Styles being applied to the header tag just like the body tag so if we do margin:0 nope that wasn't it padding:0 nope oh we don't know so we're gonna introduce you what we call the dev tools in Chrome and on all browsers you're going to right click and you're going to inspect and this is going to pop up in what we call the dev tools and now you can see look we're hovering over this we're hovering over this and we can see the dip the different elements on the page and I'll highlight it for us see it says header and this is article now we would assume that for some reason there's a space between these two why is that happening and I would assume it's because there would be some type of issue and here it is it's our figure tag that we have in target yet and see how these these rules are being applied to it that we haven't we haven't coded ourselves these are called user agent style sheets and these are basically default CSS properties so we can actually even go into here and reset these properties and we can go out margin zero and what that that space is gone now if we refresh the page like huh it's it's it's got these style sheets are still there right this is only temporary right D whatever we do here is only temporary once we refresh this actually will go away you can even delete your entire website from here you can't delete that element but I believe you can eat delete the body and now see everything's gone but if we refresh everything is back to where we were this is gonna be really important when we start debugging our website and trying to build around our code that we have created okay let's close out of the dev tools because we know what's causing that issue now and we can write a new rule our figure element and we can to margin:0 like we wrote before inside the dev tools and when we refer refresh that that goes away and we can inspect it again when we can see that we apply if we open up that element we can see that rule that we wrote and it even targets and here's all of our code it's pretty cool okay so let's continue down we have that figure element let's add a background color to that and you can play anything let's do a core Marine up we need to apply a height to it so let's do that let's add 100 pixels and boom there it is cool and last but not least let's add the footer into our page and what color was that that was a blue okay so let's do that target our footer element at our background color blew up we spelled background wrong spot right and let's change the height to 300 pixels and with them we have a basic model of what we created now you're wondering why is it that our border that we created is basically getting overflowed by our elements that we created inside and that's because it's at a height of 100 VH the viewport of our browser right and when we load it but this is the this is the view height right but if we did a hundred percent saved it and refreshed it you'll see that it saves to the content that it's the height of all of our content awesome and if we wanted to create some space between our border we could do that and now we can see all of our elements within it pretty neat so that's the basic idea of semantic HTML it's a way of describing our code to both the developer and the browser in the next video we're going to properly learn the basics of CSS so we can move maneuver items around on this page such as this block over here let's say we wanted to change this to be in the bottom right corner and set at the top left we could apply the position relative to this right and then we can go to this tool me a position:absolute and you might not know what this means and we're gonna learn but I just want to show you guys and if you do that well it's shift spots and if we do bottom zero now it's at the bottom right corner of our header tag look at that pretty cool we're gonna learn a lot more about that in the next video if you guys have any questions please feel free to hit me up on Twitter thanks for watching I'll see you in the next video

Channel: Ethan Eisenhard

Views: 3,571

Keywords:

Id: wu6PPRKcT8Y

Length: 19min 47sec (1187 seconds)

Published: Tue May 19 2020