HTML From the Ground Up

by L. Downs

Odds and Ends

If you've ever written a computer program, you already know that what seemed to make perfect sense at the time you wrote it can easily become gibberish when you return to it a few months later. (Ever looked at a note you wrote yourself a year ago and realized you couldn't read your own handwriting and have no idea what it says?) For this reason all computer languages make some provision for adding comments--text which has no effect on the program (or the way the page displays, in the case of HTML) but which can be used to clarify why something was written the way it was. It's very important to add these comments with the correct punctuation; otherwise the browser may attempt to display them (sometimes with embarrassing results).

In HTML, you enclose comments inside this tag:  like this, for example:

<!--    This is a comment which will have no effect

on the way your page displays    -->

Be sure to put several spaces on either side of the text of your comment, just to be on the safe side. You can put a comment anywhere in your HTML code, except that you can't put one between a pair of <TITLE> tags.

IMPORTANT: You can't put any tags inside a comment tag.

You can break up your comment tag with as many carriage returns or other white space as you want. For example, this is perfectly legal:

<!--


This is a comment which


will have no effect


on the way your page displays


-->

So far the only tags you've seen placed inside the HEAD of an HTML document (i.e. between the <HEAD> and </HEAD> tags) are the <TITLE> and </TITLE> tags. However, you may encounter several others, even though at this point you don't need to know how to use them. Among the most common of these are the <SCRIPT> and </SCRIPT> tags, which are used to enclose JavaScript code or other computer code which is actually run by the browser and is not HTML. You may encounter chunks of code between these two tags in the HEAD and/or the BODY of your document. For now be careful not to alter these tags or the code between them in any way or you risk disabling special features of the page you're editing.

Although more recent browsers know not to display any of the code between these two tags, some older browsers may do so. For this reason you may find that the code between these two tags is also encased in comments, using the comment tag above. Again, just don't mess with any of it and you'll be fine.

Another tag commonly found in the HEAD of a document is the <META> tag. The "meta" is short for "metadata," which means "information about information." In practice this tag is most often used to define the keyword search terms that apply to the document, and is used by many search engines when indexing pages. It can also contain information such as the author of the page, etc. The information is provided inside the tag in the form of attributes such as NAME and CONTENT.

There are two pairs of tags whose only purpose is to mark off a section of a page. These are the <DIV> and </DIV> tags, and the <SPAN> and </SPAN> tags. By themselves these tags have absolutely no visible effect at all. Think of them as forming containers, making it possible to do "things" to the code enclosed by them. For example, if you mark off a block of text with the <DIV> and </DIV> tags, you can apply a "style" to that block with style sheet commands (such as setting the text size, color, font face, etc. of all text within that block). For now, just be aware that the <DIV> and </DIV> tags are used to mark off a block of text (such as a complete paragraph or more), while the <SPAN> and </SPAN> tags block off a bit of text within a sentence or paragraph.

The <P> and </P> tags can be used for this purpose as well. The <P> tag is often used by itself as a way of inserting two carriage returns (the equivalent of two <BR> tags), but this is falling into disfavor for several reasons. First, it's confusing: placing several <P> tags in a row will not give you multiple carriage returns, as all but the first <P> tag will be ignored. (Use multiple <BR> tags for this purpose instead.) Second, when style sheets are used browsers become much pickier about correct HTML, and tend to react badly to <P> tags lying around without any corresponding </P> tags to close them. Instead, use <P> and </P> tags to enclose a paragraph of text in order to apply a style, as you do with the <DIV> and <SPAN> tags.

At the opposite end of the spectrum are the <PRE> and </PRE> tags, which will display the enclosed text with all white space and line breaks intact, and usually in a fixed-pitch font (a fixed-pitch font is one in which all the letters are the same width, such as Courier). This command is particularly useful if you are copying large chunks of text which have already been arranged into columns or otherwise PREformatted. (Note that this will only work if the original text was also a fixed-pitch font.) Usually word-wrap is disabled for preformatted text, which can result in text scrolling off the right side of the screen.

Last of all, it's considered good practice to begin all HTML documents with a DOCTYPE tag, which describes which HTML standard is being followed and how strictly. This tag is always placed at the very beginning of the document, even before the <HTML> tag. It should look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

Note the exclamation point right after the first pointy bracket; it's essential.

Basically this tag tells any software accessing this page (browsers and other specially written software) that this page follows the HTML 4.01 standard but includes some tags and attributes which are "deprecated" ("Deprecated" in this context means "not approved of by the idealists that set these standards but which in real life are essential in order to make your pages work with the browsers actually out there." At least IMHO.).

There's another version of this which should be used if your pages include frames, which is

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

        "http://www.w3.org/TR/html4/frameset.dtd">

In the next lesson we'll take a closer look at text.

Terms to know from this lesson

Comment () tag: Contains text which is not visible to the viewer of the page, and which has no effect on any of the page's code.

<SCRIPT> and </SCRIPT> tags: Enclose computer code written in a language other than HTML, and which instead of being displayed to the user is actually run by the browser. For example, JavaScript subroutines usually appear within these tags.

<META> ("metadata") tag: Encloses information of various kinds about the page, such as keywords, author information, etc.

<DIV> and </DIV> tags: Enclose a block of text and/or graphics in order to apply some kind of modification, most often style sheet information.

<SPAN> and </SPAN> tags: Enclose less than a block of text and/or graphics (such as a phrase or sentence) in order to apply some kind of modification, most often style sheet information.

<P> and </P> tags: Enclose one paragraph of text, sometimes in order to apply some kind of modification, most often style sheet information. A blank line will be added before and after the paragraph.

Fixed-pitch font: Font (typeface) in which all of the characters are of equal width. Courier is an example of a fixed-pitch font.

<PRE> and </PRE> ("pre-formatted text") tags: Text enclosed between these tags is displayed "as is," i.e. with existing line breaks, without line wrap, with white space (spaces, carriage returns and tabs) intact, and in a fixed-pitch font.

<!DOCTYPE> tag: Contains information about the HTML standard being used and how strictly it's being followed.

Portions of this tutorial originally appeared in Technotes, a publication of the UNLV Libraries, and are copyright by the University of Nevada, Las Vegas; used by permission. All remaining material © 2003 Lamont Downs.