5 important HTML concepts for beginners

are you just starting to learn web development and you'd like to know what the most important concepts and things to understand with html are well that's what we're going to be diving into in this video including a few html concepts that even experience devs get wrong hello there my friend and friends and welcome back to the channel i'm so glad that you've come to join me once again and if you're new here my name is kevin and here at my channel i help you learn how to make the web and how to make it look good with weekly tips tricks and tutorials normally i'm talking about the wonderful world that is css but today we're shifting gears and looking at html because as simple as html is especially at first glance there is a little bit more going on with it and in certain ways it can actually get a little bit more complex than you might have imagined so the very very first thing is just that html is effectively our content that is on the page we're replacing our content there on the page and this is sort of like if you were to make a new word document or a google doc and you're typing content onto there but there's a big difference in that when we're doing it in google docs we have like our settings where you can choose in there that it's a heading and you can play with your font sizes and do other things with it and you can sort of organize your content in different ways when we're writing html we have to be doing that and telling the browser what each individual thing is so when you have the main heading for your page do open h1 put in your title close h1 and now the browser knows that that element is your primary heading for your page because we should only have one h1 per page and we do that for paragraphs we have that for links and a whole bunch of other stuff but one big difference between when we're doing say a word or google doc document and when we're making an html page is there's also hidden content on our websites as well so that's where we have the head versus our body and the head of our document this is more like the metadata of our page and if you've ever taken a photograph whether it's on your phone or on your digital camera you can always get the metadata for those images it tells you the location the image was taken the date it was taken the iso and all those other things that are related to photography it saves all of that information now when you look at the picture you don't see any of that information just like all the information that is in the head are things that we don't see actively on the page but it's extra information in there and that extra information can be used by search engines to know more about your page it can be used for when you're sharing things on social networks about what you know that preview image and the different things that are coming there you can include your title of your page the author of your page there's a whole bunch of extra information that we can include in there you're also linking to your css files and a whole bunch of other stuff now a lot of those tags are actually meta tags but we have the other ones too and they're all they're all hidden away in the head we don't actively see them so i just like to think of that whole area as sort of a metadata area for our site and then the body of our site that's the content that users actually see on the page now the next part that i want to talk about is continuing to talk about our tags and this is the place where even season devs start getting things a little bit wrong sometimes and that's when we enter into the world of semantic html so if you're looking up and creating websites today and learning about it you're for sure going to see the word semantic html come up a lot and what it means is tags that have meaning behind them and we've long had semantic tags but when html5 came around they gave us a whole heck of a lot more than we used to have and while i don't want to go through the entire list of everything right now because there's a long list of semantic html tags that we can use it is important and i think a good starting point to usually start by using your semantic tags first and then go into the non-semantic ones which i'll talk about in a second now when we're talking about semantic tags there's actually sort of two categories of semantic tags we have the ones we've always had which are our content tags like h1 h2 h3 those are all they have meaning our heading 1 or heading 2 are heading 3. we have our a tag our anchor tag to create links that has meaning to it this is an anchor it's anchoring us to somewhere else another location on the web or we have images we're saying this is an image and then the browser has to find the image and place it there and these are all semantic html tags and those are the easy ones because they relate to content and we're placing content on our page so we usually know is it a heading is it a paragraph so i will talk a little bit more about the headings in just a second but then we have the content version of those which are the new ones that came with html5 and this is things like your header your section your article your nav your footer all of these different things and what i would suggest when you are creating there when you are writing the html for your page is to always start with your semantic html tags first and then when you're really not sure that's when you can fall back to the ones that have no meaning or the one i should say that has no meaning which is your div and a div is shorts for division but we really just use that to organize content to style it with css so if we need say three columns or something we might use divs just so we actually can split our content up into three pieces and the very simplest way to look at it is you have a header usually at the top of your document often has the logo your navigation your header could also include other things like the title of your page your h1 and a few other things if you wanted to and you can actually use headers in multiple locations but for now don't worry too much about that if you're just learning html keep it very simple have a primary header for your page then every single page you do should have a main on it and this is the main content so this is the real it's real meet in the payouts all the main content of whatever you're doing should be there and one very important rule is you can only have one main per page because how could you have two main pieces of content right so that's one where it's this is my main content almost everything on your page will probably be in your main and then at the very end you can have your footer as well and a footer is just like the footer of your page a little bit of extra information some extra context there's often another navigation in there if it's a really long page or something that has a lot of different pages to it and i would really start with focusing on those your header your main your footer and then we also have a section and an article and with section and article those are ones that are often confused with one another and it's when should i know which one to pick so i will actually include a link down below to a little bit more information on how to choose between the two of them but basically a section would be a section of content like a section of a bigger piece of content whereas an article is something that should be able to stand on its own so you'd yo you could take that article something that you put in an article tag and take it out of that page and just read that thing by itself and it doesn't matter that it's out of context of the rest of the page whereas if you took a section of content out usually a section of content would rely on like other things around it to give that a little bit more context and you could always include sections within an article as well and that one really good thing you can do if you're not too sure is to ask questions and ask other people which semantic tag you should be using in what situation or look things up i'll include some more links down below that can help you out with that and if you just want a list of tags to remember early on with short descriptions of all of those i've included a link also to a cheat sheet i have which are the only html tags you need to know for now because again there are a lot of other tags out there but there are these ones that i'm mentioning now that are very useful early on to get you started that you should know and then as i said once you're sort of used to using these semantic tags and you're starting to bring in some css and style things up that's where the divs come in you've put all your semantic tags you've organized your page correctly but now you need to do a little bit more you need two columns or you need to sort of separate some content in different ways and so matt there's no semantic tag that you can think of working or you're sitting there going i i you know i'm not sure if i'm using the right semantic tag in this situation or not you're probably uh better off in those situations using a div instead of choosing the wrong tag so if you're really not sure throw in div for now and then as you progress in your journey and you're still learning more maybe the next time you do it you go actually i should have used this tag so then the next time around you could use something else but when all else fails just use a div and don't you know don't use a section when you're really not sure and maybe it should be something else just throw a div in there and it will do the job but really think of divs as i've got my content on the page and now i'm just trying to organize my content in specific ways to make it easier to style with my css now as far as the thing that seasoned people get wrong a lot of the time it's how our heading tags work which is our h1 h2h3 and all of that and what they actually do is they create a document outline or i like to give the comparison to a table of contents where the h1 is sort of the main title that you're going to have for your page which is different from the title element which is in our head that we talked about before the h1 is sort of like the it's the one we see it's the main heading for our entire page then we have h2h3h4h5 h6 and we have to stop at h6 there's no h7 in all of those and these create the document outline we have the main title and then the h2 is sort of like the chapters that fall underneath that h1 and then an h3 would be a subsection two and h2 that's above it and so it's really important to understand that we actually create a structure to our document through our heading levels and if you'd like more information on that i've talked specifically about it in another video so that is linked down below there should be a card popping up and i'll remind you about it at the end if you want to finish this one first and the very last thing that i want to talk about are attributes and there's a whole bunch of attributes that are out there and it can even seem a little bit overwhelming at one point with all the different types of attributes you might run into and the one that you're definitely going to see the most out of anything are classes and there's also ids and i find very early on when you're learning about html and css you see a lot about classes and ids the way i see it though is classes are used for styling things i use a class if i need to connect it into my css or make that link between that element and my css file and sometimes i'll have multiple classes on something to add different styling to it ids i don't use for styling if i can avoid it instead i see ids as a way to link different elements together we can use ids to create links that will go to different sections of this individual page so if you click that it will actually bring you within that single page to that location you can also use ids to link form elements together so you have a label that can connect to the input and other things like that so when you're making these connections to me that's where the idea is useful whereas for styling i like to stick to classes only now outside of class and id there are also a lot of other what we call global attributes and when we say global attributes it just means that these attributes can be used on any html element class and id are two global attributes and a few other ones that you might see come up are things like content editable hidden there's lang for language and there's a handful of other ones as well you probably won't be using a lot of the global attributes other than class or id or one other one that i do want to mention which are data attributes and data attributes are custom attributes that you can sort of create on your own it always starts with the word data and it's me data hyphen and then whatever you want it to be and you can create your own attributes that way and i'm mentioning it now because while i think that early on in your journey you probably won't even be worried about it if you're looking at other sites and looking at other things that are created on the web to study a little bit or learn how things are done you might see them come up and be wondering what they are most of the time almost all the time they're there to add some javascript functionality because we can use our javascript to manipulate those attributes very easily so usually when you see a data attribute it means there's some sort of javascript that's going on somewhere doing something and creating some sort of interactive thing with that though there are other use cases for them as well and you'll probably see them a lot more as you progress through your front end journey now there are a lot of other attributes that are very specific to different elements such as our form elements where there's just tons of different attributes and those different attributes really depend on the different form elements that you're using the most common one you'll see is the input tons of types of input so we have to do an input and then we use our type attribute to say what type of input that is is it a text field an email field a password field and a whole bunch of other stuff and that's used for the browser can validate things to make sure it is that type or it can even change how that item actually works there's like date time there's color pickers all of those things on just one element but by changing the attribute on there we're actually getting very different inputs that the user can interact with other examples of things that have custom attributes that you'll see a lot are images so with an image you have an src attribute and that is not only specialized images but it's one of the places you can use it it's not a global attribute that can be used anywhere so that's where you're giving a source for your image so you can actually link it or our links where we have an href attribute to say where that link should go we're creating that link or the anchor between that link that we're creating and wherever we want it to go when we click on it and the last thing that you'll probably see at one point or another are also area attributes and roles and these are related to accessibility and this is before when i was talking about using the right semantic html that also falls under the umbrella of accessibility where we want to make our sites as accessible as possible and area attributes and roles are different ways that we can do that what i don't want to do in this video is dive too deep into that because it can actually seem very overwhelming when you first get in there because you're going to see there's a lot to it but if we use the right semantic html a lot of the stuff that potentially aria could do or roles could do it's handled by that semantic html so that makes our life a lot easier because by using the right semantic html we don't have to worry about that side as much we're already making our website accessible but as you're going through your journey and you're seeing things come up with area and you're not sure what they are what i'd really encourage you at this stage is look up what that area attribute is or what that area attribute is doing it's one of those things that slowly over time it would be something that you're continuing to add to your sites and add to the different things you're doing as you learn a little bit more about it don't try and learn all of it at once just like learning everything with html at once could be very overwhelming or all of css are all of javascript we want to take baby steps it's the same with when you're learning accessibility you want to take baby steps with it so you don't feel overwhelmed by it and if you're learning everything at once it can also seem very overwhelming so my suggestion there would really be make sure you're using the proper semantic html and then if you come across tutorials that are talking a little bit about accessibility that's a great chance and a great opportunity to dig a little bit deeper and to really understand what's happening there so if you got through all this i am definitely assuming you're early on in your journey so i want to wish you good luck with your journey have a lot of fun with it web development is a blast and as a quick reminder i promised you that i'd mention it again there is the video where i dive into the heading levels and how they create the document structure in a lot more detail so that video for you is right here for your viewing pleasure and link down in the description as well and with that i want to give a very big thank you to adam johnny stewart tim and randy for being my supporters of awesome over on patreon as well as all my other patrons for their monthly support and of course until next time don't forget to make your corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 15,780

Keywords: Kevin Powell, css, front-end, frontend, html, tutorial, html for beginners, learn html, web development, html5 tutorial for beginners, introduction to html, html tags, html concepts, important html concepts, getting started with html, learning html

Id: HJ0-fUJ-2F0

Length: 14min 37sec (877 seconds)

Published: Thu Dec 16 2021