HTML Cheat Sheet

Under Contruction -- Old HTML Cheat Sheet is available here.

Essential Tags

<html>
 <head>
  <title>website title</title>
 </head>
 <body>
  content of website ...
 </body>
</html>

The Basics

 
<h?> ... </h?>Heading (?= 1 for largest to 6 for smallest, eg h1)
<p> ... </p>Paragraph of Text
<b> ... </b>Bold Text
<i> ... </i>Italic Text

Text Formatting

Top
<b> ... </b>Bold Text
<u> ... </u>Underline Text
<blockquote> ... </blockquote>Text Block Quote

Section Divisions

Top
<b> ... </b>Bold Text
<u> ... </i>Underline Text

Images

Top
<img src="url" alt="text"> Basic Image
<img> Tag Attributes:
src="url"URL or filename of image (required!)
alt="text"Alternate Text (required!)
align="?"Image alignment within surrounding text (*)
width="??"Image width (in pixels or %)
height="??"Image height (in pixels or %)
border="??"Border thickness (in pixels) (*)
vspace="??"Space above and below image (in pixels) (*)
hspace="??"Space on either side of image (in pixels) (*)

Linking Tags

Top
<a href="url"> link text </a>Basic Link
<a> Tag Attributes:
href="url" Location (url) of page to link to.
name="??" Name of link (name of anchor, or name of bookmark)
target="?" Link target location: _self, _blank, _top, _parent.
href="url#bookmark" Link to bookmark (define with name attribute.
href="mailto:email" Link to initial email (dependant on user's email client).

Lists

Top
<ol> ... </ol>Ordered List
<ul> ... </ul>Un-ordered List
<li> ... </li>List Item (within ordered or unordered)
<ol type="?"> Ordered list type: A, a, I, i, 1
<ol start="??"> Ordered list starting value
<ul type="?"> Unordered list bullet type: disc, circle, square
<li value="??"> List Item Value (changes current and subsequent items)
<li type="??"> List Item Type (changes only current item)
<dl> ... </dl>Definition List
<dt> ... </dt>Term or phrase being defined
<dd> ... </dd>Detailed Definition of term

Tables

Top
<table> Tag Attributes:
border="?" Thickness of outside border
bordercolor="#??????" Border Colour
bgcolor="#??????" Background Colour (*)
width="??" Table Width (pixels or %) (*)
height="??" Table Height (pixels or %) (*)
cellspacing="?" Space between cells (pixels)
cellpadding="?" Space between cell wall and content
align="??" Horizontal Alignment: left, center, right (*)
<td> Tag Attributes:
width="??" Cell Width (pixels or %) (*)
height="??" Cell Height (pixels or %) (*)
bgcolor="#??????" Background Colour (*)
align="??" Horizontal Alignment: left, center, right (*)
valign="??" Vertical Alignment: top, middle, bottom (*)
colspan="?" Number of columns the cell spans across (cell merge)
rowspan="?" Number of row a cell spans across (cell merge)
nowrap Force no line breaks in a particular cell

Frames

Top
<frameset> Tag Attributes:
rows="??,??, ..." Define row sizes & number of rows (size in pixels or %)
cols="??,??, ..." Define column sizes & number of columns (size in pixels or %)
noresize="noresize" User cannot resize any frames in frameset
<frame> Tag Attributes:
src="url" Location of HTML File for a frame
name="***" Unique name of frame window
marginwidth="?" Horizontal margin spacing inside frame (pixels)
marginheight="?" Vertical margin spacing inside frame (pixels)
noresize="noresize" Declare all frameset sizes as fixed
scrolling="***" Can the user scroll inside the frame: yes, no, auto
frameborder="?" Frame Border: (1=yes, 2=no) (*)
bordercolor="#??????" Border Colour (*)
<noframes> ... </noframes>Unframed content (for browsers not supporting frames)

Forms

Top
<form> Tag Attributes:
action="url" URL of Form Script
method="***" Method of Form: get, post
enctype="***" For File Upload: enctype="multipart/form-data"
<input> Tag Attributes:
type="***" Input Field Type: text, password, checkbox, button etc.
name="***" Form Field Name (for form processing script)
value="***" Value of Input Field
size="***" Field Size
maxlength="?" Maximum Length of Input Field Data
checked Mark selected field in radio button group or checkbox
<button> Tag Attributes:
type="***" Button Type: submit, reset, button
name="***" Button Name (for form processing script)
value="***" Label on Button
size="?" Button Size (width)
<select> Tag Attributes:
name="***" Drop Down Combo-Box Name (for form processing script)
size="?" Number of selectable options
multiple Allow multiple selections
<option> Tag Attributes:
value="***" Option Value
selected Set option as default selected option
<textarea> Tag Attributes:
name="***" Text Area Name (for form processing script)
rows="?" Number of rows of text shown
cols="?" Number of columns (characters per rows)
wrap="***" Word Wrapping: off, hard, soft

Body Background & Colours

Top
<body> Tag Attributes:
background="url"Background Image
bgcolor="#??????" Background Colour
text="#??????" Document Text Colour
link="#??????" Link Colour
vlink="#??????" Visited Link Colour
alink="#??????" Active Link Colour
bgproperties="fixed" Background Properties - "Fixed" = non-scrolling watermark
leftmargin="?" Side Margin Size in Pixels (Internet Explorer) (*)
topmargin="?" Top Margin Size in Pixels (Internet Explorer) (*)

Important Note:

Tags marked with (*) should still work, but have superseeded by stylesheets (css), which is now the recommended way to change the font, colour, spacing, border or alignment of html elements.