Hey this is Sasha and thanks for joining me here for another training video. Today we’re covering some more HTML.
What are Nested Elements?
What I’d like to do is take a look at nested elements. Nested elements are elements that are within one another. It’s in a nest. So when you think about it, it’s something that’s inside of another element.
Basically, one is a parent and one is a child. You’ve already seen this, but as we get into more formatting tags here shortly, it’s important to understand how nested elements work and how deep you can really go with them. Let’s take a look at some nested elements here.
All right, you could see here we have our basic website or web page. I did add a few of the comments there and if we get rid of some of these comments here, you’ll actually see that we do have a few nested elements. Some of the nested elements that we actually have are in fact right here when you look at it, which is an element within an element, you can see the heading tag right there is the parent.
My Cooking Website Welcome to my cooking website
Here is the menu
Business Launch Pad is focused on showing you the critical concepts on how to build a profitable business from scratch. Even if you have a business you will learn how to accelerate it into hyperdrive. This book focused on the foundational concepts, setup structure, essentials of marketing, and time-saving productivity tips. Pick it up today by clicking one of the links below.
And then within the heading tag, we have a title tag which is the child. This is actually a nested element. You can see how it’s creating a little nest, right. And we have the same thing if you take a look at the body right here. Here’s our body tag. Then within here, we have the P tag, right here, this tag, that’s a nested element. This is a nested element. This is a nested element within it. And that’s a nested element within it.
Taking the Nested Elements Further
You could go even deeper within that and put a nested element within a paragraph tag or a heading tag such as bolding something. Like let’s say, you wanted to bold the word ‘hyper drive’ right here. You can go ahead and do that.
But you can see all of this is really nested if we really look at the bigger picture. It’s all nested by this HTML tag. Now the only thing that isn’t nested really is this doc type. So you can see how this nesting really works.
In either case, you can continue to go things deeper and continue to nest things further and further, but what’s important to understand is that you’re always looking at where the opening and closing tag is because you don’t want to be confused at — you don’t want to mix nest things up.
In other words, what we don’t want to do is go ahead and put your body tag somewhere over here and you have this element over here and you take the paragraph tag, and maybe you put it somewhere down here because now, that doesn’t go with the flow.
If I go ahead and save this, and we’ll go ahead and take a look at our page, you can see this paragraph tag is off because there is two of them right there. The body is closing up here, and it doesn’t go with the right flow.
My Cooking Website Welcome to my cooking website
Here is the menu
Business Launch Pad is focused on showing you the critical concepts on how to build a profitable business from scratch. Even if you have a business you will learn how to accelerate it into hyperdrive. This book focused on the foundational concepts, setup structure, essentials of marketing, and time-saving productivity tips. Pick it up today by clicking one of the links below.
Even if you look at this page, it’s not that complicated right now, so it doesn’t cause a lot of problems. But eventually, this could give you a lot of problems. For example, if I take this H2 tag and I put that all the way down here towards the bottom and I go ahead and save that. Then we take a look and you can see that it actually creates an H2 view for that whole paragraph. So that’s ultimately where the problem starts to lie.
If I go ahead and back track this, you want to make sure you keep things very nice and clean when you’re doing testing and putting in tags within tags especially as you get into bolding things because what we’re going to talk about here in the next is if I go ahead and then add the strong tag or bold tag, and I bold ‘hyper drive’ right here.
My Cooking Website Welcome to my cooking website
Here is the menu
Business Launch Pad is focused on showing you the critical concepts on how to build a profitable business from scratch. Even if you have a business you will learn how to accelerate it into hyperdrive This book focused on the foundational concepts, setup structure, essentials of marketing, and time-saving productivity tips. Pick it up today by clicking one of the links below.
I’ll go ahead and save it so you can take a quick look at how that’s going to look. I’ll refresh and you can see that right there as you look at the page ‘hyper drive’ is bolded.
So you can see how that works out really well and nicely but as you can see, that tag right there is nested within the paragraph tag. If I really look at it, we have the paragraph tag right there, and the strong or the bold is nested inside of that. We also have the paragraph that’s nested within the body tag. That’s why it’s important for you to understand.
You can continue to dig deeper and deeper, into the nest, and if I really wanted to let’s say, the drive and I wanted to make it italic, then we’re going to do the emphasized tag right here.
Then I’ll go ahead and save it, and I’ll just show you right there as I refresh, you can see I have ‘drive’ italic and bold and nested within there.
These things can go on for quite a while depending on how much code you have and what’s inside which element. But ultimately, this gives you a starting point to understanding how the nesting function works when it comes to this tags and what it is that you’re looking for when you’re creating proper nesting sequences in your HTML tags.
Thanks for joining me in this video and don’t forget to hit the subscribe button right over here. In that way, as I make new training videos you’ll get notified as those things are released.
If you want to join me in one of my live classes or get exclusive training content when it comes to business concepts or even some of my books or a premier course, then go ahead and click this button and sign up to the newsletter list. When you get there, enter your name and email address. In that way, as I release new premium content, you get the first notification.
Thanks again and I hope to see you in the next training lesson as we continue going deeper into learning HTML.
Resources & Helpful Tools
Sublime Text
FileZilla FTP Client
