Marc Andreessen's HTML — Element Glossary

This is a no-CSS, no-frills glossary of the tags described in NCSA's A Beginner's Guide to HTML (1993) and the Mosaic 2.0 Fill-Out Form Support page. Each entry shows the tag, the 1993 description of what it looked like, and a live default browser rendering.

(The single onsubmit="return false" on the form is only there so pressing Submit/Reset does not actually go anywhere.)

1. Document Structure

<HTML> — the root element. No visible effect.

<HEAD> and <BODY> — separate the document header from the document body. They do not change the on-screen appearance, but help Mosaic and other browsers know which part is which.

<TITLE> — the document title. It is shown in the window title bar or tab, not inside the page itself. The title of this page is shown in the tab above.

2. Headings

Six levels, numbered 1 through 6, with 1 the most prominent. Browsers render them in larger and/or bolder fonts than body text.

<H1> Level-one heading

<H2> Level-two heading

<H3> Level-three heading

<H4> Level-four heading

<H5> Level-five heading
<H6> Level-six heading

3. Paragraphs and Rules

<P> — paragraph separator. Browsers end the current paragraph and insert a blank line before the next one.

This is the first paragraph.

This is the second paragraph.

<BR> — forced line break with no extra space between lines. Commonly used for postal addresses:

National Center for Supercomputing Applications
605 East Springfield Avenue
Champaign, Illinois 61820-5518

<HR> — produces a horizontal rule the width of the browser window.

4. Links

<A HREF> — a hypertext link. Browsers highlight the linked text, usually with color and/or an underline.

Here is a link to example.com.

<A NAME> — a named anchor, used as a target for links. It is not itself visible.

<A NAME="anchor"> (This link jumps to the anchor.)

5. Lists

<UL> / <LI> — unnumbered (bulleted) list.

<OL> / <LI> — numbered (ordered) list.

  1. oranges
  2. peaches
  3. grapes

<DL> / <DT> / <DD> — definition list: a term and its definition.

NCSA
The National Center for Supercomputing Applications, located on the campus of the University of Illinois at Urbana-Champaign.
Cornell Theory Center
CTC is located on the campus of Cornell University in Ithaca, New York.

Nested lists — lists can be nested inside <LI> items.

6. Preformatted Text, Quotations, and Addresses

<PRE> — preformatted text: rendered in a fixed-width font with spaces, tabs, and line breaks preserved.

      #!/bin/csh
      cd $SCR
      cfs get mysrc.f:mycfsdir/mysrc.f
      fc -O2 -o mya.out mysrc.f
      mya.out

<BLOCKQUOTE> — extended quotation. Browsers usually indent it from the surrounding text.

I still have a dream. It is a dream deeply rooted in the American dream.

I have a dream that one day this nation will rise up and live out the true meaning of its creed.

<ADDRESS> — author/contact information. Usually rendered in italics. (Not for postal addresses; use <BR> for those.)

A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu

7. Logical Character Styles

Logical styles tag text by meaning and leave the exact rendering to the browser.

<DFN> for a word being defined (typically italics).
<EM> for emphasis (typically italics).
<CITE> for titles of books, films, etc. (typically italics).
<CODE> for code snippets (fixed-width font).
<KBD> for keyboard entry (fixed-width font).
<SAMP> for computer status messages (fixed-width font).
<STRONG> for strong emphasis (typically bold).
<VAR> for a variable the user should replace (typically italics).

8. Physical Character Styles

Physical styles request a specific appearance.

<B> for bold text.
<I> for italic text.
<TT> for typewriter (fixed-width) text.

9. In-line Images

<IMG> — an image placed next to text. By default the bottom of the image is aligned with the text line, as in this paragraph red square. Use the ALT attribute for text-only browsers.

With ALIGN=TOP, the text aligns with the top of the image: red square.

With ALIGN=MIDDLE, the text aligns with the middle of the image: red square.

10. Fill-Out Forms (Mosaic 2.0)

<FORM> — wraps a fill-out form. It is not automatically visually different from surrounding text; <HR> is recommended before and after.

<INPUT TYPE=TEXT> — single-line text entry field.

<INPUT TYPE=PASSWORD> — text entry where characters are shown as asterisks.

<INPUT TYPE=CHECKBOX> — a toggle button, on or off. Checked Unchecked

<INPUT TYPE=RADIO> — one-of-many toggle button. Radios with the same NAME are grouped. Vanilla Chocolate Strawberry

<INPUT TYPE=SUBMIT> and <INPUT TYPE=RESET> — pushbuttons that submit or reset the form.

<INPUT TYPE=IMAGE> — an image that also acts as a submit button.

<SELECT> / <OPTION> — pop-up menu (or scrolled list if SIZE is greater than 1).

Single choice:

Multiple visible (scrolled list):

<TEXTAREA> — multi-line text entry field with scrollbars.

Glossary based on NCSA's "A Beginner's Guide to HTML" and "Mosaic for X version 2.0 Fill-Out Form Support" / html.aidenhuang.com