HTML Reference Sheet
Tags and AttributesColor ChartSymbol Chart

Quick Links
Text Editing
Links
Images, Audio, and Video
Frames
Tables
Lists
Forms
Meta Tags


Basic Tags
<html></html> HTML tags: These wrap around everything in the document
<head></head> Header Tags
<title></title> Title Tags: These must be within the header tags
<body></body> Body Tags
<!--   -->Comment Tags (anything between these will not be seen in browser)

-----Text Editing-----

Appearance Tags
<b></b> Bold Looks like this
<i></i> Italics Looks like this
<u></u> Underline Looks like this
<em></em> Emphasis Looks like this
<strong></strong> Strong Look like this
<big></big> Big Looks like this
<small></small> Small Looks like this
<sub></sub> Subscript Looks like this
<sup></sup> Superscript Looks like this
<pre></pre> Preformatted Text
Looks like this
<code></code> Code Text Looks like this
<tt></tt> Teletype Text Looks like this
<kbd></kbd> Keyboard Text Looks like this
<var></var> Variable Looks like this
<dfn></dfn> Definition Looks like this
<samp></samp> Sample Computer Code Looks like this
<cite></cite> Citation Looks like this
Appearance Attributes
<font></font> Font tags -
color="" Color This is Blue
face="" Font Style This is Arial
size="" Size (1-7 only) This is size 5
Positioning Tags
<p></p> Paragraph (use with attributes)
<h1></h1>...<h6></h6>Headers (number changes size)
<br /> Line Break (equivalent to hitting the enter button)
<hr /> Horizontal Line
Positioning Attributes
align=”” (for <p> or <hr />)Align (left, center, right, justified)
size=”” (for <hr />) Size in pixels, this is the height of the horizontal line.
width=”” (for <hr />) Width in pixels or %
noshade=”” No Shade (renders without the indented look.)

-----Links-----

Linking Tags and Attributes
<a></a> Anchor Tags
href="" URL, Mailto:, or #anchorname (in page link)
name="" Name of the anchor, usually for in page links.
target="" To open new tab/window or in a different frame.

-----Images, Audio, and Video-----

Tags
<img></img> Image Tag
<map></map> Image Map
<area></area> Area Tags: Used within the Image Map tags.
<embed></embed> Embed Tag
<object></object> Object Tags
<param></param> Parameter Tags: Used within the Object Tags.
Attributes
<img></img>src=”” Source URL
width=””, height=””Width, Height
hspace=””, vspace=””Horizontal and Vertical Space
alt=”” Alternate Text
align=”” Align
border="" Border Width
lowsrc=”” Low Resolution Source, use with src=””
usemap=”” Use image map
<map></map>id=”” Name of Map
name=”” Name of Map
<area></area>coords=”” Coordinates
href=”” URL
nohref=”” Used to exclude areas from linking
shape=”” Shape
target=”” Target
<embed/> src=”” Source URL
width=””, height=””Width, Height
hspace=””, vspace=””Horizontal and Vertical Space
align=”” Align
autostart=””/autoplay=””Autostart: Only true or false
loop=”” Looping: Only True or False
<object></object>align=”” Align
data=”” Source URL
width=””, height=””Width and Height
hspace=””, vspace=””Horizontal and Vertical Space
type=””/codetype=””MIME type
classid=”’ File Name, Used with codebase=””
codebase=”” Folder URL
<param /> name=”” Parameter Name
value=”” Value that defines the parameter name.

-----Frames-----

Tags
<frameset></frameset>Frameset tags: replaces body tags if frames are used.
<frame /> Frame Tags
<noframes></noframes>No Frames Tags, for browsers without Frame compatibility.
<iframe></iframe> Inline Frame
Attributes
<frameset></frameset>rows=””Height
cols=”” Width
<frame /> frameborder=”” Border on or off. Either 0 or 1.
marginheight=””/marginwidth=””Margin height or width
noresize=”” Can only use ‘noresize’
src=”” Frame’s URL
scrolling=”” Yes or No.
<iframe /> frameborder=””Border on or off. Either 0 or 1.
marginheight=””/marginwidth=””Margin height or width
src=”” Frame’s URL
scrolling=”” Yes or No.
width=””/height=””Width and Height
align=”” Alignment

-----Tables-----

Tags
<table></table> Outline whole table.
<tr></tr> Table Row
<td></td> Table Cell
<th></th> Table Head
<tbody></tbody> Body of the Table
<tfoot></tfoot> Footer of the Table
<thead></thead> Header of the Table
<colgroup></colgroup>Column Group
<col></col> Column: Used within Colgroup
Attributes
<table></table>align=”” Alignment
cellpadding=”” Cell Padding
cellspacing=”” Cell Spacing
width=””/height=””Width/Height
bgcolor=”” Background Color
<tr></tr><td></td><th></th> align=”” Alignment
bgcolor=”” Background Color
valign=”” Vertical Alignment
char=”” Character: Align must be ‘char’
charoff=”” Offset in characters (align must be char)
width=””, height=””Width, Height
<td></td><th></th> colspan=””/rowspan=””Rows or Columns to span across
<thead></thead><tbody></tbody><tfoot></tfoot> align=”” Alignment
valign=”” Vertical Alignment
char=”” Character: Align must be ‘char’
charoff”” Offset in characters (align must be char)
<colgroup>,<col>align=”” Alignment
valign=”” Vertical Alignment
char=”” Character: Align must be ‘char’
charoff”” Offset in characters (align must be char)
span=”” Columns to Span
width=”” Width

-----Lists-----

Tags
<ol;></ol> Ordered List
<ul></ul> Unordered List
<dl></dl> Definition List
<li></li> List Item
<dt></dt> Definition Term
<dd></dd> Definition
Attributes
<ol>,<ul>,<li>type=”” List Type

-----Forms-----

Tags
<form></form> Form Tags
<input /> Input Tags
<select></select> Select Tags (Dropdown)
<option></option> Option Tags (Within Select tags)
<textarea></textarea>Text Area Tags
<optgroup></optgroup>Option Group
<label></label> Used to label parts of your form.
<fieldset></fieldset>Used to group parts of a form.
<legend></legend> Used to name a fieldset.
Attributes
<form></form>action=”” Where the form sends the data when submitted
method=”” How the data is sent
name=”” Name of the Form
target=”” Target, same as links
<input /> type=”” Type
align=””, alt=””, src=””Only used with type=”image”
checked=”checked” Used to check a box or radio button automatically.
value=”” The Value that is given to your input
size=”” Size
readonly=”readonly”Makes value unchangeable in type=”text” or “password”
maxlength=”” Max Length in Characters, only with text or password
<select></select>name=”” Name
size=”” Size
disabled”” Makes drop down disabled.
multiple=”” Allows user to make multiple choices
<option></option>disabled=”disabled”Makes choice disabled.
selected=”selected”Makes the option displayed when first seen.
label=”” Used with
value=”” Value of an Option
<textarea></textarea>cols=””, rows=””Width and Height
name=”” Name of the textarea
readonly=”readonly” Makes the textarea uneditable
disabled=”disbabled”Disables the textarea
<optgroup> label=”” Label
disabled=”disbabled”Disables the Optgroup
<label></label>for=”” Name of the Input the label is for.
<legend></legend>align=”” Alignment

-----Meta Tags-----

Attributes
<form></form>content=”” Information about the name attribute.
name=”” The name attribute.
http-equiv=””The http-equiv attribute.