Getting to know HTML

Site hosted by Angelfire.com: Build your free website today!

Chapter 2:Explanation of Document Structure Tags

More About Tags

Now we are able to start learning about HTML tags. An HTML tag will always begin with a "less than" sign, like this: <. The tags will end with a "greater than" sign, like this: >. An example would be the tag used to underline text, . You would place this before the text you want to underline. This is called an opening tag, which begins the operation you wish to perform. In order to end the underlining, you must use a closing tag. A closing tag will be the same as the opening tag, but will have a forward slash before the command, like this: . So, if you would like to underline the phrase "HTML Rules!", you would write the following in your text editor:

<u>HTML Rules!</u>

The result of this would be:

HTML Rules!

In the past, not all tags would require a closing tag. An example would be the image tag, which places an image on the page. It looks like this:

&<img src="myimage.gif">

Other examples would be a line break: and the horizontal rule: <hr>. These are called empty tags, which do not have a closing tag. With the new coding standards in place, these need to be closed. Since they do not have closing tags, they are closed with a forward slash in the opening tag, like this:

<img src="myimage.gif" />

<br />

<hr />

Also, in the past you could capitalize the tags. was the same as . With the new standards, all HTML tags are supposed to be in lowercase, so this is what we will use in the examples here.

You can use as much space between things as you like. So:

Underline Me!

Is the same as:

Underline Me!

Is the same as:

Underline Me!

A basic HTML file will have the format below. Read through and see if you can guess what the different tags will do: (Don't worry, I'll explain them at the end of the example.)

This is the tag for bold text.
Example:

<b>Howdy</b>

This will show up on your page like this:
Howdy

Here are a few more to start working with:

<u></u> Underline text


<u>Underline Me!</u>

Underline Me!

<i></i> Italics


<i>Isn't this fun?</i>

Isn't this fun?

<strike></strike>


<strike>You're Out!</strike>

You're Out!

<center></center>


<center>This centers text on the page</center>

This centers text on the page

Having fun yet? You can also use more than one tag at a time. Let's say you wanted something in bold and italics. To do this, just place both opening tags before the text.....and remember to close both tags afterwards....like this:

<b><i>I am bold AND Italic, which makes me cool!</i></b>

This will show up like this:

I am bold AND Italic, which makes me cool!

Does the order of the tags make a difference? In this case, it wouldn't matter which way you opened and closed the tags. However, working from inside out will help you see your code better, and will help when the order does matter! (such as if you want to validate your HTML code). Here's another way to look at working inside out. I could write the HTML this way:


<b>

       <i>            
 I am bold AND Italic, which makes me cool!
       </i>

</b>

This could get rather tedious. All you need to remember is that the text you have written is affected by every tag before it that has not been closed. The effect ends when each one of those tags is closed by it's closing tag.

So lets try three things: Bold, Italic, and underline!

<b><i><u>Would you stop tagging me!</b></i></u>

This will give us:

Would you stop tagging me!

But this:

<u><i><b>Would you stop</b></i>tagging me!</u>

would give us this!

Would you stop tagging me!

As you can see, the bold and italics were closed before the word "tagging"....but the underline remained open until the end of the exclamation. This caused the "tagging me!" portion to be underlined, while not being affected by the bold or italics tags!

Now let's use the center tag from above. Since the default alignment of everything is to the left, it's nice to have a way to place things in the center of the page. So let's do just that. Use the <center> tag. Anything you place between the <center> and </center> tags will be centered on the page. Here is an example:

<center>I'm in the middle!</center>

This will give us the following:

I'm in the middle!

You can also use it with one or more of the other tags above, like this:

<center><b><i>Look at me now!</i></b></center>

Look at me now!

Source: http://www.pageresource.com/html/

Chapter 2:Explanation of Document Structure Tags

More About Tags

See Also