HTML Quick Reference Guide

Constructed by
Paul Mansbacher

Table of Contents
  1. Formatting Tags
    1. Presentation Controls
    2. Style (Text) Controls
  2. Image Tags
  3. Link Tags
  4. List Tags
  5. Table Tags
    1. Table Elements
    2. Table Attributes
  6. Form Tags
  7. Frame Tags
  8. Style Sheets
    1. Method 1: Embedded Style Sheet
    2. Method 2: External Style Sheet
    3. Method 3: Inline Styles
    4. Method 4: Style Classes
    5. Style Definitions
  9. Bibliography
  10. Footnote 1: Deprecated Tags
  11. Footnote 2: Colour
Formatting Tags
Presentation Controls
Tag Description
<B> ... </B> Enclosed text appears in Bold. A deprecated tag(1).
Replaced by <STRONG> ... </STRONG> or Style Sheets.
<BASEFONT> Selects the default font to be used. A deprecated tag(1).
Replaced by Style Sheets.
<BDO> [LANG="Language-code"] [DIR="LTR" or "RTL"] ... <BDO> This tag names the primary language in the document specifies whether it is to be read from left to right or right to left. For example, Hebrew:
<BDO LANG="HE" DIR="RTL">
<BIG> ... </BIG> Enclosed text appears in Increased Font Size.
Its use is not recommended.
<CENTER> ... </CENTER> Enclosed text appears
Centred.
A deprecated tag(1). Use ALIGN="CENTER" attribute of many HTML tags or Style Sheets.
<FONT [COLOR="#RRGGBB"(2) or "colourName"(2)] [FACE="fontName[, fontName2[,fontName3]]"] [SIZE="number (1-7)"]> ... </FONT> Sets the colour, font and size to be used. A deprecated tag(1).
Replaced by Style Sheets.
<HR [ALIGN="LEFT", "CENTER" or "RIGHT"] [NOSSHADE] [SIZE=n] [WIDTH=n or n%]> Draws a horizontal rule. Size & width attributes are deprecated(1).
<I> ... </I> Enclosed text appears in Italics. A deprecated tag(1).
Replaced by <CITE> ... </CITE>, <EM> ... </EM> or Style Sheets.
<S> ... </S> Enclosed text appears struck through. A deprecated tag(1).
Replaced by Style Sheets.
<SMALL> ... </SMALL> Enclosed text appears in Decreased Font Size.
Its use is not recommended.
<STRIKE> ... </STRIKE> Enclosed text appears struck through. A deprecated tag(1).
Replaced by Style Sheets.
<TT> ... </TT> Monospaced:
Enclosed text appears as if produced by a typewriter.
Its use is not recommended.
<U> ... </U> Enclosed text appears Underlined. A deprecated tag(1).
Table of Contents
Style (Text) Controls
Tag Description
<BLOCKQUOTE [CITE="Source"]> ... </BLOCKQUOTE> This tag indents a block of quoted text.
This is a block of text being used as an example. Notice how it is indented..
<BR [CLEAR="LEFT", "ALL", "RIGHT", "NONE"]> This tag forces a line break.
This text was forced on to a new line.
<CITE> ... </CITE> Enclosed text appears as a Citation.
<CODE> ... </CODE> Enclosed text appears as Program Code .
<DEL [CITE="URL"] [DATETIME=YYYY-MM-DDThh:mm:ssTZD]> ... </DEL> Enclosed text appears Deleted.
<EM> ... </EM> Enclosed text appears Emphasised.
<KBD> ... </KBD> Enclosed text appears as Keyboard input.
<PRE> ... </PRE> Preformatted: 
Enclosed text keeps its tabs	 and   spaces
<SAMP> ... </SAMP> Enclosed text appears as a Sample.
<STRONG> ... </STRONG> Enclosed text appears Strong.
<SUB> ... </SUB> Enclosed text appears as a Subscript.
<SUP> ... </SUP> Enclosed text appears as a Superscript.
<VAR> ... </VAR> Enclosed text appears as a Variable.

Table of Contents


Image Tags
Tag Description
<IMG SRC="filename"> Basic Image Tag
<IMG SRC="filename" ALIGN=TOP> Image Aligned with top of text
<IMG SRC="filename" ALIGN=MIDDLE> Image Aligned with middle of text
<IMG SRC="filename" ALIGN=BOTTOM> Image Aligned with bottom of text
<IMG SRC="filename" ALIGN=LEFT> Image where text wraps to the right
<IMG SRC="filename" ALIGN=RIGHT> Image where text wraps to the left
<IMG SRC="filename" ALT="Alternative text"> Image with alternative text (Displayed on mouse-over and when image is not loaded)

Table of Contents


Link Tags
Tag Description
<A HREF="URL">Link text</A> Link to an external URL
<A NAME="Anchor Name">Anchor text</A> An Anchor for internal links
<A HREF="#Anchor Name">Link text</A> An internal link to a named anchor
<A HREF="mailto:Your.Email.Address">Email link text</A> Link to send Email
<A HREF="ftp://host/directory/">FTP directory link text</A> Link to an FTP directory
<A HREF="ftp://host/directory/filename">FTP file link text</A> Link to a file using FTP
<A HREF="gopher://host/">Gopher link text</A> Link using Gopher
<A HREF="news:newsgroup.name">Link text to a newsgroup</A> Link to a Usenet newsgroup
<A HREF="telnet://host">Telnet link text</A> Telnet Link

Table of Contents


List Tags
Tag Description
<DD> Definition Description in a Definition List
<DIR> ... </DIR> Directory List
<DT> Definition Term in a Definition List
<DL> ... </DL> Definition List
<LI> List Item
<MENU> ... </MENU> Menu List
<OL [TYPE=1, A, a, I or i]> ... </OL> Ordered List
<UL [TYPE=disc, circle or square]> ... </UL> Unordered List

Table of Contents


Table Tags
Table Elements
Element Description
<TABLE [BORDER[=n]]> ... </TABLE> Defines a table in HTML. If the BORDER attribute is present, the browser displays the table with a border. The thickness of the outside border of the table may be specified in pixels.
<CAPTION [ALIGN=BOTTOM]> ... </CAPTION> Defines the caption for the title of the table. The default position of the title is centered at the top of the table. The attribute ALIGN=BOTTOM can be used to position the caption below the table.
NOTE: Any kind of markup tag can be used in the caption.
<TR> ... </TR> Defines the table row within a table. You may define default attributes for the entire row: ALIGN (LEFT, CENTER, RIGHT) and/or VALIGN (TOP, MIDDLE, BOTTOM). See Table Attributes at the end of this table for more information.
<TH> ... </TH> Defines the table header cell. By default the text in this cell is bold and centered within the cell. Table header cells may contain other attributes to determine the characteristic of the cell and/or its contents. See Table Attributes at the end of this table for more information.
<TD> ... </TD> Defines the table data cell. By default the text in this cell is aligned left and centered vertically. Table data cells may contain other attributes to determine the characteristic of the cell and/or its contents. See Table Attributes at the end of this table for more information.
Table of Contents
Table Attributes
NOTE: Attributes defined within <TH> ... </TH> or <TD> ... </TD> cells override the default alignment set in <TR> ... </TR>.
Attribute Description
ALIGN (LEFT, CENTER, RIGHT) Horizontal alignment of a cell.
VALIGN (TOP, MIDDLE, BOTTOM) Vertical alignment of a cell.
COLSPAN=n The number (n) of columns a cell spans.
ROWSPAN=n The number (n) of rows a cell spans.
BGCOLOR=#rrggbb or "colour" Specifies the background colour of a table, row or cell (see Footnote 2: Colour for a list of colours.
BACKGROUND="imagefile" Specifies an image to use as a background.
WIDTH n or n% Specifies the width of the table or cell in pixels or as a per centage.
<TABLE CELLSPACING=n> Specifies the amount of space between a tables cells in pixels (the default value is 2).
<TABLE CELLPADDING=n> Specifies the amount of space between a cells contents and its border in pixels (the default value is 0).

Table of Contents


Form Tags
Under Construction.
Element Description
<> ... </> .
<> ... </> .
<> ... </> .
<> ... </> .

Table of Contents

Frame Tags
Under Construction.
Element Description
<> ... </> .
<> ... </> .
<> ... </> .
<> ... </> .

Table of Contents

Style Sheets
Method 1: Embedded Style Sheet
Element Description
<HEAD>
   ...
<STYLE TYPE="text/css">
<!--
Style definitions
-->
</STYLE>
   ...
</HEAD> 		This method uses the STYLE tag embedded within the page header section to apply a particular set of style definitions to a single page.
Table of Contents
Method 2: External Style Sheet
<HEAD>
   ...
<LINK REL="stylesheet" TYPE="text/css" HREF="filename.css">
   ...
</HEAD>		 This creates a link to an external file which contains the style definitions. Every page which contains the link will then use the same style definitions allowing conformity across a website.
Table of Contents
Method 3: Inline Styles
<HTML-Tag STYLE="Style Definition"> ... </HTML-Tag> Here, the STYLE attribute is used in conjunction with an HTML tag such as <H1>, <OL>, etc. For example:
<H1 STYLE="font-size: 24pt">

24 Point

</H1>
NOTE: The Style Definition is placed between quotation marks and not between braces as when STYLE is used as a tag.
<DIV STYLE="Style Definition"> Section </DIV> Here the style is applied to the whole section defined by the DIV tag. The Browser usually treats such a section as a paragraph, inserting line breaks at the beginning and end.
NOTE: The Style Definition is placed between quotation marks and not between braces as when STYLE is used as a tag.
<SPAN STYLE="Style Definition"> Word or Phrase </SPAN> Here the style is applied to the word or phrase defined by the SPAN tag. The Browser does not treat such a "span" as a paragraph.
NOTE: The Style Definition is placed between quotation marks and not between braces as when STYLE is used as a tag.
Table of Contents
Method 4: Style Classes
<HTML-Tag CLASS="ClassName"> ... </HTML-Tag> Here, the CLASS attribute is used in conjunction with an HTML tag such as <DIV>. For example:
<DIV CLASS="TitleText"> Section </DIV>
The style definitions are defined by the ClassName - see next.
.ClassName {style definitions go here} ClassName is a unique name for the class used to define the style. Here is an example:
.TitleText {font-size: 20pt; color: Navy; text-align: center}
Table of Contents
Style Definitions
General Format:
HTML-Tag1[,HTML-Tag2[, ...]] {Property1: Value1[; Property2: Value2[; ...]]}		 This is best illustrated by some examples:
H1 {font-size: 34pt}
H2 {color: purple; font-size: 20pt}
P, OL, UL, DT, DD {font-size: 10pt}
HTML-Tag {font-size: valuept} Sets the font size in points. There are 72 points to the inch.
HTML-Tag {font-family: fontName1[,fontName2[, ...]]} This defines a font family style such as Courier, "Times New Roman", Arial. Note that multiple-word family names must be in quotes. The Browser uses the first one which is installed on the computer.
HTML-Tag {font-weight: value} This defines the font weight (thickness of text). The value can be either a pre-defined weight (normal or bold), or a specific weight (100, 200, 300, 400 (which is normal weight), 500, 600, 700 (which is bold), 800 or 900.
HTML-Tag {font-style: italic or oblique} This places the text either in italics, or some fonts allow an oblique style.
P {indent: valuein} This style definition indents the first line of every paragraph by the specified value in inches.
HTML-Tag {text-align: alignment} This definition sets the alignment of a section of text. Its value may be either:
left
aligns the text with the left side of the Browser window,
center
centres the text within the Browser window,
right
aligns the text with the right side of the Browser window, or
justify
aligns the text with both the left and right sides of the Browser window.
HTML-Tag {text-decoration: decoration} .
HTML-Tag {text-transform: transformation} .
HTML-Tag {color: colourName(2) or #RRGGBB:(2)} .
HTML-Tag {: n} .

Table of Contents

Bibliography

  1. The Complete Idiot's Guide to Creating a Web Page by
  2. HTML 4 for Dummies - 2nd Edition by and

Table of Contents

Footnote (1)
A Deprecated Tag is one which is to be phased out with the next release of HTML.

Deprecated Tags include the following:
Tag What is Deprecated Description
<B> ... </B> Tag only Bolds enclosed text
<BASEFONT> Tag & attributes Selects default font
<CENTER> ... </C> Tag Centres enclosed text
<FONT> ... </FONT> All attributes Selects typeface, size & colour
<HR> Size & width attributes Draws horizontal rule
<I> ... </I> Tag Italicises enclosed text
<S> ... </S> Tag Strikes enclosed text through
<STRIKE> ... </STRIKE> Tag Strikes enclosed text through
<U> ... </U> Tag Underlines enclosed text

Top
Table of Contents

Footnote (2)
Colour
NOTE:

Colour can be specified by a six-digit code of the form #RRGGBB, where RR is the red part of the colour, GG is the green part and BB the blue part. The number base used is hexa-decimal. Thus each code defines a colour using the combination of the three primary colours.

Colour may also be specified by Color Name as defined in the X11 Color Set.

The following table (courtesy of The Complete Idiot's Guide to Creating a Web Page by Paul McFedries ) displays all the colors in the X11 Color Set. You can use either the Color Name or the RGB Value in the tag's COLOR attribute, or in the style sheet's COLOR property.

To view the colors in this table, you need Internet Explorer 3.0 or higher, or Netscape Navigator 3.0 or higher.

Color Color NameRGB Value 

LightPink#FFB6C1

Pink#FFC0CB

Crimson#DC143C

LavenderBlush#FFF0F5

PaleVioletRed#DB7093

HotPink#FF69B4

DeepPink#FF1493

MediumVioletRed#C71585

Orchid#DA70D6

Thistle#D8BFD8

Plum#DDA0DD

Violet#EE82EE

Magenta#FF00FF

Fuchsia#FF00FF

DarkMagenta#8B008B

Purple#800080

MediumOrchid#BA55D3

DarkViolet#9400D3

DarkOrchid#9932CC

Indigo#4B0082

BlueViolet#8A2BE2

MediumPurple#9370DB

MediumSlateBlue#7B68EE

SlateBlue#6A5ACD

DarkSlateBlue#483D8B

Lavender#E6E6FA

GhostWhite#F8F8FF

Blue#0000FF

MediumBlue#0000CD

MidnightBlue#191970

DarkBlue#00008B

Navy#000080

RoyalBlue#4169E1

CornflowerBlue#6495ED

LightSteelBlue#B0C4DE

LightSlateGray#778899

SlateGray#708090

DodgerBlue#1E90FF

AliceBlue#F0F8FF

SteelBlue#4682B4

LightSkyBlue#87CEFA

SkyBlue#87CEEB

DeepSkyBlue#00BFFF

LightBlue#ADD8E6

PowderBlue#B0E0E6

CadetBlue#5F9EA0

Azure#F0FFFF

LightCyan#E0FFFF

PaleTurquoise#AFEEEE

Cyan#00FFFF

Aqua#00FFFF

DarkTurquoise#00CED1

DarkSlateGray#2F4F4F

DarkCyan#008B8B

Teal#008080

MediumTurquoise#48D1CC

LightSeaGreen#20B2AA

Turquoise#40E0D0

Aquamarine#7FFFD4

MediumAquamarine#66CDAA

MediumSpringGreen#00FA9A

MintCream#F5FFFA

SpringGreen#00FF7F

MediumSeaGreen#3CB371

SeaGreen#2E8B57

Honeydew#F0FFF0

LightGreen#90EE90

PaleGreen#98FB98

DarkSeaGreen#8FBC8F

LimeGreen#32CD32
Color Color NameRGB Value 

Lime#00FF00

ForestGreen#228B22

Green#008000

DarkGreen#006400

Chartreuse#7FFF00

LawnGreen#7CFC00

GreenYellow#ADFF2F

DarkOliveGreen#556B2F

YellowGreen#9ACD32

OliveDrab#6B8E23

Beige#F5F5DC

LightGoldenrodYellow#FAFAD2

Ivory#FFFFF0

LightYellow#FFFFE0

Yellow#FFFF00

Olive#808000

DarkKhaki#BDB76B

LemonChiffon#FFFACD

PaleGoldenrod#EEE8AA

Khaki#F0E68C

Gold#FFD700

Cornsilk#FFF8DC

Goldenrod#DAA520

DarkGoldenrod#B8860B

FloralWhite#FFFAF0

OldLace#FDF5E6

Wheat#F5DEB3

Moccasin#FFE4B5

Orange#FFA500

PapayaWhip#FFEFD5

BlanchedAlmond#FFEBCD

NavajoWhite#FFDEAD

AntiqueWhite#FAEBD7

Tan#D2B48C

BurlyWood#DEB887

Bisque#FFE4C4

DarkOrange#FF8C00

Linen#FAF0E6

Peru#CD853F

PeachPuff#FFDAB9

SandyBrown#F4A460

Chocolate#D2691E

SaddleBrown#8B4513

Seashell#FFF5EE

Sienna#A0522D

LightSalmon#FFA07A

Coral#FF7F50

OrangeRed#FF4500

DarkSalmon#E9967A

Tomato#FF6347

MistyRose#FFE4E1

Salmon#FA8072

Snow#FFFAFA

LightCoral#F08080

RosyBrown#BC8F8F

IndianRed#CD5C5C

Red#FF0000

Brown#A52A2A

FireBrick#B22222

DarkRed#8B0000

Maroon#800000

White#FFFFFF

WhiteSmoke#F5F5F5

Gainsboro#DCDCDC

LightGrey#D3D3D3

Silver#C0C0C0

DarkGray#A9A9A9

Gray#808080

DimGray#696969

Black#000000

Top
Table of Contents

Paul Mansbacher

This Page was created 01 April 2000
Copyright © 2000 Paul Mansbacher