HTML & CSS for Absolute Beginners: Nesting HTML elements

Key Takeaways

now before we start learning about new HTML elements I want to talk a little bit about nesting which is a really important topic with how we write our HTML and just how things work within HTML and we already have some nesting going on that we just didn't know about but as an example of nesting first of all I have my HTML element and then this head is inside of my HTML element so we would say that the head is nested inside of the HTML element then I have my title and my title is nested inside of the head right here and with nesting we also highlight this show it through the indentation that's going on right here so you can see I have my HTML then when we're one level nested we have this space that's coming and the head is right there and then we get to the title and we're going another space over to show just visually it makes it a lot easier to see when things are inside of other things and there's a few important things that happen when we are nesting things and to sort of highlight that idea I'm going to come in with a really simple example at the bottom of my page or simple I should say silly example at the bottom of my page here using fake Elements which are if we had a BLT sandwich and so if we were doing a BLT sandwich we'd have our bread and then inside of our bread we have our bacon our lettuce and our tomato with nesting and with what we're doing here the one thing that's important is not only are we nesting our elements so my bacon is inside of my bread but it wouldn't make any sense for my lettuce to be inside of my bacon right so this this doesn't make any sense right now and there are times where we have other elements nested in inside of other elements we're going to have deep nesting but when it comes to our content like we've been doing so far with say our paragraphs and our heading levels we can't start our paragraph here if our H2 isn't closed right so if I were to take my H2 and like say all of my paragraphs here are in my heading just logically that doesn't make very much sense and so we won't Nest something like that so it's really important that we open and close our elements before we bring in the next element that we want and again sometimes we're going to be making boxes around things to organize things so then we want them you know you have a whole bunch of stuff sort of like I did here with my bread I'm putting a whole bunch of things in my bread in that context it makes sense so you do need to think about what the elements are and how they're being used it's all very logical it makes sense so don't worry too much about that side of things the other thing that's really important here and something I want you to practice a little bit with your editor is when we're writing our code vs code helps us out through what we call indentation and that's that spacing that I was talking about along the way here and you can see when I'm highlighting that you'll see you getting two dots showing up within that highlight and then I have four dots here and that's because VSS codes actually adding spaces if you highlight an empty space or if you make a whole bunch of empty spaces and you highlight it you'll see those empty spaces appearing there and what I mean by that is let's say I delete all of this and so we have our doc type that we don't want to forget so doc type HTML at the top of the page and then if I came here and I do HTML when I push return on my keyboard now you'll notice that vs code is automatic ially indenting that inside of here I didn't do that it's going well I know that you're inside of another element so I'm going to put this indentation for you and then we can put my head and then if I go inside my head when I push return we get the indentation that happens and I can do my title right there and so you know another another website what's going to happen though sometimes when you're doing this is let's say I come on and I do my body and then maybe I forget to push return so I come in with my H1 and I say uh my site whatever it doesn't really matter too much on the content but I do this and first of all this is harder to read now because I have my body than my H1 it's just a little bit awkward if you don't have a lot of code it's not the end of the world I guess but it it will get harder and harder to read and HTML you tend to have a lot of it so it's really important that we organize it properly so I would come here and make sure that you know I push enter so it's doing the proper job of of nesting it and vs code is going to try and do this automatically and it's going to add this indentation all by itself but sometimes you might do something and it doesn't end up working the way you wanted it to or you paste in some code and the indentation of things might be a little bit broken or not working properly and so when you're pasting in things or something like it could you know say this happens when you paste it in h and the indentation is not proper there what you can do is you can go before your text and hit Tab and it's going to start indenta it for you so every time I hit tab it's going to jump it for spaces as a default and if I push back it's actually delet deleting all four of those spaces at once so I'm just pushing my delete button to go back one delete button again to go back one uh to where it was so we can Tab and go back through our tabs really easily and so let's just I'm going to undo all the changes I just did here to go back to what we had previously and so having all of my content here again uh another thing that we can do is you might want to do this with a large amount and you don't want to have to come on one of these and then tab and then tab and then tab if you do need to fix your indentation you can actually grab a a whole bunch of text just select everything you want and then push tab and it's going to move them all over in one go which is really convenient or now if I push delete because I have selected text it deleted everything so it doesn't remove that extra indentation that I wanted to do what we can actually do is a shift Tab and when you shift tab it will indent backwards so tab goes One Way shift tab goes the other way and right now we don't have anything too complicated going on so everything's probably okay but you know you might have a body that's over here for some reason or your body might even be over here here uh cuz for some reason VSS code keeps trying to put my body right there so I'm going to push tab there and I go oh actually my indentation is wrong everywhere so tab then I can grab all of this hit Tab and move all of them over and start cleaning this up a little bit and even on these you know grab all of that tab that over and now everything is good all of this indentation will not change anything in the browser everything here is exactly the same it just makes it a lot easier for us to read while we're looking at our documents especially as we start creating more complicated layouts and getting into more levels of nesting it just makes your life so much easier so from the very beginning make sure you're organizing things properly