Cheat Sheet:
HTML Tags and Attributes

Note: Attributes can generally be put one after the other separated by one space; for example:
<font face="Times New Roman" size="3" color="FFFFFF">Text</font>

Basic Tags

Creates an HTML document -- REQUIRED

Sets off the title and other information that isn't displayed on the Web page itself -- REQUIRED

Puts the name of the document in the title bar -- REQUIRED

Sets off the visible portion of the document -- REQUIRED

Body Attributes:

<body bgcolor="?">
Sets the background color, using name or hex value ("blue" or "#0000FF")

<body background="BACK.gif">
Sets the background using an image file

<body text="?">
Sets the text color, using name or hex value, default is #FFFFFF

<body link="?">
Sets the color of links, using name or hex value, generally #0000FF (blue)

<body vlink="?">
Sets the color of followed links, using name or hex value, generally #800000 (maroon)

<body alink="?">
Sets the color of links on click, generally #FF0000 (red)

<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
Sets the margins of the page to zero. Browsers typically have default values (usually 15 pixels) for page margins. Code above covers both Internet Explorer and Netscape.

<!-- comment -->
Creates an invisible comment - it will not appear on the page as viewed in the browser - it is a note to yourself in the code.

<META HTTP-EQUIV="REFRESH" content="5;url=">
Automatic Redirect Code; 5 is the seconds before redirect.

Special Characters

Non-breaking space - can use to indent or to make a double space: <p>&nbsp;</p>

No separation of words, e.g., <nobr>401(k)</nobr>

Angled bracket: <

Angled bracket: >

The "and" sign: &

Quote mark: "

em (long) dash

Bullet symbol (solid disc)

Dollar sign

&pound; or &#163;
Pound sterling

&yen; or &#165;
Yen sign

&euro; or &#8364;
Euro sign

&copy; or &#169;
Copyright symbol:

Text and Formatting Tags

HTML will recognize one space -- after that, you have to code.

Creates preformatted text

Creates the largest headline

Creates the smallest headline (h2-h5 are in between h1 and h6)

Headline Attributes:

<h1 align="?">
Aligns the headline. Can use "center", "right", "left" or "justify"

Creates bold text

Creates italic text

Creates underlined text -- in general, avoid using (underlining is the default for indicating a link)

Creates teletype, or typewriter-style text

Creates subscript text

Creates superscript text

Creates a citation, usually italic

Emphasizes a word (same as <i>)

Emphasizes a word (same as <b>)

Creates a new paragraph -- do not have to close tag. Can use to create white space (creates a double space)

Paragraph Attributes:

<p align="?">
Aligns a paragraph to the left, right, or center

Inserts a line break -- do not have to close tag. Use to start next line without a space (unlike <p>)

Indents text from both sides

<div align="?"></div>
A generic tag used to format large blocks of HTML, also used for stylesheets

<font face="?"></font>
Sets typeface for font. Make a list for alternatives, i.e., <font face="times new roman, arial">

<font size="?"></font>
Sets size of font, from 1 to 7

1=8 pt
2=10 pt
3=12 pt (standard)
4=14 pt
5=18 pt
6=24 pt
7=36 pt

<font color="?"></font>
Sets font color, using name or hex value


Creates a definition list

Precedes each definition term

Precedes each definition

Creates a numbered list

Ordered List Attributes:

<ol type="?">
Where the types are "1", "a", "A", "I", "i"

<ol start="#">
1,2,3 is the default for ordered lists

Precedes each list item, and adds a number or a bullet (use with <ol> and <ul>)

Creates a bulleted list

Unordered List Attributes:

<ul type="?">
Where the types are "circle" - hollow bullet; "disc" - solid bullet; "square" - solid block


<a href="URL"></a>
Creates a hyperlink. If you use the full address, i.e., "", it is an absolute link. If you use "../index.htm", it is a relative link -- it is in the same file system. Use"../" to indicate "one folder up"

<a href="mailto:EMAIL"></a>
Creates a link to an e-mail address. For example, <a href=""> would create an e-mail message to

<a name="NAME"></a>
Creates a target location within a document -- i.e., a bookmark.

<a href="#NAME"></a>
Links to that target location (bookmark) from elsewhere in the document

A (link) Attributes:

<a href="URL" title="NAME">
Adds simple mouseover text to a text link (see ALT for image mouseover text)

<a href="URL" target="_blank">
The link is opened in a NEW browser window

<a href="URL" style="text-decoration:none">
The link is not underlined (underlining is the default)

Graphical Elements

<img src="URL">
Adds an image (image source). It is a good idea to set up an image folder, i.e., <img src="images/image.gif">

Image Attributes:

<img src="name" align="?">
Aligns an image: "left", "right", "center"; "bottom", "top", "middle"

<img src="name" border="?">
Sets size of border around an image -- this can only be used when the image is a link. The default is 1. If you want no border, use <img src="name" border="0">

<img src="name" width="?">
Sets the width of the image - use # (pixels)

<img src="name" height="?">
Sets the height of the image -- use # (pixels). You should only use width and height if you have the exact size of the image, otherwise it will not look right.

<img src="name" alt="?">
Gives the alternate text for the image; also supplies simple mouseover text for the image

Inserts a horizontal rule

Horizontal Rule Attributes:

<hr size="?">
Sets size (height) of rule -- use # or %. Default is 1pt.

<hr width="?">
Sets width of rule, in percentage (%) or absolute value (#)

<hr noshade>
Creates a rule without a shadow

<hr align="?">
Aligns the rule: "left", "right", "center"; "bottom", "top", "middle"

<hr color="?">
Sets font color, using name or hex value


Creates a table

Sets off each row in a table -- tag close is optional

Sets off each cell in a row

Sets off the table header (a normal cell with bold, centered text)

Table Attributes:

<table border="#">
Sets width of border around table cells

<table bordercolor="?">
Sets the color of the border

<table align="?">
Sets alignment for table: "left", "center", "right"

<table width="?"
Sets width of table - in pixels (#) or as a percentage (%) of document width

<table cellspacing="#">
Sets amount of space between table cells

<table cellpadding="#">
Sets amount of space between a cell's border and its contents

<tr align="?"> or <td align="?">
Sets alignment for cell(s): "left", "center", "right"

<tr valign="?"> or <td valign="?">
Sets vertical alignment for cell(s): "top", "middle", "bottom"

<td bgcolor="?">
Sets the background color of the cell, using name or hex value ("blue" or "#0000FF")

<td background="BACK.gif">
Sets the background of the cell using an image file

<td colspan="#">
Sets number of columns a cell should span

<td rowspan="#">
Sets number of rows a cell should span (default=1)

<td nowrap>
Prevents the lines within a cell from being broken to fit

<td width="?">
Sets width of cell - in pixels (#) or as a percentage (%)

<td height="?">
Sets height of cell - in pixels (#) or as a percentage (%)


Tag in a frames document; can also be nested in other framesets -- replaces <body></body>

Frameset Attributes:

<frameset rows="value,value">
Defines the rows within a frameset, using number in pixels, or percentage of width

<frameset cols="value,value">
Defines the columns within a frameset, using number in pixels, or percentage of width

Defines a single frame -- or region -- within a frameset

Defines what will appear on browsers that don't support frames

Frames Attributes:

<frame src="URL">
Specifies which HTML document should be displayed

<frame name="name">
Names the frame, or region, so it may be targeted by other frames

<frame marginwidth="#">
Defines the left and right margins for the frame; must be equal to or greater than 1

<frame marginheight="#">
Defines the top and bottom margins for the frame; must be equal to or greater than 1

<frame scrolling="VALUE">
Sets whether the frame has a scrollbar; value may equal "yes," "no," or "auto". The default, as in ordinary documents, is auto.

<frame noresize>
Prevents the user from resizing a frame


Creates all forms

<select multiple name="NAME" size="?"></select>
Creates a scrolling menu. Size sets the number of menu items visible before you need to scroll.

Sets off each menu item

<select name="NAME"></select>
Creates a pulldown menu

<textarea name="NAME" cols="40" rows="8"></textarea>
Creates a text box area. Columns set the width; rows set the height.

<input type="checkbox" name="NAME">
Creates a checkbox. Text follows tag.

<input type="radio" name="NAME" value="x">
Creates a radio button. Text follows tag

<input type=text name="foo" size="20">
Creates a one-line text area. Size sets length, in characters.

<input type="submit" value="NAME">
Creates a Submit button

<input type="image" border="0" name="NAME" src="name.gif">
Creates a Submit button using an image

<input type="reset">
Creates a Reset button


For hyperlinks:

a:link{color:#0000FF; text-decoration:underline; 
a:visited{color:#511418; text-decoration:none; 
a:active{color:#FF0000; text-decoration:none; 
a:hover{color:#FF0000; text-decoration:underline; 

For text:

H1 {font-family:Times New Roman, Times; color:#2A057A; 
H2 {font-family:Times New Roman, Times; font-size:14pt; 
H3 {font-family:Times New Roman, Times; font-size:12pt; 
P {font-family:Times New Roman, Times; font-size:12pt; )
LI {font-family:Times New Roman, Times; font-size:12pt; )
TD {font-family:Times New Roman, Times; font-size:12pt; }

<STYLE type="text/css">
BODY {font-family: serif;}
H2, H3 {font-family: Verdana, Helvetica, sans-serif;}
H2 {color: maroon; text-decoration: underline;}
P {margin-left: 3em;}
SUP {font-size: x-small; color: #666666;)
DIV.endnote P {text-indent: -1em; color: #333333;}
.link {text-decoration: underline;)

For more information, see and and


©2003, Kelly Moravec