HTML 4.0 Sourcebook
(Publisher: John Wiley & Sons, Inc.)
Author(s): Ian S. Graham
ISBN: 0471257249
Publication Date: 04/01/98

This book focuses on HTML and on the structural layout control possible via HTML. It does so in the framework of accurate HTML markup, the goal being documents that will continue to work with future HTML standards or with CSS. Indeed, with proper HTML markup, it is often quite easy to “add” style sheets on top of documents and define additional stylistic formatting without needing to change the underlying HTML markup.

CSS is described in a bit more detail in Chapter 7. However, CSS is complex, and the section in Chapter 7 provides no more than a brief (albeit useful) overview. If you are interested in learning more about style sheets, I suggest you buy a book on the subject—my own HTML Stylesheet Sourcebook would, of course, be an excellent choice. However, to be a little less biased, additional CSS book references are found at the end of Chapter 7.

HTML as an Extensible Language

HTML is designed to be extensible. This simply means that new features, commands, and functionality can be added to the language without “breaking” older documents that don’t use these new features. In fact, HTML is a rapidly evolving language, with new features being added on a regular basis. This book summarizes most of the current and forthcoming commands, and provides references to other sources that will allow you to keep up with the changes.

Since HTML is constantly evolving, it is important to have a way of indicating the version of the language being used. This is done through the version number of the HTML specification. The very first definition of HTML was called Version 1, or HTML 1.0. This quickly evolved into the next “definitive” version of HTML, known as Version 2, or HTML 2.0, and from there to HTML 3.2. All browsers, at a minimum, support the HTML 3.2 standard. The newest “definitive” version of HTML is known as HTML 4.0. This standard is described in detail in Chapters 6 and 7. Note, however, that many of the newest features of HTML 4 are not widely supported. Chapters 6 and 7 are careful to note where this is the case.

As mentioned, HTML is a moving target, and there is much effort underway to add new features and improve old ones. Chapter 7 discusses many of these up-and-coming changes, in addition to advanced issues such as FRAMEs, document scripting (e.g., JavaScript and VBScript) and style sheets. However, authors should be aware that if they use some of the advanced features discussed in Chapter 7, there will be people who cannot properly view the document content.

Overview of the HyperText Markup Language

So what does an HTML document look like? A simple example is shown in Figure 1.1. As you can see, this looks like a plain text document. In fact, that is exactly what it is—an HTML document contains only the printable characters that you ordinarily type. Consequently, you can prepare an HTML document using a simple text editor, such as the NotePad editor on a Windows PC, TeachText on the Macintosh, or vi on a UNIX workstation. You don’t need a special word processor or fancy HTML editor to create HTML documents—although, of course, such tools can speed up the writing process!

Markup Elements and Tags

The things that make an HTML document special are the HTML markup tags. These are strings of text enclosed by a less than and greater than sign (<...>), and are the markup instructions that explain what each part of the document means. For example, the tag <H1> indicates the start of a level 1 heading, while the </H1> tag marks the end of a heading of level 1. Thus, the text string

<H1>This is a Heading</H1>

marks the string “This is a Heading” as a level 1 heading (there are six possible heading levels, from H1 to H6). Note how a forward slash inside the tag indicates an end tag.

An HTML document is said to be composed of elements. For example, the string

<h1>This is a Heading</H1>

is an H1 element, consisting of an H1 start tag, the enclosed text, and an H1 end tag. You will also often see an H1 element referred to as the container of a heading, since the start and stop tags contain the text that makes up the heading.

Some elements, instead of being containers, are empty. This simply means they do not affect a block of text and do not need an end tag. An example is the BR element in Figure 1.1, in the line:

some kind of <STRONG> exciting <BR> fact</STRONG>...

The tag <BR> forces a line break at the location of the tag, just after the word “exciting” (see Figures 1.2 and 1.3). The BR element does not affect any enclosed text (a line break does not “contain” anything), so an end tag is not required.

Tag Names Are Case-Insensitive

Note that the names inside the tags are case-insensitive, so that <h1> is equivalent to <H1>, and <STRONG> is equivalent to <StROng>. However, capitalization is recommended to make the tags stand out clearly (to you, as Web page author) relative to the text being marked up.

Element Attributes

Sometimes, an element takes attributes that define properties or special information about the element. Attributes are much like variables and are usually assigned values that define these special properties. For example, the element

<H1 ALIGN=“center”>This is a Heading</H1>

takes an ALIGN attribute with the value “center,” which states that, where possible, the heading should be centered on the display. Note that attributes only appear in the start tag of an element.

Another example is found in the IMG element, used to include an image within an HTML document. An IMG element appears via the tag:

<IMG SRC=“filename.gif”>

The SRC attribute specifies the name of the image file to be included in the document (actually a Uniform Resource Locator [URL] “pointing” to the image file—URLs are discussed in Chapter 2 and, in detail, Chapter 8). The attribute name, like the element name, is case-insensitive. Thus the above line could equally well be written as either of:

<iMg src=“filename.gif”>
<iMg SrC=“filename.gif”>

However, the value assigned to an SRC attribute is case-sensitive; case-sensitivity can be preserved by enclosing the string in quotation marks. As you may have noticed, the IMG element is empty (like the BR element), since it merely inserts an image and does not affect a block of text.

HTML as a Structured Language

HTML is a structured language, which means that there are rules for where elements can and cannot go. These rules are present to enforce an overall logical structure upon the document. For example, a heading element like <H1>...</H1> can contain text, text marked for emphasis, line breaks, inline images, and hypertext anchors (discussed in Example 2), but it cannot contain any other HTML element. As a result, the markup

<H1><H2>...text ... </H2></H1>

is invalid. Obviously, it does not make sense for a heading to “contain” a list or another heading, and the HTML language rules reflect this reality. In addition, elements can never overlap—this means that tag placement like

 --------------------------------------------
|      ---------------------------------------|-------
|     |                                       |       |
|     |                                       |       |
|     |                                       |       |
<EM> <H2>  EM and H2 overlap -- this is illegal </EM> </H2>

is illegal. There are many such structural rules; they are given in detail in Chapters 6 and 7. This chapter and Chapter 2 illustrate the most obvious cases.