What is HTML5 Semantic Markup - Colt's Code Camp

hey everyone its colt hope you're doing well while I'm talking for the first 30 seconds or so here's a video of my cat being an absolute lunatic last night attacking her own tail I never know what to show here while I'm just talking about stuff so I hope you're all doing well staying safe washing your hands all flats this video was originally supposed to be out last Friday I ended up coming down with something fortunately it was mild and I'm pretty pretty much okay at this point I can at least record and not not feel like I'm running out of oxygen which was happening last week so anyway this video is up now tomorrow we're gonna pick up with CSS this is the last of the HTML content we're talking about semantic markup one thing that I do want to mention is that I am going to continue putting these videos out but I am changing things a little bit at least in terms of how I named them I think naming the videos you know colds code camp day 7 or day 20 or whatever might not be the best idea in terms of making the videos have some broad appeal or you know some of these topics like semantic markup might be something that people are interested in who don't need to go through every single video before they get here so I'm not going to number them any more in the video title however I'm putting them all in a numbered playlist you'll be able to see all of the videos in order and go through them the playlist already exists I'll be adding to it you can find it on my channel I'll add in all the videos that are part of this coding camp I do have some video set will not be part of this some more advanced videos just to keep some of my existing subscribers and students slightly less bored hopefully but anything added to the playlist Culp's code camp will be part of this code camp all right here we go so today we're talking about semantic markup there's a bunch of elements they're all super easy to understand there's nothing complex no attributes you need to worry about so this will be relatively quick to cover these elements but they include things like article aside footer header main nav section there are a couple others the overarching theme here is semantic markup semantic semantic markup what does that term mean what does it refer to well just in general the term semantic BAE means relating to meaning our having meaning in some way so when we say semantic markup were referring to HTML markup that has some sort of meaning the actual elements themselves tell you something about the content and that is a relatively novel idea in HTML just a quick tour back in time I've shown this example a couple times space jams web site top of the line back in the day sometime in the 90s the entire thing is made with tables so not only do table elements not tell you anything about what the contents are for example here we've got a TD if you were just looking at this markup we have no idea what this content is it turns out that it's basically a really complex looking nav bar where we have a link and we've got an image in there same thing here but this entire thing is just a table which tells you nothing about what it is and in fact it kind of leads you in the wrong direction if you see a table you expect that there's going to be data tabular data columns and rows something that you would actually put in a table just like if you saw an image tag you would expect there to be an image on the page or if you saw a heading you would expect it to be used as a heading but tables have been used or were used a lot in the past to layout websites because layout was and still kind of is a pain so this approach is not semantic in any way it's really just macgyvering something together to make a layout and it happens that tables were used to achieve that so the next phase of web layout and design involves using lots and lots of divs and just generic containers oh geez you can see my recently viewed items a giraffe head oh goodness gracious no no no I might have to edit that out just for the record here so you don't think I'm completely insane I was not trying to buy a $9,000 giraffe head or a thirty thousand dollar collection of taxidermied african animals I was just doing some research like you do you know you just want to see how much does it cost if you want to buy it how much does a collection of African taxidermy cost you just looked those things up doesn't mean you want to buy them okay so I don't see any comments about how I'm I'm buying giraffe heads I'm not quite at that level where I can throw around $10,000 for a dead animal neck to put on my wall anyway on eBay here if we inspect some of this content you'll see that there isn't there aren't many tables as far as I can tell but there are a million dips div div div div div div div div div div open some of these up let's just pick one something like I don't know this right here this container div div div div div div it's just generic boxes or generic containers all over the place it doesn't tell us anything about what the content is and then if we go one step further a more recent website this is stripes homepage or their landing page I really like this by the way if we take a look at it you'll see that yes there are still divs all over the place that's that's unavoidable in some ways but we have things like a header elements this indicates the header of the page we have a footer down at the bottom that is the footer content inside of the header we actually have a couple different things so we have a nav element a nav indicates links so navigation instead of just a div full of links which is what we would do in the past and then if we look at the main content there's actually an element called main on ebay that would just be a div and inside of may and we've got a header we've got section tags so here's a section of content a section is no different than a div functionally it's just a container that doesn't do anything it's just wrapping content we can style it in some way but it means a little bit more than a div a section means you know a section of content some piece of a larger thing a div is just generic and then within each section we have subsections so let's let's see what do we have here here's a section developers first and then if we scroll down a bit further let's take a look at this and just think about how this could be broken up well most likely there's a section for this entire thing and then a section for always improving in a section for a global scale I I don't know if that's the case but let's see yes so there's a section here and then a section for always improving in a section for global scale so these are just elements that have a little bit more meaning they say a little bit about what is inside of them instead of generic divs we can use things like a section a nav a main header footer aside summary details I think I skipped one to the skip article maybe I did it anyway these are different elements that aren't going to show up is anything they're not going to render any differently but they provide some meaning about the content if we go back to ebay for just a second and I look at these links up top it's a nav bar navigation content but everything is just inside of a div a div with a bunch of links that is just a generic way of storing links or grouping them together it's how it's been done or a lot of websites do it but now that we have a nav element it makes more sense to use that a nav is supposed to indicate navigation content so that is a better use it's clearer it's more semantic or meaningful than a generic div so why does this stuff matter well there's really three main reasons first of all I kind of picked one word to summarize it SEO but really what we're talking about here SEO by the way search engine optimization if you're not familiar but really we're talking about computers or code reading your code whether that is a crawler from Google or Bing or I don't know if somebody is scraping your code or some I don't know Google News is looking for news articles across the web and has some sort of crawler to find news articles whatever it is code is reading your code and if you have more meaningful markup if you are able to easily indicate these are important navigation links this is the main article on this page this is the main content on the page this is a subsection this is the footer this is an aside that sort of stuff makes it much easier for other code to categorize or parse or just understand what your code is imagine some web crawler is coming across each these pages and is looking for all links that are sort of internal links on this web page the links that are important for stripe or ebay links or her spacejam links one option would be just to find every single link and follow them all another option would be to find all the links but pay special attention to the ones that are listed in a nav element they are navigation links they are prioritized because they're sort of the bigger links the stuff up top that might be more significant by using more semantic elements we're able to introduce more meaning to our content and that leads me to point two here accessibility using these semantic elements these newer elements like a nav or footer a header article section main that makes a pretty big difference for people who are using screen readers you're adding meaning to the markup these screen readers are looking at the elements right it's all that they have access to so if your markup is more meaningful it's automatically a or could be a better experience for somebody using a screen reader the screen reader can easily figure out where the nav links are instead of just every link on the page or where the footer is or where the main section or where the article of content starts on a page imagine if you were using a screen reader on a website like this this is kind of an obnoxious website SFGate has local news for me but it has a million ads all over the place I mean really obnoxious ads to these really weird ones down at the bottom I mean it's tempting to click on some of them sometimes but they just they're everywhere it would be nice if you're using a screen reader to have your screen reader easily identify where the main content is where is the actual article of content or different sections rather than having to deal with all of this content all these ads or all of these images and the the buttons that comments the footer the nav bar there's a lot of stuff on this page that is not the actual content that most of us are interested in so by using semantic elements hopefully we can make that a better experience and that's actually something I'm going to demo towards the end here I'm not an expert at using screen readers it's actually I guess it's not surprising but it's pretty complex some of these screen readers so many shortcuts and different keyboard tricks and keys that you need to know in order to make the most of it I am just fumbling around on it but I'll give you a quick demo of the difference and then the third reason to use these elements is for maintainability if we have divs everywhere just div div div div div it can be harder for other developers to read the code or for yourself a couple weeks later to go back and update the footer or the navbar or some section of content but if you instead use semantic elements it's clearer what is what so really we're talking about making your code easier to read for computers or other code that's point one making your code easier to read for screen readers point two and making your code easier to read for other developers that is 0.3 so as I mentioned these elements are relatively new they have not been around since the beginning of HTML we look at some of them we've got section article nav header footer aside there are others as well things like figure data time output main progress I'm just going to go over a couple of them and the first one is nav so a nav element represents a section of a page whose purpose is to provide navigation links so traditionally this would have been done with a div or just some sort of I mean pretty much just a div the generic container but a nav makes a lot more sense and I'm gonna demonstrate how this actually impacts screen readers so over here I've got a relatively long it's not that bad but somewhat complicated HTML page that I kind of cobbled together based off of a Wikipedia article on ocelots so this is what it looks like rendered and it has a nav bar up top these links so there's no styling but if you remove the styling from most nav bars they just look like this whether they're horizontal or they're a collapsible drawer or something it's just a bunch of links in a list so these are links to navigate across Wikipedia then there's a million links in the article then there's a table of contents as you can see there this links within the document and then we've got a footer down here which is just a div as well everything is a div so we've got a div around the navigation links there's a div around the table of contents there's a div around the footer and within the footer we've got some links just navigation links for things like the privacy policy contacting Wikipedia the cookies statement so no html5 semantic elements at this point so if I open up voiceover which is a utility that comes on a Mac with what is it command f5 it should open up voiceover on Safari Ocelot window Ocelot web content has keyboard focus ok so there's a bunch of stuff you can do with the screen reader I know almost none of it but one thing that I can do is open up this page of links where I can quickly navigate all of the links on this page so every single link and they're not categorized by you know position or navbar or footer or anything like that it's just all of the links link main page link link I can scroll through all of them so if I wanted to get to the links at the footer if I wanted to go see the privacy policy or if there was an important link like a sign in or sign out link or something in the nav bar there's not an easy way for me to get there it's kind of a pain link now I'm sure there are shortcuts and things I just know nothing about but what I do know is that when we add in a nav element we'll see a significant difference I'm gonna hit the right and left arrows just to show you a couple different windows or panes of content we've got links headings menu headings no items in weird spots maybe web spots which is empty window spots and we're back to links okay when we add in the nav element and some other elements like a footer we'll see a different window or a different view appear called landmarks which is not there right now so I'm gonna go add in an avert to around my navigation content alrighty so a nav as we've already discussed represents a section of a page whose purpose is to provide navigation links so it doesn't have to be a nav bar it's common to use one and afar but we can use them for table of contents menu footer bars navigation content there so I'm gonna go up here to my nav bar which all zoom in a bit it's just this right there and I'm gonna replace that div with enough just like that and then I'll also do it let's see we've got our table of contents here which is this ul unordered list I'm going to wrap that whole thing in a Navis well and put that down below and then we've got one more situation one more spot these footer links right there so that is right here ul so there I'm going to wrap a nav around that to indicate it's a bunch of links for navigation purposes so I'm going to open up the screenreader again I'll refresh my page and see command f5 I think voice over on safari auto lock window ocelot web content has keyboard focus okay so I'm back to the links menu nothing seems to have changed but will now have a landmarks menu headings menu landmarks and there we go and it has three different navigation landmarks now they're all just labeled as navigation there are ways of specifying that you know this is the header or the main nav bar this is the table of contents navigation this is the footer navigation but already you can see that it provides a lot more meaning and it can call out or we are calling out particular groups of links as navigation element or nav elements navigation so if I open one of these you are currently in a list I'm in the list now and then there are keys that you use I think what is it control option down arrow shift down arrow oh geez link there we go the contents bullet featured content bullet current events bullet random mark bullet donate to work and then if I quickly want to get to the footer elements there we go anyway that's about the extent of anything I can do with this screen reader I am NOT I have no idea what I'm doing that took me longer than I would care to admit to figure out but it does demonstrate that there is a pretty significant difference just by adding in those have elements next up we have a couple other elements that I'll introduce the first one is the header element the header element is another one of those new html5 new ish at least semantic elements it represents introductory content typically a group of introductory or navigational aids it may contain some heading elements but also a logo a search form etc so there are a couple of examples all highlights back here we've got a header on the stripe web page which it's limited basically to this nav bar but then they also have another header nested inside of their main contents this is the header for the main content so main is another element that we haven't really seen yet but it's kind of what it sounds like it's the main content of the page so you can have multiple headers on a page but generally you would nest them inside of other things so the header for this main or the header for the entire page on e-bay if there were to be a header it would be this probably this entire thing here you could even have it include this depending on well I guess I would probably limit it to here but you have a lot of flexibility when you're using these elements basically anything is going to be better than just a bunch of divs unless you're misusing them right you don't want to make a header element represent something that is not actually a header it would be better to just use a generic element like a div in that case and then we also have a footer element which is used to represent a footer so all sorts of content can go in a footer it could be links it could be copyright data it could be some sort of I don't know disclaimer generally at the bottom of the page but you can also have footers within other elements like a footer for the main content or a footer for an article on the page so let's add that into this web page this really lame Wikipedia clone so the header would really just be this navbar here but we would also potentially have other stuff in that header so it's not just a nav it doesn't have to be a nav so I'll put a header here but then I would also probably do I don't know just to make it clear I'll add a button or two says sign-in let's just start with that that would also be probably part of the header you might have a logo an image but whatever the content is we've now isolated or we've called it out as a header right there and then I would make the footer this nav as well as this stuff here but edit dates the licensing agreement or registered trademark all that stuff I would put that as part of the footer so that starts right here they're using a div at least on Wikipedia they were so I'm gonna replace that with a footer we shouldn't see any difference if i refresh it looks identical but now we just have a bit more meaning next up we've got the article element an article does not have to represent a traditional news or I don't know blog article it's really just any self-contained composition so that often is an article a blog post a newspaper article a Wikipedia article but as you can see here in this demo they're using an article elements for this weather sort of widget thing as long as it's a self-contained composition so you can have multiple articles in a single page or a single document you could have a page with multiple blog posts each post would be a self-contained article and then within each article we can have sections so a section is another one of these newer elements it represents a standalone section which basically doesn't have any other more specific element to represent it generally an article is something that can exist on its own a section is part of a larger thing so a section on its own may not make a lot of sense or may not make as much sense so like introduction if that was all that you had it wouldn't be a great article it doesn't make sense as a self-contained piece we would use a section element so back over here I would probably make this entire thing an article excluding the header and the footer all of this would be an article and then we could have subsections so this could be a section here that could be a section and this could be a section this could be a section so I won't do that entire thing right now but we'll just we'll do the first little bit so we'll add an article elements and then we're gonna wrap all of this content inside of it all the way down to the footer so already just adding in that footer makes this a lot easier for me cuz I don't have to look for divs and count the opening and closing div tags I just know there's a footer it has meaning right I know that the footer is where I want to stop at instead of just divs so there's article and then I'll add in a section or two just to show let's do a section here let's do one further down how about right here so this is after that nav section elements and then this section ends right there so there's one section so I would do that for every section in this article so a couple other ones we'll wrap up with there's an aside element it represents a portion of a document whose content is only indirectly related to the main content so those often are call-out boxes sidebars things that are tangentially related but not part of the main content and then we've also got the main element which represents the dominant content of the body so it is the content that is directly related to or expands upon the central topic of a document the central functionality of an application you shouldn't have more than one main element per page unless you have a hidden one and it should be unique the content in a main element should be unique to the document so things that are repeated across other pages like a nav bar a footer a sidebar copyright stuff none of that should be included it should be the core content that is unique to a given document and within a main you might have multiple articles or you might have multiple sections you might have a whole bunch of stuff within them but overall one main element per page so I would probably just come back here if we were to use a main we may not even need an article here but I would probably do this man around that entire article which stops all the way down here put that in there and there we go now our content is more meaningful the mark-up itself we have things like header nav footer article man section all of that means something alrighty so that's it for today semantic markup just make your markup as meaningful as possible you'll still have to use lots of divs and spans and generic elements all the time but when appropriate used semantic elements and tomorrow we are starting off with CSS it's a very fun topic in my opinion so hopefully you're looking forward to that stay safe healthy and sane I'll see you guys tomorrow

Channel: Colt Steele

Views: 19,065

Keywords:

Id: naha1DIHK4E

Length: 25min 8sec (1508 seconds)

Published: Mon Mar 30 2020