Hello! In the last page we have seen what a tag is? Let’s go back to our page and let’s go over some rules that we need to understand when we are working with tags.
First, I think I need a little bit more text on the page to work with. So, I’ll put some loremipsum text in my file. Loremipsum is a nice place holder text that you can use, it’s Latin but, it looks like text in paragraphs, you can use it to simulate that. I’m gonna paste them in as three paragraphs.
my first <strong>web page</strong>.....!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem quam, vehicula vitae sagittis eget, ornare id mi. Ut eleifend facilisis quam, in luctus erat laoreet in. Sed nec magna diam, et egestas augue. In fermentum sagittis tellus, interdum scelerisque turpis commodo quis. Curabitur iaculis tempor mollis.
Donec sed neque quis ligula ornare iaculis et eget urna. Nullam nec venenatis nisi. Sed tincidunt, elit facilisis lobortis congue, eros magna porttitor massa, non fermentum quam dolor quis risus. Nullam tortor augue, pretium eget scelerisque in, feugiat id metus. Vivamus nec felis lectus.
Morbi volutpat vestibulum ligula, ut sodales urna suscipit non. Phasellus eu mauris massa, sit amet fermentum turpis. Vestibulum faucibus tincidunt orci vel tempor. Nullam dolor est, adipiscing et sagittis sed, tristique vitae tortor.
Now, without adding anything else, I’ll simply save my file and once again will go over to browser to preview it. Now hitting the refresh button, we see that the text was added to the page but, instead of seeing three nice paragraphs like we have added in our text file, we see all the text lumped together at the top.
This tells us one very important thing about working with HTML, and that is HTML will ignore what we call white space. We have spaces in between the paragraphs and texts and when the browser first loads an HTML page up, it looks at all the text and puts one space in between those text and puts one space between those text items, it don’t care anymore.
In order to have different formatting we need to use tags. Now just to explore it a little bit further, I’ll add a few extra character returns to my file and will even go to the first two words in the paragraph and will add some space in between them. Let’s save our changes. We’ll go back to our browser and will take a look and you can see that there is no change whatsoever.
It’s completely ignoring the spaces and the character returns that we add to our text file. So, let’s go back over and add some tags to do the formatting for us. What I’m gonna do to set up these text blocks as paragraphs is, we’ll go to the beginning of each one of the paragraphs and I’ll add a paragraph tag which is simply the letter p. Now just like our strong tag, we need a closing paragraph tag at the end. So I’ll go and add a backslash p and I’ll copy those ones and will paste the paragraph tag at the beginning of each one of our paragraphs and the closing paragraph tag at the end.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem quam, vehicula vitae sagittis eget, ornare id mi. Ut eleifend facilisis quam, in luctus erat laoreet in. Sed nec magna diam, et egestas augue. In fermentum sagittis tellus, interdum scelerisque turpis commodo quis. Curabitur iaculis tempor mollis.
</p>
<p>
Donec sed neque quis ligula ornare iaculis et eget urna. Nullam nec venenatis nisi. Sed tincidunt, elit facilisis lobortis congue, eros magna porttitor massa, non fermentum quam dolor quis risus. Nullam tortor augue, pretium eget scelerisque in, feugiat id metus. Vivamus nec felis lectus.
</p>
<p>
Morbi volutpat vestibulum ligula, ut sodales urna suscipit non. Phasellus eu mauris massa, sit amet fermentum turpis. Vestibulum faucibus tincidunt orci vel tempor. Nullam dolor est, adipiscing et sagittis sed, tristique vitae tortor.
</p>
Now we have formatted our document using HTML tags instead of white spaces. Let’s save our changes and will go over preview our file.
Now you can see the formatting is looking a little bit more like what we intended. We can see that the paragraph tag added space between each one of these blocks of text making the page a lot easier to read.
Now we have seen a couple of tags. We want to go back to our document and let’s take a look, how multiple tags work together. You can imagine, we are going to be needing a lot of tags. So, what I want to talk about is referred to as nesting. I’ll start by adding one more tag to my first line, here I’ll go up to the space right in the front of letter ‘w’ and I’ll add an em tag spelled e-m and that’s short for emphasis. This tag will be rendered by most browsers by italicizing whatever text you put inside it, and now I’ll go to the end of the strong tag and that’s where I’m gonna place the end of the em tag, just like we do for other tags.
Let’s save this and will go out and take a look at it on our page.
You can see that the phrase web page is indeed italicized.
But, what I would like to point out here, is that we have actually coded our page wrong; when we set up an element that starts inside of another element, we need to end that one inside as well and as you can see here, the end of the em tag is outside of the strong tag but, the beginning is inside of them. This considered, improperly nested. But, you must have noticed that, it still looks correct on the browser page. Today’s modern browsers are pretty smart they can figure out what you made by the code instead of what you said. But, we never want to rely on that. If you have improperly nested tags all over your page, at some point, some browsers can render it incorrectly and then you have to go and find the problem and fix it. So, it’s a very good idea to pay attention to nesting while you put the tags together. In this case I’ll correct our page by moving the end of the em tag inside the strong tag.
Now you can see the formatting is looking a little bit more like what we intended. We can see that the paragraph tag added space between each one of these blocks of text making the page a lot easier to read.
Now we have seen a couple of tags. We want to go back to our document and let’s take a look, how multiple tags work together. You can imagine, we are going to be needing a lot of tags. So, what I want to talk about is referred to as nesting. I’ll start by adding one more tag to my first line, here I’ll go up to the space right in the front of letter ‘w’ and I’ll add an em tag spelled e-m and that’s short for emphasis. This tag will be rendered by most browsers by italicizing whatever text you put inside it, and now I’ll go to the end of the strong tag and that’s where I’m gonna place the end of the em tag, just like we do for other tags.
my first <strong><em>web page</strong></em>.....!
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem quam, vehicula vitae sagittis eget, ornare id mi. Ut eleifend facilisis quam, in luctus erat laoreet in. Sed nec magna diam, et egestas augue. In fermentum sagittis tellus, interdum scelerisque turpis commodo quis. Curabitur iaculis tempor mollis.
</p>
<p>
Donec sed neque quis ligula ornare iaculis et eget urna. Nullam nec venenatis nisi. Sed tincidunt, elit facilisis lobortis congue, eros magna porttitor massa, non fermentum quam dolor quis risus. Nullam tortor augue, pretium eget scelerisque in, feugiat id metus. Vivamus nec felis lectus.
</p>
<p>
Morbi volutpat vestibulum ligula, ut sodales urna suscipit non. Phasellus eu mauris massa, sit amet fermentum turpis. Vestibulum faucibus tincidunt orci vel tempor. Nullam dolor est, adipiscing et sagittis sed, tristique vitae tortor.
</p>
Let’s save this and will go out and take a look at it on our page.
You can see that the phrase web page is indeed italicized.
But, what I would like to point out here, is that we have actually coded our page wrong; when we set up an element that starts inside of another element, we need to end that one inside as well and as you can see here, the end of the em tag is outside of the strong tag but, the beginning is inside of them. This considered, improperly nested. But, you must have noticed that, it still looks correct on the browser page. Today’s modern browsers are pretty smart they can figure out what you made by the code instead of what you said. But, we never want to rely on that. If you have improperly nested tags all over your page, at some point, some browsers can render it incorrectly and then you have to go and find the problem and fix it. So, it’s a very good idea to pay attention to nesting while you put the tags together. In this case I’ll correct our page by moving the end of the em tag inside the strong tag.
my first <strong><em>web page</em></strong>.....!
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem quam, vehicula vitae sagittis eget, ornare id mi. Ut eleifend facilisis quam, in luctus erat laoreet in. Sed nec magna diam, et egestas augue. In fermentum sagittis tellus, interdum scelerisque turpis commodo quis. Curabitur iaculis tempor mollis.
</p>
<p>
Donec sed neque quis ligula ornare iaculis et eget urna. Nullam nec venenatis nisi. Sed tincidunt, elit facilisis lobortis congue, eros magna porttitor massa, non fermentum quam dolor quis risus. Nullam tortor augue, pretium eget scelerisque in, feugiat id metus. Vivamus nec felis lectus.
</p>
<p>
Morbi volutpat vestibulum ligula, ut sodales urna suscipit non. Phasellus eu mauris massa, sit amet fermentum turpis. Vestibulum faucibus tincidunt orci vel tempor. Nullam dolor est, adipiscing et sagittis sed, tristique vitae tortor.
</p>
Posts
