#

THE BARE BONES GUIDE TO HTML

by Kevin Werbach
Version 3.0 Formatted -- July 21, 1996

The latest version of this document is available at <http://werbach.com/barebones/>.

Text version here.

The Guide lists all the tags that current versions of most browsers are likely to recognize. I have included all the tags in the HTML 3.2 specification, as well as Netscape extensions included in versions of Netscape Navigator up to 3.0b5. This Guide is designed to be as concise as possible; more detailed information on HTML is available through my WWW Help Page. Comments and suggestions are always welcome.

Table of Contents

1. INTRODUCTORY MATERIAL
   - What is unique about this guide
   - Which HTML tags are included
   - How this document is formatted (including a description of symbols and abbreviations)

2. HTML TAGS
   - basic elements (all HTML documents should have these)
   - structural definition (appearance controlled by the browser's preferences)
   - presentation formatting (author specifies text appearance)
   - links and graphics
   - dividers
   - lists
   - backgrounds and colors
   - special characters
   - forms
   - tables
   - frames
   - java
   - miscellaneous

   Important: If you are not clear about the differences between HTML 2.0, HTML 3.0, HTML 3.2, and Netscape extensions, I suggest that you read the W3C statement on the development of HTML.

BASIC ELEMENTS
| Document Type | `<HTML></HTML>` | (beginning and end of file)
| Title | `<TITLE></TITLE>` | (must be in header)
| Header | `<HEAD></HEAD>` | (descriptive info, such as title)
| Body | `<BODY></BODY>` | (bulk of the page)

STRUCTURAL DEFINITION
| Heading | `<H?></H?>` | (the spec. defines 6 levels)
| Align Heading | `<H? ALIGN=LEFT|CENTER|RIGHT></H?>` [*] |
| Division | `<DIV></DIV>` |
| Align Division | `<DIV ALIGN=LEFT|RIGHT|CENTER></DIV>` |
| Block Quote | `<BLOCKQUOTE></BLOCKQUOTE>` [*] | (usually displayed as indented)
| Emphasis | `<EM></EM>` | (usually displayed as italic)
| Strong Emphasis | `<STRONG></STRONG>` | (usually displayed as bold)
| Citation | `<CITE></CITE>` | (usually italics)
| Code | `<CODE></CODE>` | (for source code listings)
| Sample Output | `<SAMP></SAMP>` |
| Keyboard Input | `<KBD></KBD>` |
| Variable | `<VAR></VAR>` |
| Definition | `<DFN></DFN>` | (not widely implemented)
| Author's Address | `<ADDRESS></ADDRESS>` |
| Large Font Size | `<BIG></BIG>` |
| Small Font Size | `<SMALL></SMALL>` |

PRESENTATION FORMATTING
| Bold | `<B></B>` |
| Italic | `<I></I>` |
N3.0b | Underline | `<U></U>` | (not widely implemented yet)
| Strikeout | `<STRIKE></STRIKE>` | (not widely implemented yet)
N3.0b | Strikeout | `<S></S>` | (not widely implemented yet)
| Subscript | `<SUB></SUB>` |
| Superscript | `<SUP></SUP>` |
| Typewriter | `<TT></TT>` | (displays in a monospaced font)
| Preformatted | `<PRE></PRE>` | (display text spacing as-is)
| Width | `<PRE WIDTH=?></PRE>` | (in characters)
| Center | `<CENTER></CENTER>` [*] | (for both text and images)
N1.0 | Blinking | `<BLINK></BLINK>` | (the most derided tag ever)
| Font Size | `<FONT SIZE=?></FONT>` | (ranges from 1-7)
| Change Font Size | `<FONT SIZE="+|-?"></FONT>` |
N1.0 | Base Font Size | `<BASEFONT SIZE=?>` | (from 1-7; default is 3)
| Font Color | `<FONT COLOR="#$$$$$$"></FONT>` |
N3.0b | Select Font | `<FONT FACE="***"></FONT>` |
N3.0b | Multi-Column Text | `<MULTICOL COLS=?></MULTICOL>` |
N3.0b | Column Gutter | `<MULTICOL GUTTER=?></MULTICOL>` | (default is 10 pixels)
N3.0b | Column Width | `<MULTICOL WIDTH=?></MULTICOL>` |
N3.0b | Spacer | `<SPACER>` |
N3.0b | Spacer Type | `<SPACER TYPE=horizontal| vertical|block>` |
N3.0b | Spacer Size | `<SPACER SIZE=?>` |
N3.0b | Spacer Dimensions | `<SPACER WIDTH=? HEIGHT=?>` |
N3.0b | Spacer Alignment | `<SPACER ALIGN=left|right|center>` |

LINKS AND GRAPHICS
| Link Something | `<A HREF="URL"></A>` |
| Link to Target | `<A HREF="URL#***"></A>` | (if in another document)
`<A HREF="#***"></A>` | (if in current document)
N2.0 | Target Window | `<A HREF="URL" TARGET="***| |_blank|_self|_parent|_top"></A>` |
| Define Target in Document | `<A NAME="***"></A>` |
| Relationship | `<A REL="***"></A>` | (not widely implemented)
| Reverse Relationship | `<A REV="***"></A>` | (not widely implemented)
| Display Image | `<IMG SRC="URL">` |
| Alignment | `<IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>` |
N1.0 | Alignment | `<IMG SRC="URL" ALIGN=TEXTTOP| ABSMIDDLE|BASELINE|ABSBOTTOM>` |
| Alternate | `<IMG SRC="URL" ALT="***">` | (if image not displayed)
| Imagemap | `<IMG SRC="URL" ISMAP>` | (requires a script)
| Client-Side Imagemap | `<IMG SRC="URL" USEMAP="URL">` |
| Map Description | `<MAP NAME="***"></MAP>` |
| Map Sections | `<AREA SHAPE="RECT" COORDS=",,," HREF="URL"|NOHREF>` |
| Dimensions | `<IMG SRC="URL" WIDTH=? HEIGHT=?>` | (in pixels)
| Border | `<IMG SRC="URL" BORDER=?>` | (in pixels)
| Runaround Space | `<IMG SRC="URL" HSPACE=? VSPACE=?>` | (in pixels)
N1.0 | Low-Res Proxy | `<IMG SRC="URL" LOWSRC="URL">` |
N1.1 | Client Pull | `<META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">` |
N2.0 | Embed Object | `<EMBED SRC="URL">` | (insert object into page)
N2.0 | Object Size | `<EMBED SRC="URL" WIDTH=? HEIGHT=?>` |

DIVIDERS
| Paragraph | `<P></P>` [*] | (closing tag often unnecessary)
| Align Text | `<P ALIGN=LEFT|CENTER|RIGHT></P>` [*] |
| Line Break | `<BR>` | (a single carriage return)
| Clear Textwrap | `<BR CLEAR=LEFT|RIGHT|ALL>` |
| Horizontal Rule | `<HR>` |
| Alignment | `<HR ALIGN=LEFT|RIGHT|CENTER>` |
| Thickness | `<HR SIZE=?>` | (in pixels)
| Width | `<HR WIDTH=?>` | (in pixels)
N1.0 | Width Percent | `<HR WIDTH="%">` | (as a percentage of page width)
| Solid Line | `<HR NOSHADE>` | (without the 3D cutout look)
N1.0 | No Break | `<NOBR></NOBR>` | (prevents line breaks)
N1.0 | Word Break | `<WBR>` | (where to break a line if needed)

LISTS |
--- | ---
| Unordered List | `<UL><LI></UL>` | (`<LI>` before each list item) |
| Compact | `<UL COMPACT></UL>` |
| Bullet Type | `<UL TYPE=DISC|CIRCLE|SQUARE>` | (for the whole list) |
`<LI TYPE=DISC|CIRCLE|SQUARE>` | (this & subsequent) |
| Ordered List | `<OL><LI></OL>` | (`<LI>` before each list item) |
| Compact | `<OL COMPACT></OL>` |
| Numbering Type | `<OL TYPE=A|a|I|i|1>` | (for the whole list) |
`<LI TYPE=A|a|I|i|1>` | (this & subsequent) |
| Starting Number | `<OL START=?>` | (for the whole list) |
`<LI VALUE=?>` | (this & subsequent) |
| Definition List | `<DL><DT><DD></DL>` | (`<DT>=term, <DD>`=definition) |
| Compact | `<DL COMPACT></DL>` |
| Menu List | `<MENU><LI></MENU>` | (`<LI>` before each list item) |
| Compact | `<MENU COMPACT></MENU>` |
| Directory List | `<DIR><LI></DIR>` | (`<LI>` before each list item) |
| Compact | `<DIR COMPACT></DIR>` |

BACKGROUNDS AND COLORS
| Tiled Bkground | `<BODY BACKGROUND="URL">` |
| Bkground Color | `<BODY BGCOLOR="#$$$$$$">` [*] | (order is red/green/blue)
| Text Color | `<BODY TEXT="#$$$$$$">` [*] |
| Link Color | `<BODY LINK="#$$$$$$">` [*] |
| Visited Link | `<BODY VLINK="#$$$$$$">` [*] |
| Active Link | `<BODY ALINK="#$$$$$$">` [*] |
(More info at http://werbach.com/web/wwwhelp.html#color)

SPECIAL CHARACTERS (these must all be in lower case)
| Special Character | &#?; | (where ? is the ISO 8859-1 code)
| < | `&lt;` |
| > | `&gt;` |
| & | `&amp;` |
| " | `&quot;` |
| Registered TM | `&reg;` |
| Copyright | `&copy;` |
| Non-Breaking Space | `&nbsp;` |
(Complete list at http://www.uni-passau.de/%7Eramsch/iso8859-1.html)

FORMS
| Define Form | `<FORM ACTION="URL" METHOD=GET|POST></FORM>` |
N2.0 | File Upload | `<FORM ENCTYPE="multipart/form-data"></FORM>` |
| Input Field | `<INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO| IMAGE|HIDDEN|SUBMIT|RESET">` |
| Field Name | `<INPUT NAME="***">` |
| Field Value | `<INPUT VALUE="***">` |
| Checked? | `<INPUT CHECKED>` | (checkboxes and radio boxes)
| Field Size | `<INPUT SIZE=?>` | (in characters)
| Max Length | `<INPUT MAXLENGTH=?>` | (in characters)
| Selection List | `<SELECT></SELECT>` |
| Name of List | `<SELECT NAME="***"></SELECT>` |
| # of Options | `<SELECT SIZE=?></SELECT>` |
| Multiple Choice | `<SELECT MULTIPLE>` | (can select more than one)
| Option | `<OPTION>` | (items that can be selected)
| Default Option | `<OPTION SELECTED>` |
| Input Box Size | `<TEXTAREA ROWS=? COLS=?></TEXTAREA>` |
| Name of Box | `<TEXTAREA NAME="***"></TEXTAREA>` |
N2.0 | Wrap Text | `<TEXTAREA WRAP=OFF|VIRTUAL|PHYSICAL></TEXTAREA>` |

TABLES
| Define Table | `<TABLE></TABLE>` [*] |
| Table Border | `<TABLE BORDER=?></TABLE>` |
| Cell Spacing | `<TABLE CELLSPACING=?>` |
| Cell Padding | `<TABLE CELLPADDING=?>` |
| Desired Width | `<TABLE WIDTH=?>` | (in pixels)
| Width Percent | `<TABLE WIDTH="%">` | (percentage of page)
| Table Row | `<TR></TR>` |
| Alignment | `<TR ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM VALIGN=TOP|BOTTOM|MIDDLE>` |
| Table Cell | `<TD></TD>` | (must appear within table rows)
| Alignment | `<TD ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM VALIGN=TOP|BOTTOM|MIDDLE>` |
| No linebreaks | `<TD NOWRAP>` |
| Columns to Span | `<TD COLSPAN=?>` |
| Rows to Span | `<TD ROWSPAN=?>` |
N1.1 | Desired Width | `<TD WIDTH=?>` | (in pixels)
N1.1 | Width Percent | `<TD WIDTH="%">` | (percentage of table)
N3.0b | Cell Color | `<TD BGCOLOR="#$$$$$$">` |
| Table Header | `<TH></TH>` | (same as data, except bold centered)
| Alignment | `<TH ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM VALIGN=TOP|BOTTOM|MIDDLE>` |
| No Linebreaks | `<TH NOWRAP>` |
| Columns to Span | `<TH COLSPAN=?>` |
| Rows to Span | `<TH ROWSPAN=?>` |
N1.1 | Desired Width | `<TH WIDTH=?>` | (in pixels)
N1.1 | Width Percent | `<TH WIDTH="%">` | (percentage of table)
N3.0b | Cell Color | `<TH BGCOLOR="#$$$$$$">` |
| Table Caption | `<CAPTION></CAPTION>` |
| Alignment | `<CAPTION ALIGN=TOP|BOTTOM>` | (above/below table)

FRAMES
N2.0 | Frame Document | `<FRAMESET></FRAMESET>` | (instead of `<BODY>`)
N2.0 | Row Heights | `<FRAMESET ROWS=,,,></FRAMESET>` | (pixels or %)
N2.0 | Row Heights | `<FRAMESET ROWS=*></FRAMESET>` | (* = relative size)
N2.0 | Column Widths | `<FRAMESET COLS=,,,></FRAMESET>` | (pixels or %)
N2.0 | Column Widths | `<FRAMESET COLS=*></FRAMESET>` | (* = relative size)
N3.0b | Border Width | `<FRAMESET BORDER=?>` |
N3.0b | Borders | `<FRAMESET FRAMEBORDER="yes|no">` |
N3.0b | Border Color | `<FRAMESET BORDERCOLOR="#$$$$$$">` |
N2.0 | Define Frame | `<FRAME>` | (contents of an individual frame)
N2.0 | Display Document | `<FRAME SRC="URL">` |
N2.0 | Frame Name | `<FRAME NAME="***"|_blank|_self| _parent|_top>` |
N2.0 | Margin Width | `<FRAME MARGINWIDTH=?>` | (left and right margins)
N2.0 | Margin Height | `<FRAME MARGINHEIGHT=?>` | (top and bottom margins)
N2.0 | Scrollbar? | `<FRAME SCROLLING="YES|NO|AUTO">` |
N2.0 | Not Resizable | `<FRAME NORESIZE>` |
N3.0b | Borders | `<FRAME FRAMEBORDER="yes|no">` |
N3.0b | Border Color | `<FRAME BORDERCOLOR="#$$$$$$">` |
N2.0 | Unframed Content | `<NOFRAMES></NOFRAMES>` | (for non-frames browsers)

JAVA
| Applet | `<APPLET></APPLET>` |
| Applet File Name | `<APPLET CODE="***">` |
| Parameters | `<APPLET PARAM NAME="***">` |
| Applet Location | `<APPLET CODEBASE="URL">` |
| Applet Identifier | `<APPLET NAME="***">` | (for references elsewhere in the page)
| Alternative Text | `<APPLET ALT="***">` | (for non-Java browsers)
| Alignment | `<APPLET ALIGN="LEFT|RIGHT|CENTER">` |
| Size | `<APPLET WIDTH=? HEIGHT=?>` | (in pixels)
| Spacing | `<APPLET HSPACE=? VSPACE=?>` | (in pixels)

MISCELLANEOUS
| Comment | `<!-- *** -->` | (not displayed by the browser)
| HTML 3.2 Prologue | `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">` [*] |
| Searchable | `<ISINDEX>` | (indicates a searchable index)
| Prompt | `<ISINDEX PROMPT="***">` | (text to prompt input)
| Send Search | `<A HREF="URL?***"></a>` | (use a real question mark)
| URL of This File | `<BASE HREF="URL">` | (must be in header)
N2.0 | Base Window Name | `<BASE TARGET="***">` | (must be in header)
| Relationship | `<LINK REV="***" REL="***" HREF="URL">` | (must be in header)
| Meta Information | `<META>` | (must be in header)
| Style Sheets | `<STYLE></STYLE>` | (not yet widely supported)
| Scripts | `<SCRIPT></SCRIPT>` | (not yet widely supported)

Copyright ©1995, 1996 Kevin Werbach. Noncommercial redistribution permitted. This Guide is not a product of Bare Bones Software; the similarity of names is purely coincidental.

Contents | LIST OF TAGS | Plain Text Version | Kevin's Home Page

My thanks to Kevin Werbach for allowing this excellent reference to be included as a part of these tutorials. -Joe Barta