HTML Quick Reference


[HOME] _

HTML Quick Reference

Based on the text
Larry Aronson, HTML Manual of Style. Emeryville, Ca.: Ziff-Davis Press, 1994. ISBN 1-56276-300-8.
Updated with information from
HTML 3 Manual of Style, 1995. ISBN 1-56276-352-0. by the same author and publisher. My thanks to Larry for providing me a copy of his book from which to update this document.
N.B.: By downloading any files, you agree to the following licensing agreement.

Table of Contents entries, and tags in the various sections below, that are in BOLDFACE have been updated to reflect changes in HTML3.


[HOME]

TABLE OF CONTENTS

  1. General Principles

  2. General Codes
  3. General Formatting Codes
  4. Attributes
  5. Text Styles
  6. Text Block Styles
  7. Documentation & Manual Styles
  8. Lists
  9. Tables
  10. Anchors & Links
  11. Images
  12. Forms
  13. Special Characters
  14. Appendices

  15. Summary of HTML3 Changes; Netscape Extensions
  16. Useful Links
  17. Keyword Index (unfinished)

GENERAL PRINCIPLES

Hierarchically these should be listed here, but practically these are difficult to carry out until the remainder of this document is understood. Thus, they are listed later in this document.


GENERAL CODES

<HTML></HTML>
Signal HTML section (usu entire document), which contains:
<HEAD></HEAD>
Header, which in turn contains <TITLE> plus maybe others

<BODY></BODY>
Body of document.
HTML3 Available attributes:
BACKGROUND=
BGCOLOR=
TEXT
LINK
VLINK
ALINK
Many browsers don't care much about the presence or absence of these.

[Table of Contents] [Keyword Index]

GENERAL FORMATTING CODES

<!-- text -->
comments
<H1></H1> .. <H6></H6>
Headings of various levels. Paragraph breaks are implied both before and after the heading.
HTML3
These may now take attributes, e.g.:
<H3 ALIGN=center>
<P> [</P>]
Paragraph break. "Creates a break where ordinarily there would be none." Indentation, if any, is up to the browser.
HTML3
1. No longer a "breaking" code (empty tag) but now is a "container" code. (In HTML3, all content is marked up.)
2. May now take attributes, e.g. ALIGN.
<BR>
Line break. Next line begins at the left margin.
<HR>
Horizontal rule (line).
Netscape
recognizes additional attributes:
SIZE=n
Height of the line in pixels.
WIDTH=nn%
Width of the line.
ALIGN=left*|center|right
Alignment of the line (if WIDTH < 100%).

[Table of Contents] [Keyword Index]

ATTRIBUTES

General Attributes

ALIGN=left*|center|right|char|top|middle|bottom
Aligns text to left (default), center, or right.
Netscape
Netscape and some other browsers recognize <CENTER></CENTER>
ALIGN=char CHAR="_"
Aligns text on a given character, defaults to ".".
CLASS
Assigns class name. Class names are referenced in style sheets.
CLEAR=left|right|all
Used with content that flows around images/figures. Browser spaces down page until the specified margin is clear before placing further content. horizontal rule.
ID
Assigns a name to the enclosed content. This name may then be used as part of a URL to jump to this location (see <NAME>, below).
LANG
Language to be applied to tag's content.
NOWRAP
Wrapping is turned off. All lines must be broken with <BR>
Netscape
Extension <NOBR></NOBR> performs same function.

Specific Attributes

Lists

PLAIN
HTML3 eliminates the number/bullet.
COMPACT
HTML3 reduces the amount of whitespace.
SEQNUM
HTML3 sets value for 1st list item.
CONTINUE
HTML3 continues list numbering.
TYPE="1"*|"A"|"a"|"I"|"i"
Netscape, ?HTML3 Numbering style.
START
Netscape same as HTML3 SEQNUM attribute.

Horizontal rules

SIZE=n
Netscape Height of a horizontal rule.
WIDTH=nn%
Netscape Width, relative to screen, of a horizontal rule.

Tabs

TO="name"
HTML3 Tab stop to which to move.
INDENT=n
HTML3e Move by n en units.

Tables

VALIGN=top|middle*|bottom
HTML3 Controls vertical alignment of table cell text.
BORDER=n
Border width in pixels. Default 0.
CELLPADDING=n
Spacing, in pixels, between text and cell walls.
CELLSPACING=n
Width, in pixels, of cell walls.
FLOAT=left|right
Allows table to 'float', i.e., for text to flow around table. Default is no text flow.
COLS=n
Specified number of columns. Speeds table layout.
FRAME=none*|top|bottom|topbot|sides|all
Control over table's outer border. Default=none if BORDER=0; otherwise, default=all.
RULES=none*|basic|rows|cols|all
Control over individual elements of cell grid. Default=none if BORDER=0; otherwise, default=all.

Anchors & Links

HREF="url"
Provides URL for this anchor.
NAME="url"
Provides a named location within a document.
BASE="directory"
Specifies the base directory for URLs. Must be in the <HEAD>.
TITLE="title"
Provides a title for a directory listing (ftp, gopher).

Forms

METHOD=get|post
Method of returning information.
ACTION=action
What to do with the data.
TYPE=text|radio|checkbox|submit|reset
Data return area of various types.
NAME="key"
Name of the returning variable.
SIZE=size
Size (in characters) of the a text box.
ROWS=rows
# of rows of a TEXTAREA box.
COLS=cols
# of columns of a TEXTAREA box.
VALUE=value
Specifies or overrides value to return.
SELECTED
Identifies the default selection of SELECT box.
MULTIPLE
Alows multiple selections in SELECT box.

[Table of Contents] [Keyword Index]

TEXT STYLES

General Control of Text Style

<EM></EM>
Emphasis; usu. italic or underlined
<STRONG></STRONG>
Strong emphasis; usu. bold
<TT></TT>
Teletype; monospaced font
HTML3
<BIG></BIG>
Use font larger than current size.
<SMALL></SMALL>
Use font smaller than current size.
<Q></Q>
Encloses text in language-appropriate quotation marks.
<S></S>
Strikeout (denoting replaced text, as in legal documents).
HTML2
<STRIKE></STRIKE>
HTML2 Strikeout, replaced by <S></S>

Exact Control of Text Style

<B></B>
Bold
<I></I>
Italic
<U></U>
Underline
HTML3
<SUB></SUB>
Subscript
<SUP></SUP>
Superscript
<TR></TR>
Times Roman: use serif font
<HV></HV>
Helvetica: use sans serif font
Netscape
<FONT></FONT>
Font controls.
<FONT SIZE={+-}1..7>
Changes text to a size larger (+) or smaller (-) than the the current font, in steps from 1 to 7.
<BLINK></BLINK>
Blink text.

[Table of Contents] [Keyword Index]

TEXT BLOCK STYLES

Most (?all) of these imply a paragraph break before and after the text block.

More Common Styles

<ADDRESS></ADDRESS>
Address. Used for signatures, address elements, authorship info at top or bottom of page. Usually italicized and indented or right-justified. Implied <P>; intended for 1 paragraph; use <BR> within. OK to use text styles.
<BLOCKQUOTE></BLOCKQUOTE>
Block Quotation. Usually rendered with right & left indentation. Implies <P> before and after. Use of empty <P> tags within the BLOCKQUOTE is acceptable.
<PRE></PRE>
Preformatted text. Monospaced, line breaks & redundant spaces retained, tabs expanded to 8; for columns, tables; implied <P>
<PRE WIDTH=xx> tells browser maximum line length to expect.
<CITE></CITE>
Citation. For titles, references, usu. italic

Less Common Styles

<NOTE></NOTE>
Note. Used for side notes, extra text. Typically indented, boxed, or in smaller type size. Icon to indicate this may accompany.
<NOTE ROLE=tip|warning [SRC="img.gif"]> is an example.
HTML3
<ABBREV></ABBREV>
Abbreviation.
<ACRONYM></ACRONYM>
Acronym.
<AU></AU>
Author.
<BANNER></BANNER>
Banner. Fixes block of text relative to display window (rather than page).
<DEL></DEL>
Deleted text. (often remaining for reference only)
<FN></FN>
Footnote Text. Typically displayed in a pop-up window when reader clicks on the reference to the footnote. Reference rendered as an internal link: <A HREF="#fn1"> for a footnote ID-ed as <FN ID="fn1">.
<INS></INS>
Inserted text (new relative to previous version, e.g.).
<PERSON></PERSON>
Marks a person's name.

[Table of Contents] [Keyword Index]

DOCUMENTATION & MANUAL STYLES [HTML 2]

<CODE></CODE>
Code; for samples of computer code; monospaced
<VAR></VAR>
Variable; name of a value to be supplied by the user
<KBD></KBD>
Keyboard; sequence of chars to be typed in exactly by user
<SAMP></SAMP>
Sample; sample, a sequence of literal characters
<DFN></DFN>
Definition; defining instance of a term, usu. bold or italic

[Table of Contents] [Keyword Index]

LISTS

Individual items start with <LI> except for definition list. The formatting tags <LI>, <DT>, and <DD> automatically imply <P>. Lists may be nested. No items implying a <P> should be used, e.g., <Hn>, <HR>, <TABLE>, <FORM>.
HTML3
List items should now be enclosed in <LI></LI>. List heading codes are new.
<OL></OL>
Ordered list. Items are numbered.
HTML3
<OL PLAIN> eliminates the numbering.
<OL COMPACT> reduces the amount of whitespace.
<OL SEQNUM> sets value for 1st list item.
<OL CONTINUE> continues next list's numbering where 1st list's numbering left off. Netscape
<OL START> same as HTML3 SEQNUM attribute.
Netscape, ?HTML3
<OL TYPE= > Style of numbering:
<OL TYPE="1"> Numeric (default)
<OL TYPE="A"> Uppercase letters
<OL TYPE="a"> Lowercase letters
<OL TYPE="I"> Uppercase Roman numerals
<OL TYPE="i"> Lowercase Roman numerals

<UL></UL>
Unordered list. Items are bulleted.
HTML3
<UL PLAIN> eliminates the bullets.
<UL COMPACT> reduces the amount of whitespace.
Netscape, ?HTML3
<UL TYPE=circle|square|disc> Style of bullet.

<DL></DL>
Definition List/Glossary. Items composed of paired:
<DT>
term, rendered at the left margin, and
<DD>
definition, rendered indented

<DL COMPACT> will reduce the whitespace used. Use of <P> or <BR> within a <DD> is appropriate; multiple <DD> per <DT> is not.

Unlike <OL> and <UL>, <DL> has no restrictions on style elements within either the <DT> or <DD>. Thus, these have general utility in creating lists of items. Typically, the "term" <DT> item is made a heading, and the "definition" <DD> the descriptive text.

HTML3
<LH></LH>
List header. Now recommended in place of using <Hn> for headings.
HTML2
In the following, HTML3 replaces the HTML2 shown below.
<MENU></MENU>
Menu. Usually for short items, 1 line apiece.
HTML3
Use of <OL PLAIN COMPACT> now recommended.
<DIR></DIR>
Directory. Usually very short, possibly multicolumn, items.
HTML3
Use of <UL PLAIN WRAP=hoziz> now recommended.

[Table of Contents] [Keyword Index]

TABLES [HTML 3]

Previously could be done only with <PRE></PRE>. Simple tables may still look acceptable with this method.
<TAB>
Sets tab stops and moves to tab stops.
<TAB ID="_">
Sets a tab stop at the current position. ALIGN attribute controls the tab stop's behavior.
<TAB TO="_">
Moves to the named tab stop.
<TAB ALIGN=left|right|center|char>
Alignment attribute, controls behavior of tab stop.
<TAB CHAR="_">
specifies the character on which to align, for ALIGN=char
<TAB INDENT=n>
Moves print position n en units. (en = 1/2 the point size of the current font.

<TABLE></TABLE>
Defines a table. The codes below must be contained within these 2.
Netscape, ?HTML3
<TABLE ALIGN=left*|center|right>
Table alignment
<TABLE WIDTH=nn%>
Table width (as % of page width)
<TABLE BORDER=n>
Border width in pixels. Default 0.
<TABLE CELLPADDING=n>
Spacing, in pixels, between text and cell walls.
<TABLE CELLSPACING=n>
Width, in pixels, of cell walls.
<TABLE ROWSPAN=n>
Following text to span n rows.
<TABLE COLSPAN=n>
Following text to span n columns.
HTML3
<TABLE FLOAT=left|right>
Allows table to 'float', i.e., for text to flow around table. Default is no text flow.
<TABLE COLS=n>
Specified number of columns. Speeds table layout.
<TABLE FRAME=none*|top|bottom|topbot|sides|all>
Control over table's outer border. Default=none if BORDER=0; otherwise, default=all.
<TABLE RULES=none*|basic|rows|cols|all>
Control over individual elements of cell grid. Default=none if BORDER=0; otherwise, default=all.

<THEAD></THEAD>
HTML3 Allows application of attributes to table heading only.
<TBODY></THBODYgt;
HTML3 Allows application of attributes to table body only.
<COL>
HTML3 Allows application of attributes to an individual column, e.g.:
<COL> <COL ALIGN=center> <COL ALIGN=char> CLASS codes may also be used.

<TH></TH>
Defines a table header cell. Header text is bold and centered by default.
Netscape, ?HTML3
<TH ALIGN=left*|right|center>
controls placement of table header text
<TR></TR>
Defines a table row.
Netscape, ?HTML3
<TR ALIGN=left*|right|center>
controls placement of table row.
<TD></TD>
Defines a table cell (within a row).
Netscape, ?HTML3
<TD ALIGN=left*|right|center>
Controls placement of table data text. Highest precedence (over row and table body alignment.
<TD VALIGN=top|middle*|bottom>
Controls vertical placement of table data text.
<CAPTION></CAPTION>
Provides the caption for the table. Default: bold, centered above table.
Netscape, ?HTML3
<CAPTION ALIGN=top*|bottom>
controls where caption appears relative to table


[Table of Contents] [Keyword Index]

ANCHORS & LINKS

<A></A>
Anchor or Link. Attributes optional, but NAME or HREF needed to make the anchor/link useful.

<A HREF="URL"> link_text </A>
Link to a document, or a location in a document. See URL syntax below.

<A NAME="URL"></A>
anchor name: place to which a link specified with #anchor is to jump

<BASE HREF="URL">
is used to define the base directory for relative directory addressing, in case one or more files become separated. Must be used in the <HEAD> of the document.

Types and Syntax of URLs (Uniform Resource Locators)

A full URL has the following syntax:
method://server:port/directory/file#anchor
news:alt.xxx.yyy
Any of these parts may be absent if implied by context.

The various parts are:
method
One of: http* | ftp | gopher | telnet | news
server
Server (computer) name. If this is different from the current server, the method must also be specified.
port
Port on that computer. ftp, etc. generally have default port numbers that need not be specified. WWW servers run on port 80 by default; gopher, on 70.
directory
Directory. Default is the current directory. Relative directory addressing is allowed: to link to a document in the current directory, merely use the filename. (This allows you to keep the files organized, say, by subject.) Note that UNIX-style forward slashes ("/") are used to separate directory names regardless of the type of operating system.
file
Name of the HTML file.
anchor
Location within that file, specified with <A NAME="..."> . If no filename is specified, the link is assumed to be in the current document. If no anchor is specified, the link is to the top of the document.

A URL to an ftp or gopher resource ending in a filename downloads that file. A URL to an ftp or gopher resource ending in a directory name displays that directory in a standard format. A title for this listing may be specified with <A HREF="ftp://server.com/directory" TITLE="Title"> </A>


[Table of Contents] [Keyword Index]

IMAGES

<IMG SRC="URL"></IMG>
defines an image and displays it on the page. The SRC attribute is required for the image to display. Other attributes how the image appears on the page:

ALIGN=top*|middle|bottom
alignment of text with the image
ALT="text"
Text string to use to replace image on non-graphical browsers.
ISMAP
Defines image as an interactive map; clicking in image sends cursor coordinates back to a server.

Essential images should be linked. Browsers will generally recognize URLs containing the following extensions:

HTML
Hypertext page
HTM
same, IBM PC version of extension
GIF
Graphics Interchange Format
XIBM
Image, IBM image format
PICT
Image, Macintosh image format
JPEG
Image, compressed Joint P.. Experts Group format
JPG
same, IBM PC version of extension
MPEG
Video, compressed mpeg format
MPG
same, IBM PC version of extension
MOV
Video, Macintosh QuickTime format
AU
Audio, basic audio format
AIFF
Audio, another format

Note that a (generally small) image can serve as the "link text" for a larger image. This is known as a thumbnail. These save on downloading time, as the reader may not want or need the full image. It is good Netiquette to specify the size of the larger image which is being linked. Example:


Click <A HREF="Large_AE.gif">
          Albert
          <IMG SRC="Small_AE.gif" ALT="Einstein" ALIGN=MIDDLE>
      </A>
to see a large (90K) image of the scientist.

[Table of Contents] [Keyword Index]

FORMS [HTML 2,3]

An evolving area, check NCSA and CERN documentation for complete list of features and use.

Standard use includes Reset and Submit button on the form. Reset clears all entered text, Submit sends it. Text is then either sent to an email address or to script (batch file). Common Gateway Interface (cgi) scripts are generally written in Bourne Shell (UNIX), PERL, TCL, C, or AppleScript.

<FORM></FORM>
Begins and ends the form. There may be multiple forms on a page. Requires attributes to be effective.
Attributes
METHOD=get|post
Get is obsolete -- it returned the information in the form of a URL and is likely limited as to maximum length.
HTML3
Post returns the information in "standard" form.
ACTION=URL
What to do with the data, e.g. ACTION="mailto:me@server.org".

<INPUT TYPE=text>
Creates an inline input area; i.e., the input area will "float" with the surronding text. Requires attributes:
NAME="key"
Name of the returning variable.
SIZE=size
Size (in characters) of the box.

<TEXTAREA></TEXTAREA>
Multiple-line text area, e.g., for long comments. The text, if any, between the <TEXTAREA> and </TEXTAREA> codes provides the initial (default) text into the text box for the user to edit; if none is supplied, the box appears empty. Attributes:
ROWS=rows
# of rows
COLS=cols
# of columns

<INPUT TYPE=radio|checkbox VALUE=value>
Creates limited set of available inputs.
TYPE=radio
Creates radio buttons, which allow exactly one choice from a limited set. All radio buttons with the same NAME attribute are grouped together.
TYPE=checkbox
Creates checkboxes, which allow one or more choices from a limited set. Each requires a separate NAME attribute.
TYPE=hidden

<INPUT TYPE=submit|reset>
TYPE=submit
Creates a Submit button. Pushing this button performs the action specified after ACTION.
TYPE=reset
Creates a Reset button. Pushing this button erases all text so that the user can start over again.

<SELECT NAME=name></SELECT>
Creates a pop-up menu with a list of selections from which one or more can be chosen. The selection itself becomes the return value unless overridden.
<OPTION></OPTION>
Identifies one option within a SELECT block. Attributes:
SELECTED
Identifies the default selection. If none, the first selection becomes the default.
MULTIPLE
Alows multiple selections.
VALUE=value
Overrides and directly specifies the return value.

Returned value

A single string is created for the entire form. Input fields are delimited by ampersands (&). Each field within the string starts with the input field NAME, then an equals (=), then the value of that input field. For text boxes, spaces are replaced with plus (+) signs, and trailing spaces are trimmed. Special characters are respresented by a percent (%) followed by the ASCII value.
[Table of Contents] [Keyword Index]

GENERAL PRINCIPLES

  1. Sign and date all documents on the Web. This can be done with an external signature in the form of a link element

    <LINK REV="made" HREF="mailto:me@myserver.com">

    in the heading of the page. Place after <TITLE> but before </HEAD>. REV (reverse relationship) = how this document is related by the object pointed to by the HREF URL. made indicates the email address "made" the document.

  2. World conventions on dates vary, and formats such as 10/1/94 are ambiguous. Use words or abbreviated words for the month, or my favorite and the Chinese/Japanese standard, year-month-day. Largest to smallest unit, just like time and decimal numbers.

  3. Misuse of whitespace, esp. <P>. Browsers do not handle whitespace identically. Do not use <P> with <ADDRESS>, <BLOCKQUOTE>, or <PRE>

  4. Tags that define styles should be inside tags that imply structure. Specifically, avoid:
    • Tags inside a heading, EXCEPT <A HREF="...">
    • Paragraph breaks, explicit or implied, inside a heading. Use <BR>
    • Headings enclosed in tags other than <BODY>, <FORM>, and <HTML>
    • Style tags (e.g. <STRONG>) except for a small part of the heading
    • Obsolete tags:
      <PLAINTEXT> <XMP> <LISTING> <HPx> <COMMENT>

  5. Anchors should preferably be the innermost items of a set of nested tags.
  6. Link text should flow naturally. Avoid the "Click here to find XYZ" syndrome.

[Table of Contents] [Keyword Index]

SPECIAL CHARACTERS

All of these should display except the last, which would not be visible:

&
&amp;
<
&lt;
>
&gt;
"
&quot;
nonbreaking space: a space that forces the 2 words to remain on the same line
&nbsp;

Most of these should display:

à ã
&Atilde; &atilde;
Å å
&Aring; &aring;
Æ æ
&AElig; &aelig;
Ç ç
&Ccedil; &ccedil;
Ð ð
&ETH; &eth;
É é
&Eacute; &eacute;
È è
&Egrave; &egrave;
Ê ê
&Ecirc; &ecirc;
Ë ë
&Euml; &euml;
Í í
&Iacute; &iacute;
Ì ì
&Igrave; &igrave;
Î î
&Icirc; &icirc;
Ï ï
&Iuml; &iuml;
Ñ ñ
&Ntilde; &ntilde;
Ó ó
&Oacute; &oacute;
Ò ò
&Ograve; &ograve;
Ô ô
&Ocirc; &ocirc;
Ö ö
&Ouml; &ouml;
Õ õ
&Otilde; &otilde;
Ø ø
&Oslash; &oslash;
Þ þ
&THORN; &thorn;
Ú ú
&Uacute; &uacute;
Ù ù
&Ugrave; &ugrave;
Û û
&Ucirc; &ucirc;
Ü ü
&Uuml; &uuml;
Ý ý
&Yacute; &yacute;

Added by HTML3. These may not print correctly, depending upon your browser.

©
&copy;
®
&reg;
¢
&cent;
£
&pound;
¥
&yen;
¦
&brvbar;
§
&sect;
«
&laquo;
»
&raquo;
¬
&not;
°
&deg;
±
&plusmn;
¹
&sup1;
²
&sup2;
³
&sup3;
µ
&micro;
&para;
·
&middot;
¼
&frac14;
½
&frac12;
¾
&frac34;
¿
&iquest;

[Table of Contents] [Keyword Index]

SUMMARY OF HTML 3 CHANGES

These should really be listed with the "subject" sections above, and some are, but not all.

HTML3 EXTENSIONS

<ABBREV></ABBREV>
<ACRONYM></ACRONYM>
<ARG></ARG>
<CMD></CMD>
<DFN></DFN>
<LIT></LIT>
<PERSON></PERSON>
<Q></Q>
<S></S>
<SUB></SUB>
<SUP></SUP>
<RENDER></RENDER>
<FOOTNOTE></FOOTNOTE>
<MARGIN></MARGIN>
<PRINTED></PRINTED>
<ONLINE></ONLINE>
<FIG></FIG>
<CAPTION></CAPTION>
<TABLE></TABLE>
<OL SEQNUM=></UL>
<UL TYPE=></UL>

NETSCAPE EXTENSIONS

<HR SIZE= WIDTH= ALIGN=>
<OL START=></OL>
<IMG ALIGN= WIDTH= HEIGHT= VSPACE= HSPACE=>
<BR CLEAR=>
<NOBR>
<WBR>
<FONT SIZE=></FONT>
<CENTER></CENTER>
<BLINK></BLINK>

[Table of Contents] [Keyword Index]

USEFUL LINKS

<.></.>

[Table of Contents]

KEYWORD INDEX


Mark D. Bej, M.D.
bejm@eeg.ccf.org
+216-444-0119
1996.02.20