Bare Bones Guide to HTML (freely modified by unknown)

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 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.


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)	T\| T T T T T T
	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)	Test\| Test
4.0	Quote	`<Q></Q>`	(for short quotations)	Test\|Test
4.0	Citation	`<Q CITE="URL"></Q>`
	Emphasis	`<EM></EM>`	(usually displayed as italic)	Test\|Test
	Strong Emphasis	`<STRONG></STRONG>`	(usually displayed as bold)	Test\|Test
	Citation	`<CITE></CITE>`	(usually italics)	Test\|Test
	Code	`<CODE></CODE>`	(for source code listings)	Test\|`Test`
	Sample Output	`<SAMP></SAMP>`		Test\|`Test`
	Keyboard Input	`<KBD></KBD>`		Test\|`Test`
	Variable	`<VAR></VAR>`		Test\|`Test`
	Definition	`<DFN></DFN>`	(not widely implemented)	Test\|Test
	Author's Address	`<ADDRESS></ADDRESS>`		Test\| Test
	Large Font Size	`<BIG></BIG>`		Test\|Test HTML5
	Small Font Size	`<SMALL></SMALL>`		Test\|Test
4.0	Insert	`<INS></INS>`	(marks additions in a new version)	Test\|Test
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)	Test\|~~Test~~
4.0	Time of Change	`<DEL DATETIME=":::"></DEL>`
4.0	Comments	`<DEL CITE="URL"></DEL>`
4.0	Acronym	`<ACRONYM></ACRONYM>`		Test\|Test HTML5
4.0	Abbreviation	`<ABBR></ABBR>`		Test\|Test

PRESENTATION FORMATTING
	Bold	`<B></B>`		Test\|Test
	Italic	`<I></I>`		Test\|Test
4.0*	Underline	`<U></U>`	(not widely implemented)	Test\|Test deprecated HTML5
	Strikeout	`<STRIKE></STRIKE>`	(not widely implemented)	Test\|~~Test~~ deprecated HTML5
4.0*	Strikeout	`<S></S>`	(not widely implemented)	Test\|~~Test~~ deprecated HTML5
	Subscript	`<SUB></SUB>`		Test\|_Test
	Superscript	`<SUP></SUP>`		Test\|^Test
	Typewriter	`<TT></TT>`	(displays in a monospaced font)	Test\|`Test` HTML5
	Preformatted	`<PRE></PRE>`	(display text spacing as-is)	Test\| Test
	Width	`<PRE WIDTH=?></PRE>`	(in characters)
	Center	`<CENTER></CENTER>`	(for both text and images)	Test\|Test HTML5
N1	Blinking	`<BLINK></BLINK>`	(the most derided tag ever)	deprecated
	Font Size	`<FONT SIZE=?></FONT>`	(ranges from 1-7)	T\|TTTTTTT deprecated HTML5
	Change Font Size	`<FONT SIZE="+\|-?"></FONT>`		HTML5
	Font Color	`<FONT COLOR="#$$$$$$"></FONT>`		HTML5
4.0*	Select Font	`<FONT FACE="***"></FONT>`		deprecated HTML5
	`<span style="font-family:serif\|sans-serif\|monospace\|cursive\|fantasy"></span>`
		ABCDabcdàéè0123… ABCDabcdàéè0123… ABCDabcdàéè0123… ABCDabcdàéè0123… ABCDabcdàéè0123… HTML5
	`<span style="font-variant:small-caps"></span>`
		ABCDabcdàéè0123… ABCDabcdàéè0123… ABCDabcdàéè0123… ABCDabcdàéè0123… ABCDabcdàéè0123… HTML5
N4	Point size	`<FONT POINT-SIZE=?></FONT>`		HTML5
N4	Weight	`<FONT WEIGHT=?></FONT>`		HTML5
4.0*	Base Font Size	`<BASEFONT SIZE=?>`	(from 1-7; default is 3)	HTML5
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)

First
Second

Compact <UL COMPACT></UL> deprecated

Bullet Type

<UL TYPE=DISC|CIRCLE|SQUARE>

(for the whole list)

First
Second

First
Second

First
Second

Bullet Type <LI TYPE=DISC|CIRCLE|SQUARE> (this & subsequent)

Ordered List

<OL><LI></OL>

(before each list item)

First
Second

Compact <OL COMPACT></OL> deprecated

Numbering Type

<OL TYPE=A|a|I|i|1>

(for the whole list)

First
Second

First
Second

First
Second

First
Second

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)

First: Definition
Second: Definition

Compact <DL COMPACT></DL> deprecated

Menu List <MENU><LI></MENU> (before each list item) deprecated

Compact <MENU COMPACT></MENU> deprecated

Directory List <DIR><LI></DIR> (before each list item) deprecated HTML5

Compact <DIR COMPACT></DIR> deprecated HTML5

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 Character	`&#?;`	(where ? is the ISO 8859-1 code)
<	`<`		<
>	`>`		>
&	`&`		&
"	`"`		"
Registered TM	`®` `®`		® ®
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>`		Test
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>`		Test
	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)

Test

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)

Summary <TABLE summary="***">

4.0* Table Color <TABLE BGCOLOR="$$$$$$"></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>

Caption
Test

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 HTML5
4.0*	Frame Document	`<FRAMESET></FRAMESET>`	(instead of <BODY>)	HTML5
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)	HTML5
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)	HTML5
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>`		text/javascript
	Language	`<SCRIPT LANGUAGE="***"></SCRIPT>`		deprecated
4.0*	Other Content	`<NOSCRIPT></NOSCRIPT>`	(if scripts not supported)
	Applet	`<APPLET></APPLET>`		HTML5
	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)	HTML5
	Prompt	`<ISINDEX PROMPT="***">`	(text to prompt input)	HTML5
	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)	abc abc

THE BARE BONES GUIDE TO HTML

T

T

T

T

T

T