what's happening everybody this is Hayden Adams with a designer who codes in this video we're talking all about HTML and SEO just for clarification for SEO the only place I go for SEO information is Google this site I'm working off right here is developers.google.com and it's the SEO starter guide I'm going to follow this protocol for this example and I'm also going to use something else I'm going to also take a queue from the WC3 which is the worldwide Web Consortium which develops the standards on accessibility which also Google follows just so you know there's no mystery in these two sites I'm going to put links in description below to both the w3c and also the SEO starter guide so you can see where this information comes from I don't ever pull data from anywhere else except for Google if it's SEO and it's Google it's going to be right from Google's mouth and with that let's get started all right so I have one really blank HTML doc doent there is nothing at my sleeve there is nothing to be had we're starting all from scratch in this HTML guide to start out with HTML 5 what I have to do is declare this in HTML document I'm going to say equal sign doc type HTML now I'm using vs code so if I hit that little less than symbol exclamation point it knows I'm going to put a doc type right at the very top there is no closing tag to this one this is just a declaration to let the browsers know we have an HTML 5 document now for the real magic we're going to put the HTML tags in here and they open and close from the very top to the very be very begning the very bottom in here is where all the magic is going to happen now in the HTML there's three main sections to watch for there's the head we're going to type in head and all the head information is is the information above this white space in this browser so whatever shows up at the very top or is kind of behind the scenes I think about the head section as more when you go to a movie theater or really like a play and everyone behind the stage is where the head is at and then after the head is the body and inside the body is where all the actual magic comes alive on the stage so inside the head we're going to need a couple things we'll start from the top and work our way down I said three but there's two we're going to add some more stuff in the body later on what I'm going to do is inside the head I'm going to say meta I'm going to add a Char set this E I can't talk all of a sudden this is the character set on which I'm going to base my information I'm going to say utf8 in here and this is going to then say okay we're all set to go here and this just says the characters I'm going to use are english-based in this area if you are wording a different language then you do want to change this the next part which happens to work with responsiveness is going to be the meta name it's going to equal to the viewport oops let's go back inside those quotes the viewport takes into consideration we go to the mobile environment how does our site change from desktop to tablet to mobile and this is HTML so I'm not focusing on the design parameters for this example I'm just focusing on the basics of HTML to get us where we need to go in this case The Meta name viewport I'm going to say content is going to equal width equals device-width comma initial scale equals one this will make sure our site stays the same size no matter what size we are in our browser I'm also going to close this so I don't mess it up again nothing's going to be seen yet cuz I haven't put any information yet on this page so if I hit the save button I refresh this page you can tell nothing's there yet so this is just more of a declaration to tell the browser hey we're ready set to go for a mobile design we've set the characters we need to do right here and now for the actual real meat and potatoes of the head section in here I'm going to say title now the title's really important and this is also to take a look at for SEO purposes is that we want to put something descriptive descriptive in here don't just say something like Untitled that doesn't describe the page and notice now when we save this title that the word Untitled goes up there so let's call this one since we're doing an SEO and HTML guide let's call this the SEO and HTML guide this will really help SEO because you're describing what's going to be on the page before you see it this helps Google reference your site when it comes to the Google search results the next part after the title we want to focus on is the meta description we're going to say meta description and in here Oops I did that wrong meta name equals something didn't come up right I was like that's interesting come on quotes meta name description there we go that's better didn't pop up my vs code so I was like something's not right The Meta name just like the meta name here is the description of the page now again like the title and the SEO and HTML guide we have to write something in terms of description so we're going to say content is going to equal in this case I wrote this guy takes you o wow typing today today this guide takes you through the basics of how to structure your HTML so it helps with your SEO and I will also make a note to say about 160 characters here and we'll save and again we don't see it in terms of on the page but if I were to inspect this page come on inspect where are you there we go if I go into the head section where it says head and I come down we have our title SE and HTML guide and we have our meta name description this guide takes you through the basics of how to structure your HTML so it helps with your SEO about 160 don't stress because I don't really worry too much if it's a little over or a little bit under but Google will truncate that information if it goes too far so just be aware it's like a just a basic description of what's on your page and oops I forgot to close this metan name so I'm just going to go over here drop it in refresh the page and now head and it looks all crystal clear again there are other meta descriptions to put in but amongst everything out there these are the two most Mission critical you want the title SEO HTML guide and The Meta name description these are the two areas that Google looks for above and beyond inside the head section now let's move on to the body inside the body is where all of the stuff is going to show up inside of your web project so in this case in that body if I say hello world there we go hello world is now inside of our web browser not at the very top now I don't like to leave hello world by itself we're going to take it out and if we think about the the sections woo of the body I'm having too many good times in VSS code at the very top what you should have is a nav section now the nav if we type it in is where your navigation goes I'm going to comment that if using vs code on the Mac it's command slash and it just makes a note to where it is inside the nav what we should have is a ul and An Li and this is a list of navigation navigation buttons drop it in here now we see it looks like this because we have a bullet point and just HTML again I'm not thinking anything about the design this is pure just HTML for this project Now to create a link for this button what I have to do is let me take it out I'm going to say less than sin a h and for SEO you want to name where you're going in the same idea so let's say I want to create an about page in this case I'm going to say about that HTML close my a tag it's an opening and closing tag just like the body nav UL Li a and I'm going to say about now if I had an actual about page I don't have one right here this would head to the about section also if you have sub Pages you want to name those sub folders as well so if I had another item in this list I'm going to say a tag and I'll say atref in this case I might want to say board of directors and in this case I might want to say 2024 board of directors there we go if I wanted to put a new page for the board board of directors what you shouldn't do is name this Doo or something that's like Untitled you want to give your structure of your website descriptions just like you have your title and your description as well at the top so I'll go back to 2024 there we go and again if I had these pages on the website I could click on board of directors and go to that page don't just name your web page something something 2245 HTML this doesn't give any description to what's going to be on that page so think about as you name your pages focusing on the name should coincide with the file name which could coincide eventually on that page to the SEO The Meta name description let me bring this one right back and this is more for the w3c that focuses on the nav and the list to help accessibility in your web page accessibility is now part of SEO because Google wants your site to be the most accessible for anyone and everyone to access it so once we pass the nav section at the very top again I keep saying this but I'm going to become a broken record for a few more minutes don't focus on the design because at the end of the day we'll say HTML is not a design language HTML stands for markup language I'm just denoting where things go and then the CSS can pick it up and make it look extra fancy so let's just take this out for right now after the nav an optional area you can have is the header section so the header section is the content below the nav but above the next section called the main so it's up to you if you want to have this I always say this section is always optional some projects I work on will have the header section some will not have a header section just all depends how you have your design but the header is an optional piece but the nav is not an optional piece just put a little space in between here after the header we now have more of the important content which is the main the main describes the main content of your site and inside the main you're going to want to have an H1 the H1 this case we're going to name it SEO and HTML guide for 2024 all right looking beautiful and boring again don't care about the design doesn't bother me I'm just thinking about how does it structure inside the HTML your title and description the very top should match the H1 the H1 is like a book title and I tell about a book title because let's put a little note here there should only be one H1 tag there we go now you shouldn't have multiple because this is going to be the foundation to your page so if we think about a book metaphor the book has a title to it but it has a lot of chapters chapter 1 chapter 2 chapter 3 in this case the H1 is the Paramount tag the H2 is a sub header of the H1 so if we drop it in here this is my subheader you can have multiple H2S but it's a good idea to only have one H1 so we'll say you can have multiple H2S that's okay there we go and oh I put a put a comment on there so you wouldn't see it yep there it is and there it is so again you can have multiple H2S because you're going to describe the content you might have multiple subsections as long as everything fits in there when it comes to right below the H1 and the H2 what you should not do for an SEO guide is you should not go H1 H2 H5 and I would say where did the H3 and the H4 go that's because if you think about it I've said this 35 times and I'm going to become a broken record for one more second HTML is not a design language so I don't care how this type looks especially it's just boring old type I'm focusing on the structure and the semantics of how the content is structured so if you think about it it should go H1 H2 H3 I shouldn't jump over the H3 and four to get to the H5 I should really have an H3 here and of course then this becomes a subheader of a subheader of a headline there we go now we have the H1 the H2 and the H3 this is just more for semantic markups to go in order if you need to get down that far I almost never use h4s h5s and the H6 is like this weird technically hangs around but I've never got to the H6 if you can accomplish that you are cooler than I am you can have multiple H2S but you can't have multiple in terms of H1s but you can have all the h4s and h5s that your heart can contend with again this is the HTML and the SEO guide and you should have a semantic markup regarding 1 2 and three going down below you'll also have paragraph tags and this is a paragraph try not to mix up your paragraphs and your headlines for design when I think about if you're thinking about laying on a book is it a headline is it a paragraph if it feels like a paragraph it should be a P tag if it's a header it should be an H tag and again you can use multiple H2S and you design different H2S in different sections but again focusing on the hierarchical pieces first design second let your HTML dictate how your CSS goes and also down below if it's not a paragraph is it a list and just like above you'll want to use a list with the UL or the O this is really important so if I have an unordered list I want to make sure I use the UL around my li unordered list bullet points there we go so I have this one I should probably add more than one just to make sure it looks like an order list and then if I want also an ordered list or one two three step one two 3 what I should have is an O Li step one becomes step one and then the next li becomes step two this is really important because the better your structure of your HTML the easier it's going to be to building your CSS and we can build in a whole bunch more of this but this is getting back to the SEO Port of things Google wants structure they want things that are easily readable so it knows that this is a headline or headlines this is a paragraph This is an unordered list and this is an ordered list this is really easy for Google to understand and to parse out for your searchability on your actual website if we come down below we're now going to add a picture and a footer down below for an extra bit of accessibility remember why I said there's three sections to your web page well yes there is the head and there is the body inside the body I almost treat this last section as something unto itself and that's inside the actual body but not inside the main we're going to add a footer so I'm going to say footer it's like my grounding project and if you think about it we have head at the top like the head of your body we have the actual body so that's not the best metaphor but at the bottom of your feet you got a footer you got the ending of the page this is where it kind of stops at the very bottom and it tells the browser that this is not the most important it is still important but to note something different of delineation hence why we have the word footer we're going to add a picture here and this applies to anywhere on your site only reason why I put the footer is I want to put a social media icon let's bring this over here and we have our Facebook icon right at the very top that I want to bring in facebook.svg I'll put this as part of my source code on this project and we want to link up this Facebook picture now you can link up any picture but I'm going to double it up to my social media icon for the very bottom of the page in the footer to link up a picture I'm going to say image and then I'm going to say Source I used to call it cir until my students hated me saying that so I gave it up and just said Source in here I'll say images so I'll say slash images and Facebook now inside the image tag it's really important to name the actual picture of what you're bringing in so I'm going to hit the return key just to drop this down a little bit now image tags or self didn't really quite work for the indentation since it's so close anyways I digress image tags are self-closing so I have to put a slash and then a closing tag within itself to close this image tag now if I save it it does show up here we have our Facebook icon right here the problem is that we're missing one key part of accessibility remember how I went back to that as part of SEO and that's to describe this picture now in this case alt I'm going to say Facebook icon to describe what this picture is if you had a photograph of an ocean or a forest please describe it as if someone who had Vision impairment could roll their Mouse over and hear more about what it is accessibility takes into all considerations of different disabilities to understand what the picture is if site is a factor of not seeing it so we have the picture IMG we have the source and the alt this is step one now let's say I want to be able to click on this actual Facebook icon and go to my Facebook page inside the footer any link inside of here what I want to do is I'm going to say a href and this case I'm going to say https colf facebook.com now if I open and close it by closing this a tag it gives me the closing a tag I'm going to bring this picture inside of here and drop it in and indentations did not work out the right way there we go so now if I save this if I roll my mouse over it you can see it turns to a hand I can click on it there's one big problem according to Facebook it doesn't really know what's there the alt describes the picture but it doesn't describe where the link is going again it is going to Facebook but it really should describe what is going to wear on Facebook is it going to your fan page a group page uh whatever it's going to it should describe something there's something missing in here because if you think about it what it should say is like my favorite dogs fan page what it should do is something like that now of course we don't want it to show up on the web page because that just doesn't look good I just want the Facebook icon so we have to use what's called an ARA label an ARA label describes the a tag as to where it's going so I'm going to take out my favorite dogs fan page for a second and inside the a tag I'm going to give a little more spacing so we can work with this drop it down just drop it down right here and I'm going to say ARA label and inside here I will say my dog spots fan page on Facebook now that description tells the reader or the user of this site where this Facebook page is going because all we have is a picture so while the alt describes the picture the ARA label describes the link of the a tag and this is really helpful because Google will then help index your page and the more helpful you can make your links again just like above the better your SEO is going to be so if you have something the very top for example so if I come right down here and I say paragraph tag and I say read more the word read more doesn't describe what you're reading so what you should do is if you do have like a Blog I might want to say a hre and I used this link before so I'm just going to copy and paste it for time sake like a cooking show let's say I've got a Blog and I've got next year have a fried chicken wet recipe I built which I don't really cook very well so that would not be the best recipe so do not follow me for cooking eye advice but if we said read more right here the word read more doesn't really describe the actual information to this blog page so what I want to want to do is I'm going to just copy and paste this long description in here drop it in indent a little extra spacing is what I would do is in this ARA label I would say read more about how to cook fried chicken in an air fryer and I'll put a just for fun woohoo exclamation point this now describes to the browser what's going to be on this read more and this will also help Google identify what's on this page making it more SEO friendly so the structure is really important to help the semantics go forward on your site and again I don't care about the design I just care that that read more has descriptions the Facebook page has descriptions both as a picture and as a link and these areas are all important to take consideration when you think about SEO building for 2024 and Beyond