The most common HTML mistake that I see

imagine that you bought a textbook for a class that you've just enrolled in and you open up that textbook and there's no table of contents and oh okay that's a little bit frustrating but you're sure you can make do maybe they misprinted or something but then you open up the book and the entire 1200 pages are all a size 12 font page after page of content with an image thrown in here every now and then for fun but there's just no structure to any of the information there but i mean all the information is there right so why would that be so frustrating well we like books to have structure to them so we can actually find the information we're looking for tables of contents allow us to find what we're looking for really quickly and easily and understand what the content is related to and then like large headings bold text colored boxes all these things that like sort of call different things out give different things attention they also help us visually organize the content so we can quickly skim through things or we can easily identify what we're actually looking at it makes it easier to consume and that's why semantic html is so important and it's what we're going to be diving into in this video hi there my friend and friends and welcome back to the channel if you're new here my name is kevin and here at my channel i hope you fall madly deeply in love with css and if not in love with it at least to hate it a little bit less though today we're taking a little bit of a break from css though we will touch on it a little bit and we're mostly going to be focusing on the wonderful and under-appreciated world that is html and more specifically semantic html we're going to explore why it's important and also some easy solutions to making sure that you're following the right path when using it so things look a little weird here we have three screens instead of one i'm in the polypain browser rather than chrome or firefox even though there are accessibility checks in those i will be using polypain for this one because it gives us a lot of accessibility tools including a really easy way to break down semantic html and the outline and everything so it's going to make our life a little bit easier but we don't need three of these so let me just close off uh this one and this one so we just are left with this one window right here and what i'm going to do is i'm going to go over to here which are the dev tools and we get our regular dev tools just like you know and love but the nice thing with poly pain is we can i'm just going to shrink this down a smidgen there we go um the nice thing with polypain is if i go over to this info here i get into this area uh which i can get meta information actually which is really cool but we're not going to worry about that i'm just going to the outline and i get different options here i can look for images links landmarks and we're going to go through some of these or quite a lot most of these in this this video and we're going to start with this the document outline which shows me the outline of my document and think of the document outline a little bit like the table of contents with a little bit of extra information in here so you can see that we have the body itself and it says untitled body we don't have to worry too much there we have an aside and a nav so we have those two right there and then we have an h1 and the reason that these are all saying they're untitled is just because the h1 is coming after those um so we'll come back to that in a sec i'm going to open up the dev tools and we can explore why these are untitled but then you can see here i have an h1 and then we have my the title of my page so this is really like a table of contents i have my title then we're getting an h2 here which is my table of contents itself which um actually isn't visible on the screen we'll talk about that a little bit as well um in a second but then i have another h2 and then i have these h3s and notice how like they're this i like this visual representation because the h3s are falling underneath the h2 and this is we're getting the boot campers guide to web accessibility an introduction to web accessibility these are like subsections of this learn the fundamental principles behind accessible design so we have learn the fundamentals let's even go look at it let's find it and i can hover there it brings me there so here's learn the fundamentals and then there's two different articles that i can choose from and there's a little bit of context for what each one is so we have a separate heading for each one of those to say this is what we're talking about here's one piece of information on that here's another there's two subsections of this main of this other section that we're inside of and this is how heading levels are meant to be used they are meant to be used to create a table of contents type of outline for your document they're not meant to style things and let's go over to fifa and i'm just choosing the fifa site because i've known for a while it's had problems their css so i assumed it had problems and it it does so we'll let the page load um and we'll talk about it a little bit let's just shrink that down and i think the fifa sites has been this collimation of tons and tons of developers adding like a little thing here a little thing there and not really looking at the code base too much i'm just needing to work quickly so i'm not blaming anyone on that side of things so we'll go back to info document outline i need to see right now we have an untitled body actually with nothing else that seems a bit weird so let's refresh because sometimes that helps just populate here if you see some a problem um so notice here we have an untitled body again and we have an untitled nav and then we have actually an h6 is up here and then eventually we get to my h1s over here um and so the title is down here and then we have an h1 and then in h5 which is okay my h5 is acting as a subsection over here um and then latest news more so like as a table of contents you can probably start seeing some issues coming up here um or even here we have fifa president moore that's a weird sort of subsection of content and again think of your heading levels as creating a table of contents it's the easiest way to think about it and having a a heading level is more doesn't really give any context or tell us what this section of content should actually be about even though if we go and look at it it sort of does make sense i think because i'm in mobile view there we go there's my more and then we get all these little articles that are popping up in there the interesting thing is all these little articles there's no head even though each one has a heading these aren't actually headings in my document outline because they set them up probably as paragraphs or just within dibs or whatever it is uh then so here we have fifa president then somehow world ranking of men and women is under fifa president which seems a little weird right that to me if i'm looking at this the more i guess makes sense even though fifa president so here we have fifa president and we're going into all articles that are related or talking about the president so maybe even this more title here could have been like more information about the president and then have all of these have a heading level another level lower uh that actually make it fall into the document outline in a smarter way um and i'm actually not sure how this section so this section because of the way the heading were and because they decided to use an h1 here which you shouldn't have multiple h1s we'll talk about that in a second but because of that this h3 here is actually within the document outline the world rankings which is here and should be its own thing is falling within this fifa president section here and that's really really awkward no like to me that that doesn't make any sense uh that the world rankings would be there this should be its own thing and it looks like they tried to do that by putting in a section here but i don't think it quite did what they were expecting it to do it's kind of interesting that they have a section here but they don't have sections anywhere else either um so just to throw that out there oh no there is another one there's there's a few sections there's two sections we have that and the all fifa section um and here i guess it makes a bit more sense we have all fifa and then we have about fifa women's football social impact so like these are things that do make sense to sort of create subcategories around but let's go over from the document outline let's just go to the headings so this takes out like where there's navs or sections or anything and it just shows us all the heading levels and we'll turn on show issues to see that there are quite a few here um some of them are duplicate headers found so it's women's and women's and again if you're looking at this from a document outline women's women's what right the heading there's no there's nothing here that's saying what the women's is for and maybe visually when you see it on the screen it makes a bit more sense but we need to think about things from a semantic point of view and what it's saying regardless of what we see on the screen is it women's ranking is it links to more women's stuff like women's and you know why is there two of them and you can even say duplicate headers found so that's kind of awkward um i don't know what's happening here and it doesn't make any sense i should be able to understand at least the sectioning of content just by looking at the headings another thing that we'll see is that there's a lot of skipped heading levels we have first a ton of h1s which use one h1 per page but then we also have all these skipped headings and this is the same we're thinking a table of contents so when you look at your table of contents you have a section and then you have subsections and then sometimes more and then sometimes more and if you were to all of a sudden like strip away some of those subsections and just have like okay we're going four levels dupe here it doesn't really make sense and it doesn't really work so just something to watch out for um and just to try and always be following your heading levels in a logical way there has been talk at one point of just having an h element and letting the browser figure things out but that obviously hasn't come to be at least not yet and another thing you might read is with the html5 document outline they implemented or they implemented it became part of the spec that you would actually be able to have multiple h1s and the thinking here is you could have a section of content and just throw an h1 in there and the browser would say okay this is a section this section is going to get its own hierarchy within the bigger picture of the hierarchy of the rest of the page which could make it a little bit easier for the developers but none of the browsers actually implemented it and with the browsers not implementing it the system technologies can't use it and so we're stuck with that not actually being a thing even though it was put into the spec at one point nobody has actually implemented it so if you ever see something saying you can use multiple headings we don't want to do that and another thing that they did here was they have an h1 here as a title and then they have an h5 here which to me is a subtitle and why is it in h5 it's because that's the styling that goes with their h5 i'm guessing and that's why they chose it that would be my honest guess here and so we have one month to the arab the fifa arab cup we bring you 31 stats about the competition you shouldn't use a heading level as a subtitle because this would be the same thing as your table of contents when you open up a textbook the subtitles are not these sub-sections right you don't want to create a new subsection of content within that area you want it to be a subtitle to give more context to what the title is and so to do that you shouldn't use a heading level you should just use a paragraph of content and style it differently style it to look like a subtitle and if you want to you can also you have a say a section or an article here let's say you throw in your h2 style it how you need to and then just put a paragraph there and wrap that paragraph and heading within a header so you can have you can have multiple headers on a site it's not just for the navigation logoe area at the top of your page you can use headers within multiple areas so a section can have a header you can also have a header within an article if you want an area within something to be defined as like the head for that and you can have multiple paragraphs in there even if you need to you can go ahead and do something like that and that leads me outside of the headings and to go into landmarks and landmarks are really interesting because you can see here we have my header which is my banner and then we have my nav and we have a main and we have a footer and you might recognize these elements and these are elements that create landmarks within a page and that is things that assistive technologies can use to easily identify different parts of a page and quickly access those different points and you'll notice that they have a side header main nav a side footer nav and look at that we have multiple navigations that's kind of exciting and you don't have to you can just have one navigation on a site that's perfectly fine and not all sets of links that are bringing you to different areas do need to be navigations um but these landmark areas are areas again that you can quickly can be quickly identified by screen readers and assistive technologies to skip through things maybe you want to skip all the way to the main there's other ways of doing that or they want to they know they're on a navigation things like that and it makes people's lives easier when you properly use your landmarks instead of just using divs everywhere so this is a really good reason to be using semantic html as well and you'll notice that we have um this is a complimentary one here we have a table of contents which is listed as a navigation my primary navigation and aside complementary information uh the footer and then another navigation here and what's interesting if we look at this let's go find that i'm going to click on it and it actually brings me here and you'll see that there's an area label of primary because there are multiple navigations if you only have one navigation you really don't have to worry about it but if you do have multiple navigations it's really important that when you're setting those up that you actually identify them so people know what they're getting so here we have a nav which is a secondary nav so area labeled table of contents so by giving it this area label we're identifying what that what that element is and why we have multiple navs in there so it gives a little bit more context so you have your primary navigation then this is a table of contents for other information that's on the page so build the basics conduct our cultivate community and explore so we have like a little table how do i get started and then we have a table of contents so you can get to where you want to go really interestingly here we do have an h2 that's visually hidden so you can see you hide visually i like that class name um and that's on my h2 and the text in there literally is table of contents we saw that when we were looking before and i said i would come back to this and that's because visually i don't need to see table of contents here if i can if i can see the page i can quickly see that these are links and i get an idea of how do i get started build i don't need that table of contents extra information but if a non-sighted user gets here it could be really useful to have something saying you're at a navigation it's a table of contents and that allows them to quickly again we're on a navigation we're in our main then we get to a new navigation so they may go i don't want to bother with this nav i'm going to skip it and they can easily skip down to the content that's going to be coming down after that and then the really important thing is coming up with a logical order for your headings so you're actually creating something that looks like a logical table of contents instead of it just being this mess of things with heading levels and this is an evolution that i've had with my own css where i used to style my h1 h2 my h3 to style them the way those headings should look and then what i started doing was sometimes i needed something i had an h5 that should look like an h3 or i would have a paragraph that i needed to look like a heading and so what i would do is i would have all my i'd have like h1 comma dot h1 so i could choose do i want my if it's an h1 it's going to look like an h1 but if i need to style something like in h1 i had that class available and what i've done more and more now is not actually styled the h1 through h6 in any meaningful way i've done it all through classes now i'm often using utility classes for things like this so i can choose my font size my font weight my text transform all of those independent and mix and match things as i need to but i'm not relying on my heading levels like i'm pretty sure fifa's been doing on their site set up as many classes as you need to be able to easily do these things and rely on styling things with your classes because then it makes a mess of the document outline which we can see here and that mess of a document outline makes it more difficult for assistive technologies screen readers and bots to be able to read your site and understand what's actually going on with everything and i really think that's an easy thing to be able to implement into a site without having to dive too far down the rabbit hole of accessibility it's one of these nice easy wins that you can make and if you'd like more videos on accessibility you want to go into some of the other semantic tags like articles section main all of that you'd like a video dedicated to those leave a comment down below and let me know and if you'd like to know more about polypain because it's not just about accessibility it's about a whole lot more than that i've put a link down below to them it is a paid application though they do have a free trial so you can check it out and they also do offer licenses to students as well so if you're a student you want to check it out they do have options around that as well and once again if you'd like more content on semantic html where we dive away from the document outline and talk more about landmark regions and other things like that leave that comment down below and with that a really big thank you to both stuart and randy who are my supporters of awesome over on patreon as well as all my other patrons for the monthly support and of course until next time don't forget to make your core on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 91,941

Keywords: Kevin Powell, css, front-end, frontend, html, tutorial, accessibility, html heading levels, html headings, html h1, h1, h2, h3, h4, html problems, html semantics, semantic html

Id: NexL5_Vdoq8

Length: 15min 49sec (949 seconds)

Published: Thu Nov 04 2021