Search this book | Previous | Table of contents | Next

Basic HTML tags

This section describes the rudimentary HTML tags.

Creating HTML documents is a lot like using the old word processing program WordStar. (Remember WordStar?) For example, to print a word in boldface type using WordStar, the user would first select text from the screen. Then the user would enter a code like "^b." This code would be inserted before and after the selected text. When the document was printed, WordStar would interpret the "^b" and print boldface letters until another "^b" was encountered.

HTML works in a similar fashion. The author goes through his or her document surrounding text with special codes denoting content. As HTML editing software matures, there is less and less of a need to know HTML tags, but until this comes to complete fruition, it is a good idea to have a knowledge of the HTML codes themselves.

Reserved characters

HTML tags are always delimited with the less than (<) and greater than signs (>). Therefore when you want to use these symbols in your HTML document, you need a special way of displaying those characters. This is why the less than and greater than symbols are reserved characters.

If you want to insert the less than or greater than symbols into your text, then you need to insert an "entity" representing this symbols instead. The entity for less than (<) is < and the entity for greater than (>) is >. Consequently, when you insert "<" or ">" into your text, then the less than or greater than symbols will be displayed.

Similarly, since the ampersand (&) is used as an "escape" character for entities, there need to be a way of "escaping the escape." Thus, the ampersand can be displayed using the entity "&". The double-quote is another symbol that is used in HTML tags and needs to be escaped as well. Consequently, if you want to insert quote marks into your HTML documents, then you should use the entity """ instead. (Fortunately for the people who create HTML by hand, many WWW browser do not get confused when quote marks appear in the HTML code.)

There are a whole slew of additional entities you can use in your HTML documents. Many of these entities represent non-English characters. You are encouraged to read Appendix A for a list.

Structure tags

The basic structure of an HTML document looks like this:

<HTML> <HEAD> <TITLE>My first HTML document</TITLE> </HEAD> <BODY> Hello, World! </BODY> </HTML>

All tags are case-insenstive. Consequently, each of the tags here (<HTML>, <HEAD>, <TITLE>, </TITLE>, <BODY>, </BODY>, and </HTML>), as well as any other tag, can be written in lowercase letters or even a combination of upper- and lower-case letters. Furthermore, all carriage return sequences are ignored by WWW browsers (with one exception described later). Thus, the text above could have been written like this and will be rendered exactly the same way:

<html><head><title>My First HTML Document</title></head><body>Hello, World!</body></html>

The most important thing about this example is the tags themselves. They are used to outline the basic HTML document. The <HTML> and </HTML> tags define the document as an HTML document; the <HEAD> and </HEAD> tags denote the leading matter of a document; the <TITLE> and </TITLE> tags specify the document's title; and the <BODY> and </BODY> tags specify the location of your content. Notice how the second tag of each tag pair is identical to the first tag except the second tag includes a backward slash ("/"); the backward slash denotes the completion of a logical formatting option.

Creating paragraphs

Since WWW browsers (in most cases) ignore blank lines, HTML provides a tag to denote paragraphs, <P>.

The paragraph tag inserts a blank line between the text proceeding the tag and after the tag. Do not expect to insert multiple paragraph marks into our documents and expect to get multiple blank lines. That is the purpose of the next tag.

Line breaks

The use of the line break tag (<BR>) is one way to force a carriage-return and line feed effect into your documents. It is very useful when you want to make sure a sequence of lines always begin at the left-hand side of page and you don't want blank lines between each item in the sequence. This was the technique used in the very first example above. The HTML looks like this:

<HTML><BR> <HEAD><BR> <TITLE>My first HTML document</TITLE><BR> </HEAD><BR> <BODY><BR> Hello, World!<BR> </BODY><BR> </HTML><BR>

If you want to create a sequence of blank lines in your documents, then insert a sequence of line breaks as in <BR><BR><BR><BR><BR>.

Headings

Headings are a means of marking off sections in your document. There are six levels of headings numbering 1 through 6. The first heading (<H1></H1>) is meant to be used to denote the broadest heading. Whereas the sixth heading (<H6></H6>) is used to denote the most specific.

Like most of the HTML tags, these tags are intended to surround lines of text, usually a single line. Here are six lines using the headings tags:

<H1>Heading 1</H1> <H2>Heading 2</H2> <H3>Heading 3</H3> <H4>Heading 4</H4> <H5>Heading 5</H5> <H6>Heading 6</H6>

Here is how those codes get rendered:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Just because heading tags render text in large fonts, do not use heading tags to denote emphasis or important concepts. Use heading tags to create headings.

Horizontal rulers

Horizontal rulers (<HR>) are another way of separating sections of your documents from other sections. This tag does not surround any text; this tag is used just like the paragraph (<P>) and line break (<BR>) tags. The following HTML code illustrates this point:

<HR><HR>

Here is what this sort of HTML creates:

Judicious use of the <HR> tag makes your HTML documents easier to read.

Preformatted text

There are times when you will want to display some sort of table or chart in your HTML documents. One way to satisfy this need is with <PRE>...</PRE>, the preformatted tag.

By surrounding text with the preformatted tag in your HTML, the carriage returns and spaces within the text will be retained. Unfortunately (or fortunately), the text will most likely be displayed in some sort of mono-spaced font.

For example, using the preformatting tag you can create a simple table. The desired output looks like this:

    1  2  3
   ---------
A | *  *
B |       *
C |    *

The corresponding HTML looks like this:

<PRE>    1  2  3
   ---------
A | *  *
B |       *
C |    *</PRE>

Remember, when you use the <PRE> tag, your WWW browser retains the spaces and line breaks of the formatted text.

Comment tags

There is a way of inserting text within your HTML documents and eliminate the possibility of having this text be interpreted by the WWW browser. This is called commenting and is a way of "documenting" your documents. The comment tag looks like this:

When inserted into your HTML, it looks like this:

Pretty exciting, huh?

Search this book | Previous | Table of contents | Next

This page was first published on September 26, 1995. Feel free to send comments.