(Note that this document is HOPELESSLY out of date. It was accurate and current with respect to Mosaic2.4, which was, lets see, almost a decade ago? I doubt any of the links work. I'm not going to check and remove them, I'll leave them there as a historical reference.)

HTML Quicker Reference

General
  <HTML> ... </HTML>           Encloses the entire document and
                                 overrides other filetyping mechanisms.
  <HEAD> ... </HEAD>           Encloses the header (TITLE)
  <TITLE> ... <TITLE>          The title of the document
  <BODY> ... </BODY>           Encloses the body of the document.
  <Hn> ... </Hn>               Section heading, n=1 (biggest) to 6
  <PRE> ... </PRE>             Encloses block of text to be shown verbatim.
                                 (Fixed width font; line feeds are honored.)
  <BLOCKQUOTE> ... </BLOCKQUOTE>
                               Encloses block of text that is a quote.
  <ADDRESS> ... </ADDRESS>     Information about the author, last update, etc.
Lists
  <UL><LI>... </UL>            Unordered list
  <OL><LI>... </OL>            Ordered list
  <MENU><LI>... </MENU>        Menu list
  <DIR><LI>... </DIR>          Directory list
    <LI>                       Precedes each item in the above lists
  <DL><DT>... <DD>... </DL>    Definition list
    <DT>                       Precedes each item title in DL
    <DD>                       Precedes each item definition in DL
Anchors/Links
  <A NAME="..." HREF="URL"> ... </A>
                               Creates a link (HREF) or anchor (NAME) or both.
Inlined image
  <IMG ALIGN="..." SRC="URL" ALT="...">
                               Inserts an image from SRC, or text
                                 from ALT if the image can't be used.
                                 ALIGN is one of top, middle, bottom (default)
Text flow
  <BR>                         Force a line break
  <P>                          Add a paragraph break
  <HR>                         Horizontal rule (pseuedo page break)
Generic Font Changes
  <DFN> ... </DFN>             Word to be introduced/defined
  <EM> ... </EM>               Emphasis
  <CITE> ... </CITE>           Citation of book, article, movie, etc.
  <CODE> ... </CODE>           Piece of computer code
  <KBD> ... </KBD>             Example of keyboard entry
  <SAMP> ... </SAMP>           Example of computer output
  <STRONG> ... </STRONG>       Strong emphasis.
  <VAR> ... </VAR>             Emphasized font.
Specific Font Changes
  <B> ... </B>                 Bold font.
  <I> ... </I>                 Italic font.
  <TT> ... </TT>               Typewriter font.
Special Characters
  &#38;                        &
  &#60;                        <
  &#62;                        >
Comments
  <!-- Comments go here -->    Stuff in a tag like this is ignored. (It's
                                 not really a tag, its length is unlimited)
                                 It can NOT include other HTML tags.
Indexing/Forms
  <ISINDEX>                    This document is a searchable index.
                                 This is used separately from forms.
  <FORM ...> ... </FORM>       Encloses the entire form.
    ACTION=                      URL to use when form is complete
    METHOD=                      GET or POST (must be uppercase)
    ENCTYPE=                     encoding, mostly unused
  <INPUT ...>                  Some type of input field
    TYPE=                        textarea, password, checkbox, radio, select,
				       button, submit, reset, hidden, jot
				       (must be lowercase)
    NAME=                        name of the field
    VALUE=                       value of button (label for submit and reset)
    CHECKED                      (checkbox/radio) this item selected by default
    SIZE=                        displayed field width, in characters
    MAXLENGTH=                   maximum field width, in characters
  <SELECT ...><OPTION ...> ... </SELECT>
                               A list of items to select
    NAME=                        name of the field
    SIZE=                        use scrollable list with size elements
    MULTIPLE                     multiple selections allowed
    <OPTION ...>               Precedes each item in the option list
      SELECTED                   This option is selected by default
  <TEXTAREA ...> ... </TEXTAREA>
                               A multiline text field, enclosed text is
			         the default value displayed.
    NAME=                        name of the field
    ROWS=                        number of displayed rows
    COLS=                        number of displayed columns
URLs
  protocol://host:port/path#anchor
                               protocol is one of http, gopher, ftp,
                                 file, telnet, wais, news, mailto
                                 #anchor is optional, :port defaults to 80
                                 if left out.
  path#anchor                  Uses the protocol, host, and port of the
                                 current document.
  #anchor                      Jump to another place in the current document.

                               FREE MARS

Additional Information

Note that much of the above information is on the de facto behaviour of Mosaic 2.4, particularly the stuff relating to the FORMS.

General Rules

Basic document

Of the stuff below, only the title is absolutely necessary. And the HTML tag is useful if you don't want to name your file *.html.
  <HTML>
  <HEAD>
  </HEAD>
  <TITLE>Title of the document<TITLE>
  <BODY>
    Body of the document
  </BODY>
  </HTML>
Keep in mind that it is common to repeat the TITLE as a header for the document. This is because Mosaic set a de facto standard that titles are not shown in the document. Let us all bow and kiss Mosaic's feat.

Headings

In Mosaic for X, the 1-3 are large enough to be considered headers, other browsers use much larger fonts than Mosaic for X. Almost all browsers separate the header onto a line of its own.

Anchors/Links

Quotes around the NAME and the HREF parameters aren't usually necessary, but are a good habit to get into (especially for HREFs).

Originally the NAME was an absolute requirement. Nowadays, apparently you can get by without it. If used, the name should always start with a letter. Names are case sensitive (I think).

People recommend relative links, I recommend caution. You have to change relative links less often, but when you do have to change them, it's harder to do. I'm happy with absolute path names, because I know I can write a script to fix things if I move things around. Also keep in mind that the way .. works is still both server and client dependent. In general, .. will be in terms of the logical web file system, rather than the physical file system. This is true because the client should convert things to full path names before making the request.

If you can, use cut and paste to include an HREF; this protects against typos. If you only want an anchor, but not a link, don't include any HREF.

Lists

Just a couple of clearer examples.
  <OL>
  <LI>This is an item.
  <LI>This is another item.
  ...
  </OL>

  <DL>
  <DT>This is an item.
  <DD>This is an item description.
  <DT>This is another item.
  <DD>This is another item description.
  ...
  </DL>
MENU and DIR have fallen out of favor, even though they are useful. They would normally be displayed as multi-column lists, which Mosaic doesn't support, which is why they aren't used. Also, Mosaic screwed up the DL lists, as the DD starts on a different line than the DT. Mosaic is the web, all bow to Mosaic.

Lists can be nested, with nice results on most browsers.

Inlined Images

The orignal idea was that inlined images would be used to produce special characters and such, in a similar size as the font. That's why they are inlined, rather than a separate block. Well, people use them as figures, big surprise.

Gifs are most universally accepted. X11 bitmaps are allegedly supported by all Mosaic browsers, though I haven't seen this.

Remember that for any 8 bit display, the inlined image will be shown with very few colors (especially if there are alot of images), whereas external images will show with the maximum available colors. This is also browser dependent. In general, if you are going for high-resolution images, inline only a small sample (thumbnail) as a link to the full size image.

Too many inlined images take forever to load. Remember, they'll always load fastest from your own site, everyone else will have it worse than you. Also, smaller images load faster. Use thumbnails.

A single larger image will also load faster than several smaller images.

Preformatted Text

Strangely, the line feed immediately following the <PRE> tag is ignored, as is the one immediately preceding the </PRE> tag. While this is common, it is strictly a choice of the browser, and can even be interpeted as incorrect behaviour. But it is so common that I doubt it will ever be changed.

Font Changes

The generic font changes usually map to one of the three specific font changes. The generic font changes are recommended.

Forms

You can't make forms work without being able to modify and/or configure the web server that the form points at. Jot is an undocumented feature. It seems the the INPUT types of "select" and "textarea" correspond to the SELECT and TEXTAREA tags, although since INPUT has no ending tag, this isn't clear to me how they work. TYPE=hidden is used to store state, in the VALUE parameter. All of the types must be lower case.

For More Information

Lots of good sources of information on HTML are on the web. Below are additional sources of information.

Introductory Documents

Fill-out Forms

Fill-out Forms Overview

Style Guides

The following offer advice on how to write ``good'' HTML:

Additional References


Written by Tom Fine, who likes and uses Mosaic [wow, that really dates this document, doesn't it?], despite the attitude. The section on other sources was largely stolen from NCSA's Beginner's guide to HTML.