HTML & CSS Crash Course Tutorial #6 - HTML 5 Semantics

or rather than gang so I've seen quite a lot of different HTML tags in this course or far but now I'd like to bombard you with some more and they are the html5 semantic tags so HTML as a language is always evolving and there's always new elements that are being talked about or added to improve semantics and usability of websites now in the html5 specification there were several new tags that were shipped in in order to help us better structure our content properly and I guess more descriptively as well so that now a browser can be in no doubt as to what our content is all about for example say we put some content in a div tag then the browser really has no idea what this content inside it really is could be an article could be a biography could be some quotes or some navigation links etc there's nothing really here telling the browser what that content actually is now html5 semantic tags aim to make our code more meaningful and solve this problem well it's not really a problem but it makes our code more descriptive so now we could say instead this is an article and use an article tag this is an html5 semantic tag and it tells the browser a bit more about what this content is it's a bit more descriptive so let's have a look at some of the different tags the different semantic tags that came along for the ride with html5 so first of all we have this main tag and that's for the main content of a web page the bit that's unique to that web page as well and it's not on other pages for example it wouldn't include the navigation because the navigation is on all web pages but it might include the content the main content of the homepage so we have this main tag now for that we also have a section tag and that defines a specific section of a web page and that could be a blog list or contact information or something else and we could have several different sections on a web page so we're saying to the browser look this is a unique section and it's kind of sectioned off from everything else it goes all meaning inside this tag we also have an article tag which I just showed you and that's going to define a bit of content which makes up some kind of article that could be a blog post or it could be a news something else like that we also have an aside and that's going to define some content that's related to something else for example inside an article at the bottom we could have a little section that is for similar blogs and that could be an aside because it's still to do with the article is related to it but it's not exactly part of the article it's an aside so we'd have those in an aside tag we also have a header and that's for the header of a website things that could be on every page it could be the title the logo the navigation etc and we also have a footer and that's basically the footer speaks for itself you could have contact information in it or a copyright notice that kind of thing there's also more which I will show you as well but let's dive into the code now and start practicing with some of these tanks so them my friends for the rest of this video what I'd like to do now is flesh out of the HTML for that mini project I showed you right back in the first video of this series for the mario club web page so to do this I'm going to be using a mix of html5 semantic elements which we've just talked about and also some other tags that we've seen in the past as well so before I start you're going to notice that I've got this indexed or HTML file a very blank at the minute I've just got a head up here and that links to a style sheet which is over here and there's nothing in there at the minute so a blank style sheet then we have a title which says Mario club then a body as well now also I'm going to be using several different images in this project as well now I've already added those over here on the left and I did that by going to new folder and calling it IMG for image and then just drop it in the images that I wanted now I'm going to supply all of these images for you and you can find them on my github repository so I'm gonna leave the link to that down below it's gonna show this page and you can either clone or download so download the whole zip file for the entire project which includes the image folder the finished index file and the finished styles or you could just go into the image folder and each one of these files and right-click and save us if you prefer to do that so the images now let's crack on with the HTML for this project so then the first thing I'm gonna do inside the body is a header tag remember this was one of those html5 semantic elements we just talked about and the header is meant to contain things like the navigation or the site title those kind of things so inside the header all I'm going to do is an h1 and this is going to be the site title and it's going to be called Mario Club okay so that's the header all done very complex now next I'm going to do a section tag and this section is going to be for the bama so what I'm going to do also is give this a class of banner because we'll use that class later on to style this in the CSS now inside that what I'm going to do is first of all an image and the source is going to be the banner so it's inside the image folder then it's banner dot PNG so I'll say image for the image folder and then banner dot PNG the alt is just gonna be something like Mario club welcome banner okay so after the image I also want a little div tag and this div is going to basically be a little welcome message on the banner itself so what I'll do is again give this a class and that is going to be equal to welcome because again we'll use this class as a hook later on when we want to style it from the style.css so inside the div I'm just going to do an h2 and that is going to say welcome to and then I'm going to do a br tag because I want to go to the next line and I'm going to do a span tag as well because we're going to hook into this and sterols this word inside this span tag differently later on and it's going to be Mario Club okay so now we have this section done that is going to be the top banner and inside that we just have an image and then a little section this div right here for the welcome message and that's going to sit on top of the image later on so all of that is inside this section so we're using our semantic tags quite well so far okay so the next bit is going to be a little navigation that lives under the banner so to do that again I'm going to use an html5 semantic tag we've not seen this one yet but it's called enough and I'm also going to give this a class because I might want to use this class later on from the CSS and that is going to be main - nav and we can have hyphens in classes by the way that's absolutely fine and inside this nav I'm going to do a ul and I'm going to do a series of list items so each list item is going to contain a link basically and this is a common thing that I do when I'm creating navigations I often put them inside Li tags so I'm going to do the first one and inside there an anchor tag it doesn't matter where it's going to go at the minute because we're not going to create all of these pages so I'll just say join to HTML and then the link text is going to be something like join the club now again I'm gonna give this a class because I'm gonna style this link differently from the rest and I'll need this class later on to do that okay so the next Li tag inside is also going to have an a tag the href this time is going to be forward slash news dot HTML and then inside will have the text be latest news and then down below we'll do another Li tag another anchor tag the href can be forward slash games HTML and then inside the text can be new games alright and then final it one more and inside that will do another anchor tag forward slash contact dot HTML and then inside that will just say contact okay so now we've created our navigation and that again is inside an html5 semantic elements now intended for this kind of thing now the browser knows that this is a navigation now what I'm gonna do is preview this in the browser so I'm going to right click and open with live server just so we can see what it looks like so far a complete mess but there we go that's the HTML not the CSS yet so hopefully later on it will start a little better but anyway let's carry on now with this template so after the nav we're gonna have the main section of the website the content of the homepage so remember I said we could use the main tag to do that that's going to be the main content on this web page unique to this web page now inside this main tag first of all I'm going to have a little article at the top about the website so that sounds like a good opportunity to do an article tag so inside the article we'll do a title first of all h2 and then I'll say there it's a me Mario all right hey and then underneath that I'm gonna do a paragraph tag and inside this paragraph tag just a load of lorem ipsum so let me do that a couple of times lorem again and I'll do it one more time lorem like so okay so we've got some dummy text now at the top inside this article tag then after the article I'm going to show a couple of different images again I'm going to put these in a ul and some Li tax so each image is going to be in an li tag and typically again when I'm showing a list of stuff I typically put them inside Li tags it doesn't have to be a logical list like a shopping list if you want to use a light axe it can just be a list of images or a list of icons or you know even things like this a list of links so I'm gonna place the first image inside here and in fact what I'll do is give this URL a class equal to images again so we can hook into this later and create a selector so we can target this so inside this first one we'll do an image tag and the sauce remember is got to go to one of these so it's inside the image folder forward slash thumb - 1 dot PNG okay the ult's can just be something like Mario Thor 1 very descriptive okay so the next one inside an li tag again is going to be another image and this time the source is going to be image /it salt - 2 dot PNG the alt can be mario thumb - maybe when you're creating actual websites then you give more descriptive names I can't think of anything off the top of my head so that's why I'm doing these lame ones anyway now we have these two images I'm going to save and see if these look okay so far no they don't but again will this look better later on okay so after those images what do we want then well that's going to be after the main content because it's going to start to be the footer now and the first thing I want is a little section just above the footer which is going to be a farm for a user to join the mailing list so I'll doing a new section for this and this is going to have a class of join so later on I can target this section with a selector looking for the class of join and then I can style this differently so we'll do an h2 inside and we'll say join today exclamation mark and then we'll do a paragraph tag we'll just do some lorem ipsum in there we don't need all of that so let's just delete a bit of it just go back to the ID and then after that we need to do our form so let's do that form tag we don't need the action because we're not going to be sending this to a server this is just the front end we're doing it the minute the HTML and the CSS but inside the form we need an input field for the user's email so we'll say input and then the type is going to be email now I'm also going to give this a name property or attribute rather and that is going to be email and I'm also going to give this a place holder so we user knows what to type in and that is going to be type email and hit enter to join basically okay and we're also going to have this as a required field now we don't always need a submit button in a form if you have the forming focus and you've typed something in and you press Enter that also submits the form so I'm not going to put a button inside this form I'm just going to leave it as that okay so after the form I want one more thing after this section and that is going to be the footer and inside the footer we're going to do some kind of copyright notice so a paragraph tag and then we're going to say inside here the class is equal to copyright just in case again we want to target this later from the CSS and we'll say copyright c well one nine mario club okay so hopefully that's not all gone overhead and you've seen how I've kind of structured this webpage with a mixture of html5 semantic elements and also some of the elements we've seen previously we have used a div tag we have used UL and 82 a P etc okay so let me save that now and take a look in the browser this is probably still going to look absolutely hideous right now if you came across this website on the internet then you would leave as soon as you possibly could because it looks so rubbish but this is just the start we've not done any CSS at the minute but it is starting to take a bit of shape at least we've got all the content on the page and we're going to be adding CSS to this as we move on through the next few videos

Channel: The Net Ninja

Views: 100,732

Keywords: html, css, html tutorial, css tutorial, html and css, html crash course, css crash course, crash course, tutorial, html for beginners, css for beginners, web development for beginners, web dev for beginners, web dev tutorial, html & css crash course, html semantics, semantics, semantic tags, html 5 tags, html 5 semantic tags, html 5, html5 tags, html5, html 5 tutorial, html5 tutorial, section, article, aside, nav, header

Id: kGW8Al_cga4

Length: 14min 13sec (853 seconds)

Published: Fri Jul 19 2019