# THE BARE BONES GUIDE TO HTML by Kevin Werbach Version 4.0 Formatted -- February 1999

The latest version of this document is available at http://werbach.com/barebones/, where you will also find the text version, translations, and background materials.

The Bare Bones Guide to HTML lists all the tags that current browsers are likely to recognize. I have included all the elements in the official HTML 4.0 recommendation with common attributes, as well as Netscape and Microsoft extensions. This document is a quick reference, not a complete specification; for official information about HTML and its development, see the World Wide Web Consortium site at http://www.w3.org/MarkUp/.

The Guide is designed to be as concise as possible, and therefore it doesn't go into any detail about how to use the various tags. A few tags link to notes that address frequently-asked questions. If you're looking for more detailed step-by-step information, see my WWW Help Page.

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, graphics, and sounds
   - positioning
   - dividers
   - lists
   - backgrounds and colors
   - special characters
   - forms
   - tables
   - frames
   - scripts and java
   - miscellaneous

   Important: If you are not clear about the differences between the various versions of HTML, I suggest that you read my discussion of the development of HTML, or the World Wide Web Consortium HTML activity statement.

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|JUSTIFY></DIV>`
4.0 | Defined Content | `<SPAN></SPAN>`
| Block Quote | `<BLOCKQUOTE></BLOCKQUOTE>` | (usually indented)
4.0 | Quote | `<Q></Q>` | (for short quotations)
4.0 | Citation | `<Q CITE="URL"></Q>`
| 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>`
4.0 | Insert | `<INS></INS>` | (marks additions in a new version)
4.0 | Time of Change | `<INS DATETIME=":::"></INS>`
4.0 | Comments | `<INS CITE="URL"></INS>`
4.0 | Delete | `<DEL></DEL>` | (marks deletions in a new version)
4.0 | Time of Change | `<DEL DATETIME=":::"></DEL>`
4.0 | Comments | `<DEL CITE="URL"></DEL>`
4.0 | Acronym | `<ACRONYM></ACRONYM>`
4.0 | Abbreviation | `<ABBR></ABBR>`

PRESENTATION FORMATTING
| Bold | `<B></B>`
| Italic | `<I></I>`
4.0* | Underline | `<U></U>` | (not widely implemented)
| Strikeout | `<STRIKE></STRIKE>` | (not widely implemented)
4.0* | Strikeout | `<S></S>` | (not widely implemented)
| 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 | Blinking | `<BLINK></BLINK>` | (the most derided tag ever)
| Font Size | `<FONT SIZE=?></FONT>` | (ranges from 1-7)
| Change Font Size | `<FONT SIZE="+|-?"></FONT>`
| Font Color | `<FONT COLOR="#$$$$$$"></FONT>`
4.0* | Select Font | `<FONT FACE="***"></FONT>`
N4 | Point size | `<FONT POINT-SIZE=?></FONT>`
N4 | Weight | `<FONT WEIGHT=?></FONT>`
4.0* | Base Font Size | `<BASEFONT SIZE=?>` | (from 1-7; default is 3)
MS | Marquee | `<MARQUEE></MARQUEE>`

POSITIONING
N3 | Multi-Column | `<MULTICOL COLS=?></MULTICOL>`
N3 | Column Gutter | `<MULTICOL GUTTER=?></MULTICOL>`
N3 | Column Width | `<MULTICOL WIDTH=?></MULTICOL>`
N3 | Spacer | `<SPACER>`
N3 | Spacer Type | `<SPACER TYPE=HORIZONTAL|VERTICAL|BLOCK>`
N3 | Size | `<SPACER SIZE=?>`
N3 | Dimensions | `<SPACER WIDTH=? HEIGHT=?>`
N3 | Alignment | `<SPACER ALIGN=LEFT|RIGHT|CENTER>`
N4 | Layer | `<LAYER></LAYER>`
N4 | Name | `<LAYER ID="***"></LAYER>`
N4 | Location | `<LAYER LEFT=? TOP=?></LAYER>`
N4 | Rel. Position | `<LAYER PAGEX=? PAGEY=?></LAYER>`
N4 | Source File | `<LAYER SRC="***"></LAYER>`
N4 | Stacking | `<LAYER Z-INDEX=?></LAYER>`
N4 | Stack Position | `<LAYER ABOVE="***" BELOW="***"></LAYER>`
N4 | Dimensions | `<LAYER HEIGHT=? WIDTH=?></LAYER>`
N4 | Clipping Path | `<LAYER CLIP=,,,></LAYER>`
N4 | Visible? | `<LAYER VISIBILITY=SHOW|HIDDEN|INHERIT></LAYER>`
N4 | Background | `<LAYER BACKGROUND="$$$$$$"></LAYER>`
N4 | Color | `<LAYER BGCOLOR="$$$$$$"></LAYER>`
N4 | Inline Layer | `<ILAYER></ILAYER>` | (takes same attributes as LAYER)
N4 | Alt. Content | `<NOLAYER></NOLAYER>`

LINKS, GRAPHICS, AND SOUNDS
| Link Something | `<A HREF="URL"></A>`
| Link to Location | `<A HREF="URL#***"></A>` | (if in another document)
|  | `<A HREF="#***"></A>` | (if in current document)
4.0* | Target Window | `<A HREF="URL" TARGET="***"></A>`
4.0* | Action on Click | `<A HREF="URL" ONCLICK="***"></A>` | (Javascript)
4.0* | Mouseover Action | `<A HREF="URL" ONMOUSEOVER="***"></A>` | (Javascript)
4.0* | Mouse out Action | `<A HREF="URL" ONMOUSEOUT="***"></A>` | (Javascript)
| Link to Email | `<A HREF="mailto:@"></A>`
N, MS | Specify Subject | `<A HREF="mailto:@?SUBJECT=***"></A>` §¿ | (use a real question mark)
| Define Location | `<A NAME="***"></A>`
| Display Image | `<IMG SRC="URL">`
| Alignment | `<IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT>`
N1 | Alignment | `<IMG SRC="URL" ALIGN=TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM>`
| Alternate | `<IMG SRC="URL" ALT="***">` | (if image not displayed)
| Dimensions | `<IMG SRC="URL" WIDTH=? HEIGHT=?>` | (in pixels)
|  | `<IMG SRC="URL" WIDTH=% HEIGHT=%>` | (as percentage of page width/height)
| Border | `<IMG SRC="URL" BORDER=?>` | (in pixels)
| Runaround Space | `<IMG SRC="URL" HSPACE=? VSPACE=?>` | (in pixels)
N1 | Low-Res Proxy | `<IMG SRC="URL" LOWSRC="URL">`
| Imagemap | `<IMG SRC="URL" ISMAP>` | (requires a script)
| Imagemap | `<IMG SRC="URL" USEMAP="URL">`
MS | Movie Clip | `<IMG DYNSRC="***" START="***" LOOP=?>`
MS | Background Sound | `<BGSOUND SRC="***" LOOP=?|INFINITE>`
| Client-Side Map | `<MAP NAME="***"></MAP>` | (describes the map)
| Map Section | `<AREA SHAPE="DEFAULT|RECT|CIRCLE|POLY" COORDS=",,," HREF="URL"|NOHREF>`
N1 | Client Pull | `<META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">`
N2 | Embed Object | `<EMBED SRC="URL">` | (insert object into page)
N2 | Object Size | `<EMBED SRC="URL" WIDTH=? HEIGHT=?>`
4.0 | Object | `<OBJECT></OBJECT>`
4.0 | Parameters | `<PARAM>`

DIVIDERS
| Paragraph | `<P></P>` | (closing tag often unnecessary)
| Align Text | `<P ALIGN=LEFT|CENTER|RIGHT></P>`
N | Justify Text | `<P ALIGN=JUSTIFY></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)
| Width Percent | `<HR WIDTH="%">` | (as a percentage of page width)
| Solid Line | `<HR NOSHADE>` | (without the 3D cutout look)
N1 | No Break | `<NOBR></NOBR>` | (prevents line breaks)
N1 | Word Break | `<WBR>` | (where to break a line if needed)

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

BACKGROUNDS AND COLORS
| Tiled Bkground | `<BODY BACKGROUND="URL">`
MS | Watermark | `<BODY BGPROPERTIES="FIXED">`
| 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
| Special Character | `&#?;` | (where ? is the ISO 8859-1 code)
| < | `&lt;`
| > | `&gt;`
| & | `&amp;`
| " | `&quot;`
| Registered TM | `&#174;`
| Registered TM | `&reg;`
| Copyright | `&#169;`
| 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>`
4.0* | File Upload | `<FORM ENCTYPE="multipart/form-data"></FORM>`
| Input Field | `<INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO| FILE|BUTTON|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)
4.0 | Button | `<BUTTON></BUTTON>`
4.0 | Button Name | `<BUTTON NAME="***"></BUTTON>`
4.0 | Button Type | `<BUTTON TYPE="SUBMIT|RESET|BUTTON"></BUTTON>`
4.0 | Default Value | `<BUTTON VALUE="***"></BUTTON>`
4.0 | Label | `<LABEL></LABEL>`
4.0 | Item Labelled | `<LABEL FOR="***"></LABEL>`
| 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>`
| Option Value | `<OPTION VALUE="***">`
4.0 | Option Group | `<OPTGROUP LABEL="***"></OPTGROUP>`
| Input Box Size | `<TEXTAREA ROWS=? COLS=?></TEXTAREA>`
| Name of Box | `<TEXTAREA NAME="***"></TEXTAREA>`
N2 | Wrap Text | `<TEXTAREA WRAP=OFF|HARD|SOFT></TEXTAREA>`
4.0 | Group elements | `<FIELDSET></FIELDSET>`
4.0 | Legend | `<LEGEND></LEGEND>` | (caption for fieldsets)
4.0 | Alignment | `<LEGEND ALIGN="TOP|BOTTOM|LEFT|RIGHT"></LEGEND>`

TABLES
| Define Table | `<TABLE></TABLE>`
4.0* | Table Alignment | `<TABLE ALIGN=LEFT|RIGHT|CENTER>`
| Table Border | `<TABLE BORDER></TABLE>` | (either on or off)
| Table Border | `<TABLE BORDER=?></TABLE>` | (you can set the value)
| Cell Spacing | `<TABLE CELLSPACING=?>`
| Cell Padding | `<TABLE CELLPADDING=?>`
| Desired Width | `<TABLE WIDTH=?>` | (in pixels)
| Width Percent | `<TABLE WIDTH=%>` | (percentage of page)
4.0* | Table Color | `<TABLE BGCOLOR="$$$$$$"></TABLE>`
4.0 | Table Frame | `<TABLE FRAME=VOID|ABOVE|BELOW|HSIDES|LHS|RHS| VSIDES|BOX|BORDER></TABLE>`
4.0 | Table Rules | `<TABLE RULES=NONE|GROUPS|ROWS|COLS|ALL></TABLE>`
MS | Border Color | `<TABLE BORDERCOLOR="$$$$$$"></TABLE>`
MS | Dark Border | `<TABLE BORDERCOLORDARK="$$$$$$"></TABLE>`
MS | Light Border | `<TABLE BORDERCOLORLIGHT="$$$$$$"></TABLE>`
| Table Row | `<TR></TR>`
| Alignment | `<TR ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM>`
| Table Cell | `<TD></TD>` | (must appear within table rows)
| Alignment | `<TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM>`
| No linebreaks | `<TD NOWRAP>`
| Columns to Span | `<TD COLSPAN=?>`
| Rows to Span | `<TD ROWSPAN=?>`
4.0* | Desired Width | `<TD WIDTH=?>` | (in pixels)
N3 | Width Percent | `<TD WIDTH="%">` | (percentage of table)
4.0* | Cell Color | `<TD BGCOLOR="#$$$$$$">`
| Header Cell | `<TH></TH>` | (same as data, except bold centered)
| Alignment | `<TH ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM>`
| No Linebreaks | `<TH NOWRAP>`
| Columns to Span | `<TH COLSPAN=?>`
| Rows to Span | `<TH ROWSPAN=?>`
4.0* | Desired Width | `<TH WIDTH=?>` | (in pixels)
N3 | Width Percent | `<TH WIDTH="%">` | (percentage of table)
4.0* | Cell Color | `<TH BGCOLOR="#$$$$$$">`
4.0 | Table Body | `<TBODY>`
4.0 | Table Footer | `<TFOOT></TFOOT>` | (must come before `THEAD>`
4.0 | Table Header | `<THEAD></THEAD>`
| Table Caption | `<CAPTION></CAPTION>`
| Alignment | `<CAPTION ALIGN=TOP|BOTTOM|LEFT|RIGHT>`
4.0 | Column | `<COL></COL>` | (groups column attributes)
4.0 | Columns Spanned | `<COL SPAN=?></COL>`
4.0 | Column Width | `<COL WIDTH=?></COL>`
4.0 | Width Percent | `<COL WIDTH="%"></COL>`
4.0 | Group columns | `<COLGROUP></COLGROUP>` | (groups column structure)
4.0 | Columns Spanned | `<COLGROUP SPAN=?></COLGROUP>`
4.0 | Group Width | `<COLGROUP WIDTH=?></COLGROUP>`
4.0 | Width Percent | `<COLGROUP WIDTH="%"></COLGROUP>`

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

SCRIPTS AND JAVA
| Script | `<SCRIPT></SCRIPT>`
| Location | `<SCRIPT SRC="URL"></SCRIPT>`
| Type | `<SCRIPT TYPE="***"></SCRIPT>`
| Language | `<SCRIPT LANGUAGE="***"></SCRIPT>`
4.0* | Other Content | `<NOSCRIPT></NOSCRIPT>` | (if scripts not supported)
| Applet | `<APPLET></APPLET>`
| File Name | `<APPLET CODE="***">`
| Parameters | `<APPLET PARAM NAME="***">`
| Location | `<APPLET CODEBASE="URL">`
| Identifier | `<APPLET NAME="***">` | (for references)
| Alt 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)
N4 | Server Script | `<SERVER></SERVER>`

MISCELLANEOUS
| Comment | `<!-- *** -->` | (not displayed by the browser)
| Prologue | `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//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)
4.0* | Base Window Name | `<BASE TARGET="***">` | (must be in header)
| Relationship | `<LINK REV="***" REL="***" HREF="URL">` | (in header)
N4 | Linked File | `<LINK TYPE="***" SRC="***"></LINK>`
| Meta Information | `<META>` | (must be in header)
| Style Sheets | `<STYLE></STYLE>` | (implementations vary)
4.0 | Bidirect Off | `<BDO DIR=LTR|RTL></BDO>` | (for certain character sets)

Copyright ©1995-1999 Kevin Werbach. Redistribution is permitted, so long as there is no charge and this document is included without alteration in its entirety. This Guide is not a product of Bare Bones Software. More information is available at http://werbach.com/barebones.

Intro | Notes
Ad revenue from the WebTutor version of the Bare Bones Guide
is split 50/50 between Joe Barta and Kevin Werbach