Master HTML 5 Video #5: HTML Nesting

This video will introduce you to what's called nesting HTML tags, as well as some basic coding in your HTML web page construction. Now, there are at least 5 things that every web page needs in order for it to be an actual HTML web page. You have to have the declaration, the HTML, head, title, and body tags. You also need to have the web page file saved as an HTML file or HTM file, and it is customary to name most web pages as index, but you can name it whatever you want. Browsers will automatically look for the index.html file first, so unless you have a good enough reason not to, you should just go ahead and name it index.html. Now nesting is when you assign different HTML elements to the same block of content, and an HTML element is an opening and closing tag. Let me show you what I'm talking about. Let me open up my little HTML document here. In this example, we've got an opening head tag and we've got a closing head tag. These represent an HTML element, the opening and closing tags of a particular tag. Likewise, an opening title tag and a closing title tag. These 2 items, opening and closing, represent an HTML element. So whenever you combine 2 different elements, and in this example those elements are head tags and title tags, to a particular block of content, in this case the title, then we're talking about nesting. So technically speaking, this is an example of nesting, but not the example I want to go into here. The example I want to go into is these 2 guys right here, these 2 sentences right here. I want to make this one a paragraph so it kind of stands out away from this one here. And to make it stand out even further, I want to make this bold and italicized and this one not. So this example of nesting will be 3 different elements on this one block of content. Going to be a paragraph, it's going to be bolded, and it's going to be italicized. Let me show you what I'm talking about. Now first off, let me go ahead and pull this guy into our browser to see what it looks like right now without any of the formatting. And by the way, these are the 5 elements I was talking about earlier that most every HTML document has to have before it's technically an HTML document. That's the declaration. In this case, this DOCTYPE represents that it's an HTML5 web page. Then we've got the HTML tag. That's number 2. The head tag, number 3, title tag, number 4, and the body tag, number 5. And we've got the representing closing tags of each: closing head tag, closing title tag, closing body tag, and closing HTML tag. Now most every opening tag will be accompanied by a closing tag. Not all the time though, but most the time it will be. So on with our example here. Let's go ahead and pull this guy in. I'm in my Chrome browser, so just hitting the Ctrl key on my keyboard and the letter O for open. It will allow me to navigate to the location of my index file. And here we are with no formatting whatsoever. As you can see here, we've got this on 2 different lines, but the browser doesn't see that because it's not formatted properly to show that we want it to be on 2 different lines, bolded, italicized, and so on. So let's go ahead and do that now. So we want to make this a paragraph. So we've got the opening p tag for paragraph. And the closing paragraph tag, which is exactly the same way as the opening tag, only it starts with a forward slash, then the rest of that tag. In this case, the P. And we save this. Come on back here and refresh. And there's our representation of the paragraph tag. Come on back here. The thing about nesting is that the opening tags really are not in any particular order, but for it to be properly coded, the closing tags have to be in the exact opposite order of the opening tags. So again, opening tags, no order is required, but however you place those opening tags determines how the closing tags must be placed for it to be properly coded. Now if it's improperly coded, a lot of browsers nowadays will still show it properly formatted, but if it's incorrectly coded, some browsers will not. Some browsers, like for example on your smartphones or your tablets, they might get confused and just not show it properly. Way that you want it to be shown anyway. And that's where properly coding your nesting tags will come in handy. So here we've got B for bold, and they have to be in exact opposite order. So it's P, B. So to properly nest this, it must be B, P, forward slash, and B. Save this, come back here, refresh, and there you go. Now we want to add some italics. So we put in the I for the italicized opening tag, and remember we need to put the closing tag in the opposite order. So we want to make sure that it's PBI IBP. So we put our closing italicized tag right there. Save. Come back and refresh, and there we go. Now that, that's pretty simple so far. In this example, if we wanted to just have portions of our content to be italicized or portions of it to be bolded, then just remember you have to have the closing tags in the opposite order of the opening tags. So if I just wanted this here to be bolded, but I wanted this here to be italicized— let me get rid of these guys here— and I'd have my opening italicized tag here And then I wanted all of this to be italicized, so I put my closing italicize tag here. But this kind of screws up the opposite order of the closing tags with the opening tags. So what I need to do is to close out the italicize tag here again to maintain the order, then reopen them here. And of course I've got the closing tag here. So now then we've got everything in the proper order. Hopefully that makes sense. Just try to remember whether we are using just the simple example as I demonstrated earlier or a little bit more complex like this one, you always have to have the closing tags in the opposite order of the opening tags. So in closing, nesting is okay if you do it the right way. That's going to bring us to the end of this video on nesting HTML elements. Thanks for watching and you have a great day.