HTML Tutorial #3 - Basics of Nested Tags

In this third tutorial, we are going to learn how nested HTML tags work. In the previous tutorial, we made our first HTML web page which consisted of the following code:

< html >
This is my web page.
< /html >

First, let me introduce a couple of new tags:

< title >

and

< body >

and

< font >

As crazy as it may sound, the < title > tag lets you enter the title of the page, the < body > tag lets you modify the body of the page, and oddly enough, the < font > tag lets you modify the font of the page. There are different attributes which are used to modify. We will only be looking at a couple attributes in this tutorial. First, we will see how the tags are nested. For example:

< html >
< title >< /title >

< body >< font >< /font >

< /body >< /html >

The first thing to notice is that everything is inside the < html > and < /html > tags. The < title > tag comes after the < html > but before the < body > tags. Anything that is put in the < title > tag will go on the top of the browser window as the title for the window. Next, between the < body > and < /body > tags, we have the < font > tag. The entire code serves as a template for what a basic HTML page consists of. The < font > tag is nested in the < body > tag, and the < body > tag in turn, is nested inside the < html > tag. The < title > tag is not nested inside the < body > tag. However, it is nested inside the < html > tag, as are all HTML tags.

The code we have is pretty useless, so let us add some stuff to see how it works:

< html >
< title > Learning About Nested Loops < /title >

< body bgcolor="black" text="white" >
This is some text that is in the body with the default font face.

< font face="Courier" >
This is some text that is also in the body, but with the Courier font face.
< /font >

< /body >
< /html >

This code will make the title say "Learning About Nested Loops", the background color will become black and the text white. Next, there is a sentence using the default font face followed by a sentence with the Courier font face.

The "bgcolor", "text", and "face" are all attributes that will be explored in detail in a later tutorial. The important thing to notice from this code is the nesting of the tags. For example, in the < body > tag, we have text that is not nested in the < font > tag, and so that text will use the default font face, while the text that is nested inside the < font > tag will use the font specified by the "face" attribute.

In the next tutorial, we will look at the precedence of nested tags.