-- THE BARE BONES GUIDE TO HTML --

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
  2. HTML TAGS

    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>
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-2000 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.
Valid HTML 4.0!

Intro | Notes

So, you want to make a Web Page!
Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
Index & Quick Reference      Table of Contents      ColorPicker      BareBones HTML Guide
Color Charts      Simple Font Widget      Practice Exercises      Where are my images?
Print version of this tutorial available - Get the PageTutor Book & CD

kslokesh - All Copyrights, Trademarks, Logos etc. belong to their respective owners.
www.kslokesh.com