HTML Tag Quick Reference Guide

This table summarizes the basic HTML tags.

Note: Some HTML tags do not require ending tags. However, because of the emergence of XML and XHTML, you should be sure to include ending tags and to use lowercase tag names.

Misc

Start Tag
End Tag Attributes Function CSS

 none Your comments go between the start and end tags. Put a space between the -- and your comments. none

A

Start Tag
End Tag Attributes Function CSS

<a>
</a> href="filename"
target="windowname"
style="text-decoration: none" link="#0000ff" vlink="#ff00ff" Moves the focus of the browser to:
• A new page: href="http://www.place.com"
• Elsewhere on this page: href="#place"
To open the new page in a new window, use:
target="new"

To open the page in the same window (escaping from a frame), use:
target="_top"
A.link {
color: blue;
text-decoration: underline;
}
A.visited {
color: purple;
text-decoration: underline/none;
}
A.active {
color: red;
text-decoration: underline;
}

<a>
</a> name="markname" Anchor Mark none

<area>
</area> shape="rect/circle/poly/point"
coords="X,Y,X,Y"
href="imagename" Area definition used with <map>. none

B

Start Tag
End Tag Attributes Function CSS

<blockquote>
</blockquote> none Blockquote provides an easy way to indent text. none

<body>
</body> background="filename"
bgcolor="color value"
text="color value"
link="color value"
vlink="color value"
Follows the </head> tag BODY {
background-image: url(../image.gif);
background-repeat: repeat/repeat-x/repeat-y/no-repeat;
background-attachment: scroll/fixed;
background-position: 20% 30% (or) top/center/bottom left/center/right;
}

<b>
</b> none Bold text. none

<br> </br>
or <br /> clear="left/right/all" For XML and XHTML, include the ending tag. none

C

Start Tag
End Tag Attributes Function CSS

<caption>
</caption> align="left/center/right"
valign="top/middle/bottom" Table caption. See <table>. none

<center>
</center> none Centers the elements it contains. none

<code>
</code> none Courier text. CODE {
font-size: 28.000000pt;
font-weight: Bold;
font-style: Regular;
color: #000000;
text-decoration: none;
vertical-align: baseline;
text-transform: none;
font-family: "Courier";
}

D

Start Tag
End Tag Attributes Function CSS

<dd>
</dd> none Definition List Definition. Used in a definition list after the definition term <dt>. none

<div>
</div> align="right/left/center"
style="property:value;"
class="classname" Apply formatting to the text in a section (division) none

<dl>
</dl> none Definition List. Contains terms <dt> and definitions <dd>:
<dl>
<dt>Term</dt>
<dd>Definition</dd>
</dl> none

<dt>
</dt> none Definition List Term. Followed by a definition <dd>. none

E

Start Tag
End Tag Attributes Function CSS

<em>
</em> none Emphasis. EM.type {
font-size: 28.000000pt;
font-weight: Bold;
font-style: Regular;
color: #000000;
text-decoration: none;
vertical-align: baseline;
text-transform: none;
font-family: "Arial, Symbol";
}

F

Start Tag
End Tag Attributes Function CSS

<font>
</font> face="name, name"
size="+/-value/fixed size"
color="color value" Font is being phased out in favor of CSS styles, but Netcape's failure to apply STYLES to <li> tags makes this tag useful still. none

H

Start Tag
End Tag Attributes Function CSS

<h1-6>
</h1-6> align="center/right" Headings H1.type, H2.type {
display: block;
text-align: left;
text-indent: 0.000000pt;
margin-top: 40.000000pt;
margin-bottom: 60.000000pt;
margin-right: 0.000000pt;
margin-left: 0.000000pt;
font-size: 28.000000pt;
font-weight: Bold;
font-style: Regular;
color: #000000;
background-color: #666666;
text-decoration: none;
vertical-align: baseline;
text-transform: none;
font-family: "Arial, Helvetica, Times";
}

<head>
</head> none Contains document TITLE, STYLE, META, and SCRIPT information

<hr>
</hr>
or
<hr /> size="XX"
width="XX/XX%"
noshade Horizontal Rule none

<html>
</html> none HTML file specifier none

I

Start Tag
End Tag Attributes Function CSS

<img>
</img> src="filename"
align="left/right"
width="XXX"
height="XXX"
alt="text that desribes image"
ISMAP
USEMAP="#mapname" Insert image. To add hot spots, use <map>. Specify the HEIGHT and WIDTH attributes for EVERY image on your page; This enables your page will to display before the download finishes. none

<i>
</i> none Italicize text. none

K

Start Tag
End Tag Attributes Function CSS

<kbd>
</kbd> none Keyboard font. See also <tt> and <pre>. none

L

Start Tag
End Tag Attributes Function CSS

<li>
</li> Set <ol> to have type="I/A/1/a/i"
Set li to have value="value to start counting at"
Set <ul> to have type="disc/circle/square" List Item for <ol> and <ul> lists. LI.Bullet {
display: block;
text-align: left;
text-indent: 0.000000pt;
margin-top: 40.000000pt;
margin-bottom: 60.000000pt;
margin-right: 0.000000pt;
margin-left: 0.000000pt;
font-size: 28.000000pt;
font-weight: Bold;
font-style: Regular;
color: #000000;
text-decoration: none;
vertical-align: baseline;
text-transform: none;
font-family: "Arial";
}

<link
> rel=stylesheet
type="text/css"
href="URL" Link to external CSS File none

M

Start Tag
End Tag Attributes Function CSS

<map>
</map> name="mapname" Map definition. See also <area>. none

<meta>

</meta> name="keywords/description/author/
generator/abstract/expiration"
content="your information" none none

O

Start Tag
End Tag Attributes Function CSS

<ol>
</ol> type="I/A/1/a/i"
Set li to have value="value to start counting at" Ordered List--contains <li> elements. The lowest number is 1; however, you can use an "O" to stand in as a "0" if required. For an unnumbered (unordered) list, use <ul>. none

P

Start Tag
End Tag Attributes Function CSS

<p>
</p> align="center/right" Paragraph P.type {
display: block;
text-align: left;
text-indent: 0.000000pt;
margin-top: 40.000000pt;
margin-bottom: 60.000000pt;
margin-right: 0.000000pt;
margin-left: 0.000000pt;
font-size: 28.000000pt;
font-weight: Bold;
font-style: Regular;
color: #000000;
background-color: #ffffee;
background-image: url(image.gif);
background-repeat: repeat-y;
border: double thick red;
text-decoration: none;
vertical-align: baseline;
text-transform: none;
font-family: "Arial, Courier";
}

<pre>
</pre> none Pre-formatted text (your line-breaks and spaces are displayed. See also <tt> and <kbd>. PRE.Code {
font-size: 28.000000pt;
font-weight: Bold;
font-style: Regular;
color: #000000;
text-decoration: none;
vertical-align: baseline;
text-transform: none;
font-family: "Courier";
}

S

Start Tag
End Tag Attributes Function CSS

<span>
</span> style="property:value;"
class="classname" Apply font characteristics to a section of text. Useful when Netscape has not implemented CSS characteristics--for example, to <li> tags. SPAN.Bold {
font-size: 28.000000pt;
font-weight: Bold;
font-style: Regular;
color: #000000;
text-decoration: none;
vertical-align: baseline;
text-transform: none;
font-family: "Arial";
}

<strong>
</strong> style="property:value;"
class="classname" Bold text. STRONG.BoldEmphasis {
font-size: 28.000000pt;
font-weight: Bold;
font-style: Italic;
color: #000000;
text-decoration: none;
vertical-align: baseline;
text-transform: none;
font-family: "Arial";
}

<style>
</style> tag.class {
property: value;
} Style Definition Area: style declarations go between begin and end style tags:
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: black;
font-weight: normal;
} none

T

Start Tag
End Tag Attributes Function CSS

<table>
</table> border="X"
width="XX/X%"
cellspacing="XX"
cellpadding="XX"
bgcolor="color value" background="filename" Table. Accepts <th> table header and <caption>; requires <tr> table row and <td> table data. TABLE {
background-image: url(../image.gif);
}

<td>
</td> align="left/center/right"
valign="top/middle/bottom"
width=X
nowrap
colspan="X"
rowspan="X"
bgcolor="color value" Table Data. Found in <tr> table row. none

<th>
</th> align="left/center/right"
valign="top/middle/bottom"
width=X
nowrap
colspan="X"
rowspan="X"
bgcolor="color value" Table Header none

<title>
</title> none Title that appears in the browser's title bar. none

<tr>
</tr> align="left/center/right"
valign="top/middle/bottom"
bgcolor="color value" Table Row. Found in <table>.
Must contain <td> table data. none

<tt>
</tt> none Typewriter Text. See also <pre> and <kbd>. none

U

Start Tag
End Tag Attributes Function CSS

<ul>
</ul> type="disc/circle/square" Unordered List--contains <li> elements. For a numbered (ordered) list, use <ol>. none

V

Start Tag
End Tag Attributes Function CSS

<var>
</var> none Text for a user-defined variable. CODE {
font-size: 28.000000pt;
font-weight: Regular;
font-style: Oblique;
color: #000000;
text-decoration: none;
vertical-align: baseline;
text-transform: none;
font-family: "Courier";
}

Special Characters

  •  –  —  ™ 

Ÿ  ¡ ¡ ¢ ¢ £ £ ¤ ¤

¥ ¥ ¦ ¦ § § © © ¬ ¬

® ® ¯ ¯ ° ° ± ± ² ²

³ ³ & & ¢ ¢ < < > >

Frame Tags

Function Start Tag Attributes End Tag

Set Frames <frameset> cols="XX/XX%/*"
rows="XX/XX%/*" </frameset>

Frame Definition <frame> src="filename"
name="framename"
noresize
scroll=auto/yes/no
marginwidth="XX"
marginheight="XX" </frame>

Base <base> target="framename"/
"_self"/
"_top"/
"_parent"
(Note the underscores) </base>

No Frames <noframes> Between start and end tags, place the content that appears when a non-frames browser loads this page. </noframes>

Form Tags

Function Start Tag Attributes End Tag

Form <form> method=get/put
action="programname" </form>

Input Field <input> name="variablename"
type=text/password/
checkbox/radio/submit/
reset/image </input>

Selection List <select> name="variablename"
size=XX
multiple </select>
Selection Option <option> none </option>

Scrolling Text Field <textarea> name="variablename"
rows=XX cols=XX </textarea>

Misc
Start Tag End Tag	Attributes	Function	CSS
<!-- -->	none	Your comments go between the start and end tags. Put a space between the -- and your comments.	none
A
Start Tag End Tag	Attributes	Function	CSS
<a> </a>	href="filename" target="windowname" style="text-decoration: none" link="#0000ff" vlink="#ff00ff"	Moves the focus of the browser to: • A new page: href="http://www.place.com" • Elsewhere on this page: href="#place" To open the new page in a new window, use: target="new" To open the page in the same window (escaping from a frame), use: target="_top"	A.link { color: blue; text-decoration: underline; } A.visited { color: purple; text-decoration: underline/none; } A.active { color: red; text-decoration: underline; }
<a> </a>	name="markname"	Anchor Mark	none
<area> </area>	shape="rect/circle/poly/point" coords="X,Y,X,Y" href="imagename"	Area definition used with <map>.	none
B
Start Tag End Tag	Attributes	Function	CSS
<blockquote> </blockquote>	none	Blockquote provides an easy way to indent text.	none
<body> </body>	background="filename" bgcolor="color value" text="color value" link="color value" vlink="color value"	Follows the </head> tag	BODY { background-image: url(../image.gif); background-repeat: repeat/repeat-x/repeat-y/no-repeat; background-attachment: scroll/fixed; background-position: 20% 30% (or) top/center/bottom left/center/right; }
<b> </b>	none	Bold text.	none
<br> </br> or <br />	clear="left/right/all"	For XML and XHTML, include the ending tag.	none
C
Start Tag End Tag	Attributes	Function	CSS
<caption> </caption>	align="left/center/right" valign="top/middle/bottom"	Table caption. See <table>.	none
<center> </center>	none	Centers the elements it contains.	none
<code> </code>	none	Courier text.	CODE { font-size: 28.000000pt; font-weight: Bold; font-style: Regular; color: #000000; text-decoration: none; vertical-align: baseline; text-transform: none; font-family: "Courier"; }
D
Start Tag End Tag	Attributes	Function	CSS
<dd> </dd>	none	Definition List Definition. Used in a definition list after the definition term <dt>.	none
<div> </div>	align="right/left/center" style="property:value;" class="classname"	Apply formatting to the text in a section (division)	none
<dl> </dl>	none	Definition List. Contains terms <dt> and definitions <dd>: <dl> <dt>Term</dt> <dd>Definition</dd> </dl>	none
<dt> </dt>	none	Definition List Term. Followed by a definition <dd>.	none
E
Start Tag End Tag	Attributes	Function	CSS
<em> </em>	none	Emphasis.	EM.type { font-size: 28.000000pt; font-weight: Bold; font-style: Regular; color: #000000; text-decoration: none; vertical-align: baseline; text-transform: none; font-family: "Arial, Symbol"; }
F
Start Tag End Tag	Attributes	Function	CSS
<font> </font>	face="name, name" size="+/-value/fixed size" color="color value"	Font is being phased out in favor of CSS styles, but Netcape's failure to apply STYLES to <li> tags makes this tag useful still.	none
H
Start Tag End Tag	Attributes	Function	CSS
<h1-6> </h1-6>	align="center/right"	Headings	H1.type, H2.type { display: block; text-align: left; text-indent: 0.000000pt; margin-top: 40.000000pt; margin-bottom: 60.000000pt; margin-right: 0.000000pt; margin-left: 0.000000pt; font-size: 28.000000pt; font-weight: Bold; font-style: Regular; color: #000000; background-color: #666666; text-decoration: none; vertical-align: baseline; text-transform: none; font-family: "Arial, Helvetica, Times"; }
<head> </head>	none	Contains document TITLE, STYLE, META, and SCRIPT information
<hr> </hr> or <hr />	size="XX" width="XX/XX%" noshade	Horizontal Rule	none
<html> </html>	none	HTML file specifier	none
I
Start Tag End Tag	Attributes	Function	CSS
<img> </img>	src="filename" align="left/right" width="XXX" height="XXX" alt="text that desribes image" ISMAP USEMAP="#mapname"	Insert image. To add hot spots, use <map>. Specify the HEIGHT and WIDTH attributes for EVERY image on your page; This enables your page will to display before the download finishes.	none
<i> </i>	none	Italicize text.	none
K
Start Tag End Tag	Attributes	Function	CSS
<kbd> </kbd>	none	Keyboard font. See also <tt> and <pre>.	none
L
Start Tag End Tag	Attributes	Function	CSS
<li> </li>	Set <ol> to have type="I/A/1/a/i" Set li to have value="value to start counting at" Set <ul> to have type="disc/circle/square"	List Item for <ol> and <ul> lists.	LI.Bullet { display: block; text-align: left; text-indent: 0.000000pt; margin-top: 40.000000pt; margin-bottom: 60.000000pt; margin-right: 0.000000pt; margin-left: 0.000000pt; font-size: 28.000000pt; font-weight: Bold; font-style: Regular; color: #000000; text-decoration: none; vertical-align: baseline; text-transform: none; font-family: "Arial"; }
<link >	rel=stylesheet type="text/css" href="URL"	Link to external CSS File	none
M
Start Tag End Tag	Attributes	Function	CSS
<map> </map>	name="mapname"	Map definition. See also <area>.	none
<meta> </meta>	name="keywords/description/author/ generator/abstract/expiration" content="your information"	none	none
O
Start Tag End Tag	Attributes	Function	CSS
<ol> </ol>	type="I/A/1/a/i" Set li to have value="value to start counting at"	Ordered List--contains <li> elements. The lowest number is 1; however, you can use an "O" to stand in as a "0" if required. For an unnumbered (unordered) list, use <ul>.	none
P
Start Tag End Tag	Attributes	Function	CSS
<p> </p>	align="center/right"	Paragraph	P.type { display: block; text-align: left; text-indent: 0.000000pt; margin-top: 40.000000pt; margin-bottom: 60.000000pt; margin-right: 0.000000pt; margin-left: 0.000000pt; font-size: 28.000000pt; font-weight: Bold; font-style: Regular; color: #000000; background-color: #ffffee; background-image: url(image.gif); background-repeat: repeat-y; border: double thick red; text-decoration: none; vertical-align: baseline; text-transform: none; font-family: "Arial, Courier"; }
<pre> </pre>	none	Pre-formatted text (your line-breaks and spaces are displayed. See also <tt> and <kbd>.	PRE.Code { font-size: 28.000000pt; font-weight: Bold; font-style: Regular; color: #000000; text-decoration: none; vertical-align: baseline; text-transform: none; font-family: "Courier"; }
S
Start Tag End Tag	Attributes	Function	CSS
<span> </span>	style="property:value;" class="classname"	Apply font characteristics to a section of text. Useful when Netscape has not implemented CSS characteristics--for example, to <li> tags.	SPAN.Bold { font-size: 28.000000pt; font-weight: Bold; font-style: Regular; color: #000000; text-decoration: none; vertical-align: baseline; text-transform: none; font-family: "Arial"; }
<strong> </strong>	style="property:value;" class="classname"	Bold text.	STRONG.BoldEmphasis { font-size: 28.000000pt; font-weight: Bold; font-style: Italic; color: #000000; text-decoration: none; vertical-align: baseline; text-transform: none; font-family: "Arial"; }
<style> </style>	tag.class { property: value; }	Style Definition Area: style declarations go between begin and end style tags: p { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: black; font-weight: normal; }	none
T
Start Tag End Tag	Attributes	Function	CSS
<table> </table>	border="X" width="XX/X%" cellspacing="XX" cellpadding="XX" bgcolor="color value" background="filename"	Table. Accepts <th> table header and <caption>; requires <tr> table row and <td> table data.	TABLE { background-image: url(../image.gif); }
<td> </td>	align="left/center/right" valign="top/middle/bottom" width=X nowrap colspan="X" rowspan="X" bgcolor="color value"	Table Data. Found in <tr> table row.	none
<th> </th>	align="left/center/right" valign="top/middle/bottom" width=X nowrap colspan="X" rowspan="X" bgcolor="color value"	Table Header	none
<title> </title>	none	Title that appears in the browser's title bar.	none
<tr> </tr>	align="left/center/right" valign="top/middle/bottom" bgcolor="color value"	Table Row. Found in <table>. Must contain <td> table data.	none
<tt> </tt>	none	Typewriter Text. See also <pre> and <kbd>.	none
U
Start Tag End Tag	Attributes	Function	CSS
<ul> </ul>	type="disc/circle/square"	Unordered List--contains <li> elements. For a numbered (ordered) list, use <ol>.	none
V
Start Tag End Tag	Attributes	Function	CSS
<var> </var>	none	Text for a user-defined variable.	CODE { font-size: 28.000000pt; font-weight: Regular; font-style: Oblique; color: #000000; text-decoration: none; vertical-align: baseline; text-transform: none; font-family: "Courier"; }

Special Characters
	•	–	—	™
Ÿ	¡ ¡	¢ ¢	£ £	¤ ¤
¥ ¥	¦ ¦	§ §	© ©	¬ ¬
® ®	¯ ¯	° °	± ±	² ²
³ ³	& &	¢ ¢	< <	> >

Frame Tags
Function	Start Tag	Attributes	End Tag
Set Frames	<frameset>	cols="XX/XX%/" rows="XX/XX%/"	</frameset>
Frame Definition	<frame>	src="filename" name="framename" noresize scroll=auto/yes/no marginwidth="XX" marginheight="XX"	</frame>
Base	<base>	target="framename"/ "_self"/ "_top"/ "_parent" (Note the underscores)	</base>
No Frames	<noframes>	Between start and end tags, place the content that appears when a non-frames browser loads this page.	</noframes>

Form Tags
Function	Start Tag	Attributes	End Tag
Form	<form>	method=get/put action="programname"	</form>
Input Field	<input>	name="variablename" type=text/password/ checkbox/radio/submit/ reset/image	</input>
Selection List	<select>	name="variablename" size=XX multiple	</select>
Selection Option	<option>	none	</option>
Scrolling Text Field	<textarea>	name="variablename" `rows=XX cols=XX`	</textarea>