The
Bare Bones Guide to HTML - Learn how to Design Web Sites
|
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
- INTRODUCTORY MATERIAL
- 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>
|
|
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) |
|
|
< |
< |
|
|
|
> |
> |
|
|
|
& |
& |
|
|
|
" |
" |
|
|
|
Registered TM |
® |
|
|
|
Registered TM |
® |
|
|
|
Copyright |
© |
|
|
|
Copyright |
© |
|
|
|
Non-Breaking Space |
|
|
|
|
(Complete list at http://www.htmlhelp.com/reference/charset) |
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-2001
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.
|
|
|