Chapter 2: Document Tags

[Previous] [Next] [Contents] Glossary] [Index] [Quiz] [Feedback]
Progress: 4/10

By "document tags," I mean the tags which divide up a Web page into its basic sections, such as the header information and the part of the page which contains the displayed text and graphics. This may seem confusing right now. Just hang on.


The first and last tags in a document should always be the HTML tags. These are the tags that tell a Web browser where the HTML in your document begins and ends. The absolute most basic of all possible Web documents is:



That's it. If you were to load such a page into a Web browser, it wouldn't do anything except give you a blank screen, but it is technically a valid Web page. Obviously, you'll want more than that.


The HEAD tags contain all of the document's header information. When I say "header," I don't mean what appears at the top of the browser window, but things like the document title and so on. Speaking of which...


This container is placed within the HEAD structure. Between the TITLE tags, you should have the title of your document. This will appear at the top of the browser's title bar, and also appears in the history list. Finally, the contents of the TITLE container go into your bookmark file, if you create a bookmark to a page.

What you type should probably be something which indicates the document's contents, but it doesn't have to be. The length of the title is pretty much unlimited, but don't go overboard. Users will either sneer at or be confused by exceedingly long titles.

If you don't type anything between the TITLE tags, or don't include the TITLE tags at all -- remember the blank document in the HTML section earlier? -- then the browser will typically use the actual file name for the title. Therefore, a document titled "TCh4ex4.html" will have that name appear in the history list. Again, you can choose to do this, but it will likely generate either confusion or contempt.

[ASIDE] You should only have one TITLE container per document. At one point, it was possible to create "dancing titles" by including multiple TITLE tags. Not only is this a savage abuse of HTML, but the effect can only be seen in certain versions of certain browsers. Therefore, it should be avoided at all costs.


BODY comes after the HEAD structure. Between the BODY tags, you find all of the stuff that gets displayed in the browser window. All of the text, the graphics, and links, and so on -- these things occur between the BODY tags. We'll get to what happens there starting with the next chapter.

So, putting everything we've covered thus far into one file, we have:

  <TITLE>Document Title</TITLE>



This time, the result would be a document with a completely blank browser window, but at least the words "Document Title" would appear in the browser's history list. But don't take my word for it -- look for yourself.

Let's look at the above block of HTML again, but this time with container lines sketched in. Note that the TITLE tags and text have been rearranged to make it easier to draw in the container lines. The rearrangement of the text does not in any way change the resulting Web page's appearance.

Figure 1: A basic HTML document with container lines drawn to show the document's structure.

Comment Tags

If you want to leave yourself notes in an HTML document, but don't want those notes to show up in the browser window, you need to use the comment tag. To do that, you would do the following:

<!-- Hi, I'm a comment. -->

Your note would go where the text Hi, I'm a comment. appears. Yes, you do need an exclamation point after the opening bracket, but not before the closing bracket. That's the way the standard is written. I have no idea why. Also, there is no end tag; that is, a tag like </!-- text --> does not exist. The comment tag is not a container. This is our first example of an empty tag.

You can put comments pretty much anywhere, but you have to be aware of one important thing: you shouldn't put any HTML markup within a comment tag. Theoretically, you should be able to, but most browsers handle this less than gracefully (i.e., they either mess up or crash).

What if you get the tag wrong, like forgetting to include the exclamation point? In that case, the text you did type in would be displayed. See for yourself, and then take a look at the same thing with correct markup (the exclamation point was put back in). Hooray, another totally blank page!


Okay, so you're tired of doing things which end up as blank browser windows. Same here. That means it's time to move on to the next chapter, where we'll start building up your knowledge of HTML. By the time we're done, that knowledge will include everything you'll need to create your very own Web documents!

 Chapter 2 Quiz
 Next -- Chapter 3: Basic Text Structures
 Previous -- Chapter 1: Concepts
 Table of Contents

Eric A. Meyer -- About this server -- Copyright CWRU & Eric A. Meyer -- Unauthorized use prohibited