HTML Basics

Contents:

What is HTML?
What are HTML Tags?
How to format HTML documents
- Line Breaks and lines

HTML is a simple markup language. Here is a simple HTML document:


         <HTML>
         <BODY>
         Hello World!
         </BODY>
         </HTML>

It looks like this.

Tags

A tag describes something about the document.
Tags are enclosed in angle brackets, <like this>.

Tags come in two varieties: single tags (aka empty tags) and pairs of tags. The difference is that a single tag occurs on its own, while a pair of tags must have an open and closing part. The closing part is just like the opening except that it is prefixed by a slash.

Single tags are used for separators or for inserting a single item. They do not have a matching closing tag. For example, some common single tags are:

 marks the end of a paragraph.
[ok - this isn't really true, it marks the start of a paragraph, and really has a matching end tag to mark the end, but this usage isn't widely supported yet, but it is what the standard says]
  marks the end of a line. (BR stands for line BReak.)
<HR> marks a Horizontal Rule. (A line across the page.)

All the tags in the first example are pairs.

<BODY> marks the start of the main document.
</BODY> marks the end of the main document.

Some other pair tags are:

 and  for emphasis.
 and  for bold.
 and  for italics.
<H1> and </H1> for headings.

We also have a complete list of HTML tags. Note that pairs may be nested, but you must nest them properly:


    <B>This is <I>important</I> stuff</B> you need to know.


    This is important stuff you need to know.

Formatting

All formatting is done by writing HTML tags in the document. The viewer ignores all the normal text formatting like line breaks and text breaks and instead uses the tags to mark-up how the document should look.

For example: all line breaks are treated as a space, so having your document formatted like this:


     This is one paragraph.  It contains all sorts of information.
     We want to keep it separate from the other paragraph.

     This is another paragraph.  It is <EM>totally</EM>
     unrelated to the first.

will look like this when viewed over the Web:
/======

This is one paragraph. It contains all sorts of information. We want to keep it separate from the other paragraph. This is another paragraph. It is totally unrelated to the first.

$\======$

Not pretty is it? - So we use paragraph marks to separate paragraphs of text. The above then becomes:


     This is one paragraph.  It contains all sorts of information.
     We want to keep it separate from the other paragraph.
     <P>
     This is another paragraph.  It is <EM>totally</EM>
     unrelated to the first.

which looks like you would expect:
/======

This is one paragraph. It contains all sorts of information. We want to keep it separate from the other paragraph.

This is another paragraph. It is totally unrelated to the first.

$\======$

Line Breaks and Rules

One problem is that paragraph marks tend to insert extra space between the lines to indicate the paragraph break. This is a pain when writing addresses and so on, so you can use line breaks instead:


       Fred Foonly <BR>
       <I>Aventura Ave 23<BR>
       Palo Alto, CA.</I>

which comes out of the viewer looking like this:

/======

Fred Foonly
Aventura Ave 23
Palo Alto, CA.

$\======$

You can put a horizontal rule or line break wherever you could put a paragraph break.


       Thus endeth the story<HR><B>Credits</B><P>
       The evil jester was played by ....

Thus endeth the story

Credits

The evil jester was played by ....

$\======$