HTML NESTING
Go to see the TRAINING offer click here!
To get the pdf of the HTML Nesting video here SIGN UP for HTML FREE TRAININGS BELOW! ENTER NAME AND EMAIL AND LETS GET YOU KNOWLEDGEABLE ABOUT HTML SO YOU CAN CONTROL YOUR WEBSITE!
Nesting HTML tags, in this lesson, as well as some basic coding in your HTML webpage construction.
There are at least five things that every webpage needs in order for it to be an actual HTML webpage.
You have to have the declaration, the HTML, head, title, and body tags.
You also need to have the webpage file saved as an HTML file or HTM file. It is customary to name most webpages 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 can just go ahead and name it index.html.
Now nesting is when you assign different HTML elements to the same block of content.
An HTML element is an opening and closing tag. Let me show you what I am talking about. Open up HTML document. In this example, we have got an opening head tag and we have 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 two items, opening and closing tags, represent an HTML element.
So whenever you combine two 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 are talking about nesting. So technically speaking, this is an example of nesting.
Let’s Bold and Italize the Paragraphs
So in the video of nesting will be three different elements on this one block of content.
It is going to be a paragraph.
It is going to be bolded and
it is going to be italicized.
Before Formatting
As you can see in the video, we have got this on two different lines, but the browser does not see it because it is not formatted properly to show that we want it to be on two different lines, bold and italicized and so on.
We have 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 ‘/’ then the rest that tag, in this case p. Save it and then look at in the browser.
Here is a representation of the paragraph tag.
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 these opening tags determines how the closing tags must be placed for it to be properly coded. Now if it is improperly coded, a lot of browsers nowadays will still show it properly formatted – but if it is 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, the way you want it to be shown anyway. And that is where properly coding your nesting tags will come in handy.
We have got be <b> for bold and they have to be in exact opposite order. So it is <p><b>. So to properly nest this, it must be </b></p>. NOTE: For HTML5, bold is not used, instead you use the <strong> </strong> tag.
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 is <p><b><i> </i></b></p>. So we put our closing italicized tag right there. Save, come back and refresh, and there we go.
Now that is pretty simple.
In this example, if we want 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, need to get rid of these guys here. I have my opening italicized tag here. Then I wanted all of this to be italicized to put my closing italicized tag. But this screws up the opposite order of the closing tags with the opening tags. So what I need to do is to close out the italicized tag here again to maintain the order. Then reopen them here. And of course I have got the closing tag here. So now we have got everything in the proper order. Hopefully that makes sense. But 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 , nesting is okay if you do it the right way.