HTML Tutor | Web Design

HTML Tutor!

HTML Tutor, learn to author your own website

Resources

Please sign up for our Free News Letter
Please help us by taking this 1 minute survey!

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
- What is unique about this guide
- Which HTML tags are included
- How this document is formatted (including a description of symbols and abbreviations)
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.


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)
	Link to Location	`<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(px)	`<IMG SRC="URL" WIDTH=? HEIGHT=?>`	(in pixels)
	Dimensions(%)	`<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)


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.php#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.uni-passau.de/%7Eramsch/iso8859-1.php)

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.

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

Tutorial reposted with permission, courtesy PageTutor.com

Please sign up for our Free News Letter
Please help us by taking this 1 minute survey!

[ HTML Tutor ] | [ CSS Tutorial ] |