LESSON THREE - UNDERSTANDING THE BASIC TAGS


You may read the following sections in their entirety
or use these choices to go directly to a section.

Return to Home Page | | Tags | | <BR>, <P> and <HR> tags | | <HTML> and </HTML> tags | | Correct use of tags | | <HEAD>, <TITLE> and <BODY> tags |


HTML TAGS

HTML works in a very straightforward manner. You type in your text and your tags. To get large print, centered text, bold text, text in italics, indented sentences, colored text, etc., is nothing more than inserting tags around your text. These tags are more accurately called ELEMENTS and you should think of these elements as describing the meaning of the text they contain, rather than how the enclosed text should be displayed. This concept is called content-based markup, as opposed to presentational markup. We will get more into this in Lesson Four when we study web page design. Because we don't want the tags (elements) to appear in the browser, we need a way to tell the browser that something is a tag - and this is easy to do. To tell the browser that something is a tag, you simply place "less than" and "greater than" symbols around them. The LESS THAN symbol is "<" and the GREATER THAN symbol is ">". These symbols are also called "Angle Brackets". Thus we have an opening angle bracket "<" and a closing angle bracket ">" around each tag. I have also heard them called "pointed brackets".


top | | bottom |

<BR>, <P> and <HR> TAGS

<BR>
<BR> tells your browser to go to the beginning of the next line. BR stands for line BReak. <BR> acts in the same way as the ENTER key on your keyboard. When you press the ENTER key, the cursor goes to the beginning of the next line. With <BR>, the browser is also told to go to the beginning of the next line. Remember that when you save an HTML document, you are saving it as TEXT ONLY which means that no codes are saved and so your browser will not know when to end a line and continue on to the next line. The <BR> tag does this for you.

<P>
<P> for Paragraph tells your browser to insert a blank or empty line and then begin a new line (a new paragraph). <BR> tells the browser when a line has ended while <P> tells the browser to leave a blank line and begin a new paragraph.

<HR>
<HR> puts a line across the page. HR stands for Horizontal Rule. The two lines you see below were put there with <HR> tags.


top | | bottom |

<HTML> and </HTML> tags

Before we can try out the <BR>, <P>, and <HR> features, we first need to learn how to set things up properly in an HTML document (or file as it is also called). Every HTML document should first be declared that it is in fact an HTML document. When the document is completed we also need to indicate this. You do this with the tags <HTML> and </HTML>. Recall that HTML stands for HyperText Markup Language which is the language of web page design.

<HTML> is the beginning tag and </HTML> is the ending tag. The forward slash before the tag (</ >) cancels the effect of the tag. This is true for all tags that affect text. Thus <HTML> tells the browser that what follows is an HTML document and </HTML> tells the browser that the HTML document is completed. You can therefore think of the <HTML> and </HTML> tags as "containers", containing the entire HTML document. Therefore HTML is called a container element. You should use the HTML element for each of your web pages.


top | | bottom |

CORRECT USE OF TAGS

We have "beginning" or "opening" tags (such as <HTML>) and we have "ending" or "closing" tags (such as </HTML>). Many elements consist of an opening tag and a closing tag. An element that has an opening and closing tag is referred to as a container element because anything contained between these tags are affected by the element.

Closing Tags cannot be placed just anywhere. Use the "Last In = First Out" principle or "LIFO". That is, the "Last" tag "In" must be the "First" tag "Out". Another way of stating this is that the last tag activated must be the first tag terminated. An example of a correct sequence of tags is:

<tag1><tag2> statements </tag2></tag1>

In this example, <tag1> is activated first, and then <tag2>. Thus <tag2> must be terminated first with </tag2> followed by the termination of <tag1> (</tag1>). In other words, tags are closed in reverse order to the way they are opened. Thus the first tag opened must be the last tag closed.

An example of an incorrect placement of tags is:

<tag1><tag2> statements </tag1></tag2>

In this example, the last tag opened (<tag2>) is not the first tag closed. That is, these tags overlap. </tag2> must come before </tag1>. Therefore this example does not satisfy the LIFO principle. Container tags cannot overlap each other. If you do not place tags properly, your web page simply won't work.

The following is another example of a correct use of tags:

<tagA><tagC><tagB><tagD> statements </tagD></tagB></tagC></tagA>

Problem 1: Is the following example a correct use of tags? The answer is given at the end of this lesson.

<tag1><tag2> blah, blah, blah </tag2>
<tag3>
blah
blah
blah
<tag4> blah, blah, blah </tag4></tag3>
blah
blah
blah </tag1>

Click here to see the answer |


top | | bottom |

<HEAD>, </HEAD>, <TITLE>, </TITLE>, <BODY> and </BODY> tags

In this section we will study the HEAD, TITLE and BODY container elements and we will learn about these tags (most people still refer to "elements" as "tags") by studying the following web page (HTML document).

It is good to be actively involved in each lesson, so please SWITCH to NOTEPAD, and type in the following HTML web page. After you have typed it in, you will save the document and then view it in your browser.

Here is the web page. Please type:

<HTML>
<HEAD>
<TITLE>WEB PAGE DESIGN - BASIC TAGS</TITLE>
</HEAD>
<BODY>
Hi, my name is John Gilson.<BR>
This is my first attempt at a Web page.<HR>
Here is a riddle for you.
<P>Why did the lobster blush?<HR>
Because it saw the salad dressing.<BR><BR><HR>
</BODY>
       </HTML>

Before we study this web page, let's save it. Here are the steps if the coding was typed into NotePad:

  1. From NotePad's File menu, choose Save As. This will display the Save As dialog window.
  2. In the Save As dialog window, click into the Save as type box and choose All Files.
  3. In the File name box, type in the name riddle.htm. You can of course enter any suitable name and also the extension .html instead of .htm.
  4. Everything else can be left as is and so click on OK. The web page is now saved.

Now lets see what the web page looks like in your browser. Here are the steps:

  1. Open your browser.
  2. From the File menu choose Open or Open File (whatever your browser says).
  3. Browse to the folder where the web page is saved. When you find the file, click on the name and then click on Open. If you get an Open window, click on OK. You should now see your riddle web page. This is what you should see in your browser:

Hi, my name is John Gilson.
This is my first attempt at a Web page.


Here is a riddle for you.

Why did the lobster blush?


Because it saw the salad dressing.


Note: If you made a mistake typing in the coding for the web page, switch back to NotePad and make the correction. Once the correction is made, all you need to do is to click on NotePad's Save button to save the changes. Then switch to your browser and click on the Reload or Refresh button to reload the current page.

We will first discuss the important elements that should appear in all web pages.

<HTML> and </HTML> tags

The HTML element was discussed above in detail so here is a brief summary as it relates to this web page example. The first line in the coding reads <HTML>. It tells the browser that what follows is an HTML document. It is called the opening HTML tag. The last line in our coding reads </HTML>. It tells the browser that the HTML document is finished. It is called the closing HTML tag. These opening and closing HTML tags make up the HTML element of our web page.

<HEAD> and </HEAD> tags

Next comes the HEAD element which, like the HTML element, also has an opening and closing tag. Each web page must have the HEAD element. Statements (or tags) that give information to a person visiting your website, or information such as those needed for a Search Engine are placed between the <HEAD> and </HEAD> tags. Thus the HEAD part of a document provides information about the document. You do not see this information displayed in your browser. It can be seen by choosing Source, or Page Source or Document Source from the View menu of your browser (one of these choices should be in the browser's View menu). The HEAD tag must not contain any text or normal markup tags. If it does, the browser will assume that it is in the BODY part of the document (studied below). The HEAD element can actually be omitted, but only if you group all the tags that go in it at the top of the document. To avoid any potential problems, I would suggest that you include the HEAD element in your own documents. If fact, the latest web standard (XHTML) demands that it be included. If you go back to my home page and choose Source from the View menu, you will see other statements between the <HEAD> and </HEAD> tags. Take me back there now. We will study these statements in a future lesson when we learn how to get your web pages on the World Wide Web.

<TITLE> and </TITLE> tags

One of the statements that must be included between the <HEAD> and </HEAD> tags is the TITLE of your web page. The title in our example (line 3) is "WEB PAGE DESIGN - BASIC TAGS". Notice that this title is placed by the browser at the very top of the screen - above the menu choices.

The TITLE of your web page must occur between the <TITLE> and </TITLE> tags and you are only allowed one TITLE element per page. The information you provide in the title is also used to label the bookmark entry for your web page. That is, when a visitor bookmarks your site (adds it to their favorites list), it is the title that appears in the list. Most search engines also use the title in search engine results. Therefore you should take time to make up a good descriptive title for each of your web pages. You will notice that each of my lessons has its own title that describes the general content of the lesson. In general, the title should be short. Most search engines insist on a short title and a general rule of thumb is no more than 75 characters including spaces. Because we do not want the title to be displayed on the browser screen, the <TITLE> and </TITLE> tags must be placed between the <HEAD> and </HEAD> tags.

<BODY> and </BODY> tags

After the title comes the main body of your Web page. It contains all the text and tags. It is the part that will be displayed on the browser screen. Thus the BODY element contains the actual contents of the document. Of course the tags will not be displayed on the browser screen. The tags only tell the browser how to display the information. The body of each of your Web pages is declared through the BODY element. <BODY> tells your browser that what follows is to be the body of the Web page and </BODY> tells the browser that the body part of the page has ended. Thus the <BODY> and </BODY> tags are container tags, containing the body of your document. The BODY tag can actually be left out. If you place all the HEAD elements first, the browser will know where the actual body begins. I believe it is still a good rule to include the BODY tag - and the latest web standard (XHTML) demands that it be included. I also like the idea of declaring things for what they are. This way there will be no confusion for any HTML version that relies on these declarations.

Now here is the above HTML document again only this time I numbered the lines in the BODY element for discussion purposes. Below the coding are the results once again when viewed in the browser. Below the results is a discussion of the BODY part of the document and some questions for you to answer.

<HTML>
<HEAD>
<TITLE>WEB PAGE DESIGN - BASIC TAGS</TITLE>
</HEAD>
<BODY>
Line 1:    Hi, my name is John Gilson.<BR>
Line 2:    This is my first attempt at a Web page.<HR>
Line 3:    Here is a riddle for you.
Line 4:    <P>Why did the lobster blush?<HR>
Line 5:    Because it saw the salad dressing.<BR><BR><HR>
</BODY>
       </HTML>

Hi, my name is John Gilson.
This is my first attempt at a Web page.


Here is a riddle for you.

Why did the lobster blush?


Because it saw the salad dressing.


Discussion:
Notice the <BR> at the end of line 1. It simply tells the browser to drop down to the next line. The <HR> tag at the end of line 2 placed the first line across the page. Notice that the <HR> tag does not place any blank lines (empty rows) above or below the Horizontal Rule.

Problem 2: Why is the <P> tag at the beginning of line 4 ("Why did the lobster blush?") and not at the end of line 3 ("Here is a riddle for you.")?

Click here  to go to the answer section |

The second line across the page was placed by the <HR> tag at the end of line 4.

I wanted to leave a blank line before the third and last Horizontal Rule is placed by the browser across the page. I did this with two <BR> tags (line 5). The first <BR> tag tells the browser to go to the beginning of the next line. The second <BR> tag again tells the browser to go to the beginning of the next line which in effect places a blank line on the screen. The <HR> tag then placed the line across the page.

Problem 3: One <P> has the same effect as two <BR> tags since the <P> tag forces a blank line before continuing on. Why then did I not simply use one <P> tag instead of two <BR> tags at the end of line 5?

Problem 4: What does HR stand for in <HR>

Problem 5: Do all tags require a beginning and an ending tag?

Problem 6: Must tags be written in capital (upper case) letters?

Problem 7: When you typed in the above HTML document, some of the tags were indented (such as <HEAD> and <TITLE>). Do you have to indent tags?

Click here  to go to the answer section |

IN SUMMARY, WE HAVE:
<HTML>
<HEAD>
    <TITLE>the title or name of your page goes here </TITLE>
</HEAD>
<BODY>
.
.
.
all your web page work goes here in this section
.
.
.
         </BODY>
</HTML>


Problem 8: Based on your knowledge of the basic tags, write down exactly what you think will be printed by your browser for the following HTML document. The answer is given in the answer section (no cheating now). Let's assume that the <HTML>, <HEAD> and <TITLE> tags have already been typed in.

<BODY>
I am learning a           lot about


designing my own web pages.
</BODY></HTML>


top | | bottom |

ANSWERS

  1. Yes. All tags are terminated in the reverse order to the way in which they were activated. These tags satisfy the principle of "LIFO".
  2. I could have placed the <P> tag at the end of line 3 as in:
         Here is a riddle for you.<P>
    It would have given the same results. However, this is not considered good form in HTML. The <P> tag stands for Paragraph and so implies the beginning of a new paragraph. It does not imply the end of a paragraph. Therefore you should never end a line or paragraph with a <P> tag. You end lines with <BR> as it tells the browser to BReak here and begin a new line. Of course you can also end any line or paragraph with an <HR> tag. (Actually there is a </P> tag that can be used to end a paragraph. This </P> tag isn't used very much, but it does have its uses and we will take a look at the </P> tag when we study centering text in Lesson Four.)
  3. Two <BR> tags may have the same effect as one <P>, but we have reached the end of the HTML document. There are no more paragraphs and so the <P> tag should not be used as it denotes the beginning of a new paragraph.
  4. Horizontal Rule.
  5. No. In HTML, <BR>, <P> and <HR> are three examples that do not require an ending tag. They are also known as "stand alone tags". Actually, <P> does have an optional closing tag which is </P>. This closing tag is discussed in the next lesson.
  6. No. You can write in lower case letters if you want to. HTML is not case sensitive. I use upper case letters so that I can easily and quickly identify tags from text when working with my web pages. Having said that, when HTML 4.0 was introduced, the World Wide Web Consortium (W3C) recommended that only lower case letters be used. As stated in Lesson 1, the latest web standard is XHTML. This standard, which is studied in detail in Lessons 42, 43 and 44, does not allow upper case at all. If you write your tags in upper case, the web page will not validate as XHTML. This lower case rule happens to be just one of several rules.

    So with XHTML, the rules have really tightened up. Why are the rules tightening up? As I state in Lesson 42 (in the additional lessons), XHTML is not bringing with it a lot of new tags. The purpose of XHTML is to address the new browser technologies that is sweeping the world. Today web pages are being viewed in browsers through cell/mobile phones, cars, televisions, plus a host of hand-held wireless devices and communicators. Alternate ways to access the internet are continually being introduced. In many cases, these devices will not have the computing power of a desktop or notebook computer and so will not be able to accommodate poor or sloppy coding practices. XHTML is designed to address these technologies. XHTML also begins to address the need for those with disabilities (such as the blind and visually impaired) to access the internet. Thus web pages written in XHTML will allow them to be viewed on a wide range of browsers and internet platforms. So you may wish now to write all your tags and attributes in lower case letters.

  7. No. You do not have to indent tags. I only do it for visual effects to quickly spot certain tags and to be able to tell tags from the text. Indenting (and leaving blank lines) is also good for setting apart sections of the document for later searching and editing purposes.
  8. This is how the browser will interpret this HTML document:

    I am learning a lot about designing my own web pages.

    Since there are no <BR> or <P> tags in the document, the browser is unable to determine when you want the line to end or when you want blank lines. That is why everything was printed on the same line as one statement. The browser can only read text and has to be told through the use of tags what to do with the text. You can use this to your advantage when making up your web pages. You can use blank lines to section off portions of your work. This will make it easier to spot the sections later when you are looking for them. Also, the large space between the words "a" and "lot" was ignored. You can insert as many spaces as you like, but the browser only allows for one space between words and sentences. If you want more space between words or to indent lines and paragraphs, there is a way to do it, and I will show you how in Lesson Five.


| Back to the top of the page |

Return to Home Page | | Return to Alternate Home Page | | Send me to Lesson Four |


The information contained in these free 21 lessons is Copyright ©, Brantford Educational Services, 1997 - 2012 by local and international copyright laws. All rights reserved. It is therefore illegal to copy these lessons into another website. If you find a copyright violation, please report it to email