Section 3. About Empty Tags and Nesting

3. About Empty Tags and Nesting

BEFORE YOU BEGIN

2 Use HTML Tags

SEE ALSO

6 About Proper HTML Coding

HTML tags sound pretty simple, don't they? Well, it's time to get a little bit confusing. As it turns out, not all tags require closing tags. Some require that you only use opening tagsfor example, the paragraph tag <P> . When you want to start a new paragraph, you put the <P> tag in front of it. But when you want to end a paragraph, you don't need to put a closing tag at the end. So how does your browser know when to separate the paragraphs? It's simple. Put a <P> tag at the beginning of every paragraph. You can, however, put a </P> tag at the end of each paragraph if you'd like. However, that </P> tag is optional.

How do you know which tags don't absolutely require ending tags? There's no rhyme or reason to ityou'll have to memorize which require ending tags and which don't. Go to http://www.w3.org/TR/html401/ to find out which require ending tags and which don'tit's the official HTML site.

Now it's time to get even more confusing. Some tags never use a closing tag, and are commonly called empty tag s. Although the <P> tag can use a closing tag, these empty tags won't work with closing tags. Some common empty tags are <HR> , which draws a horizontal rule across a page, and <IMG> , which places a graphic onto a page. Table 2.1 lists all the empty tags in HTML 4.01, which is the most recent standard. I won't go here into what each are used for. Head to http://www.w3.org/TR/html401/ for more details.

Table 2.1. The Complete List of Empty HTML Tags

<AREA>	<FRAME>	<LINK>
<BASE>	<HR>	<META>
<BASEFONT>	<IMG>	<PARAM>
<BR>	<INPUT>	‚
<COL>	<ISINDEX>	‚

KEY TERM

Empty tag An HTML tag that does not get a closing tag, and that will not accept a closing tag.

By the way, you might notice that <P> isn't considered an empty HTML tag. That's because you can use the closing tag </P> along with it, and the browser will understand the closing tag. Empty tags don't have any closing tags, and browsers will choke if you try to use closing tags with them.

How to Nest Tags

There will be times when you're going to need to insert one set of tags inside another set of tags. You might need to do this, for example, when you want a set of words to be boldfaced, and you also want some of those words to be italicized. Or, for example, you might have a set of words that are boldfaced, and you want some of them to be hyperlinksin other words, they can be clicked upon and will send the browser to another location.

Doing this is called nesting . There's a rule you should follow when nesting tags: First, close the tag that you've most recently opened, and then close the other tag. If you don't, you might confuse the browser and you might not display what you expect to.

KEY TERM

Nesting To place one set of HTML tags inside another. For example, when you want to make text boldfaced and italic, you would nest the tag for italic <I> inside the tag for boldfaced <B> .

Let's take an example. Let's say you want to have text displayed like this in a browser:

Bold Italic

The proper way to nest the tags is like this:

<B>Bold <I>Italic</I></B>

Notice that the <I>Italic</I> is nested within the <B> and </B> pair of tags. That's because you're making the first text bold, and then you're adding italic.

In the same way, let's say you want to display this text in a browser:

Bold Italic

There are two proper ways to nest this:

<B><I>Bold Italic</I></B>

or

<I><B>Bold Italic</B></I>

The point here is that when you nest tags, the innermost tag should be closed before you close the outermost tag. So in the first instance, you're using the closing tag </I> before the closing tag </B> , because the <I> and </I> pair of tags are inside the <B> and </B> tags. In the second instance, you're using the closing tag </B> before the closing tag </I> , because the <B> and </B> pair of tags are inside the <I> and </I> tags.

It's important to always follow this way of nesting because there will be times that you nest tags within tags within tagsyou can go as many levels deep as you want. If you don't follow rules for nesting, you'll lose track of which is being nested inside which, your web page will look a mess, and it will be difficult for you to figure out what went wrong.

NOTE

Most tags aren't single letter tags like <B> and instead are made up of several contiguous lettersfor example, <HEAD> . When using tags made up of several contiguous letters, don't put a space between any of the letters . So <H EAD> won't be understood by a browser, although <HEAD> will.