Basic HTML Structure
Basic HTML Structure
<h?> ... </h?> Heading (?= 1 for largest to 6 for smallest, eg h1) <ol> ... </ol> Ordered List
<p> ... </p> Paragraph of Text <ul> ... </ul> Un-ordered List
<b> ... </b> Bold Text <li> ... </li> List Item (within ordered or unordered)
<a href="url"> ... </a> Basic Link <ol type="?"> Ordered list type: A, a, I, i, 1
Text Formatting <ol start="??"> Ordered list starting value
<ul type="?"> Unordered list bullet type: disc, circle, square
<h?> ... </h?> Heading (?= 1 for largest to 6 for smallest, eg h1) <li value="??"> List Item Value (changes current and subsequent items)
<b> ... </b> Bold Text <li type="??"> List Item Type (changes only current item)
<i> ... </i> Italic Text <dl> ... </dl> Definition List
<u> ... </u> Underline Text <dt> ... </dt> Term or phrase being defined
<strike> ... </strike> Strikeout <dd> ... </dd> Detailed Definition of term
<sup> ... </sup> Superscript - Smaller text placed below normal text Tables
<sub> ... </sub> Subscript - Smaller text placed below normal text
<small> ... </small> Small - Fineprint size text <table> ... </table> Define a Table
<tt> ... </tt> Typewriter Text <table> Tag Attributes:
<pre> ... </pre> Pre-formatted Text border="?" Thickness of outside border
<blockquote> ... </blockquote> Text Block Quote bordercolor="#??????" Border Colour
<strong> ... </strong> Strong - Shown as Bold in most browsers cellspacing="?" Space between cells (pixels)
<em> ... </em> Emphasis - Shown as Italics in most browsers cellpadding="?" Space between cell wall and content
<font> ... </font> Font tag obsolete, use CSS. (*) align="??" Horizontal Alignment: left, center, right (*)
Section Divisions bgcolor="#??????" Background Colour (*)
width="??" Table Width (pixels or %) (*)
<div> ... </div> Division (or Section) of Page Content height="??" Table Height (pixels or %) (*)
<p> ... </p> Paragraph of Text <tr> ... </tr> Table Row within table
<br> Line Break <th> ... </th> Header Cell within table row
<hr> Basic Horizontal Line <td> ... </td> Table Cell within table row
<hr> Tag Attributes: <td> Tag Attributes:
size="?" Line Thickness in pixels colspan="?" Number of columns the cell spans across (cell merge)
width="?" Line Width in pixels rowspan="?" Number of row a cell spans across (cell merge)
width="??%" Line Width as a percentage width="??" Cell Width (pixels or %) (*)
color="#??????" Line Colour (*) height="??" Cell Height (pixels or %) (*)
align="?" Horizontal Alignment: left, center, right (*) bgcolor="#??????" Background Colour (*)
noshade No 3D cut-out align="??" Horizontal Alignment: left, center, right (*)
<nobr> ... </nobr> Line Break valign="??" Vertical Alignment: top, middle, bottom (*)
Images nowrap Force no line breaks in a particular cell
Frames
<img src="url" alt="text"> Basic Image
<img> Tag Attributes: <frameset> ... </frameset> Define the set of Frames
src="url" URL or filename of image (required!) <frameset> Tag Attributes:
alt="text" Alternate Text (required!) rows="??,??, ..." Define row sizes & number of rows (size in pixels or %)
align="?" Image alignment within surrounding text (*) cols="??,??, ..." Define column sizes & number of columns (size in pixels or %)
width="??" Image width (in pixels or %) noresize="noresize" User cannot resize any frames in frameset
height="??" Image height (in pixels or %) <frame> ... </frame> Define a frame within the frameset
border="??" Border thickness (in pixels) (*) <frame> Tag Attributes:
vspace="??" Space above and below image (in pixels) (*)
1
src="url" Location of HTML File for a frame name="***" Meta name: description, keywords, author
name="***" Unique name of frame window http-equiv="***" HTTP Equivalent Info: title, etc.
marginwidth="?" Horizontal margin spacing inside frame (pixels) content="***" Information content
marginheight="?" Vertical margin spacing inside frame (pixels) <link> LINK content relationship tag
noresize="noresize" Declare all frameset sizes as fixed <link> Tag Attributes:
scrolling="***" Can the user scroll inside the frame: yes, no, auto rel="***" Type of forward relationship
frameborder="?" Frame Border: (1=yes, 2=no) http="url" Location (URL) of object or file being linked
bordercolor="#??????" Border Colour (*) type="***" Type of object or file, eg: text/css
<noframes> ... </noframes> Unframed content (for browsers not supporting frames) title="***" Link title (optional)
Forms Body Background & Colours
<form> ... </form> Form input group decleration <body> Tag Attributes:
<form> Tag Attributes: background="url" Background Image (*)
action="url" URL of Form Script bgcolor="#??????" Background Colour (*)
method="***" Method of Form: get, post text="#??????" Document Text Colour (*)
enctype="***" For File Upload: enctype="multipart/form-data" link="#??????" Link Colour (*)
<input> ... </input> Input field within form vlink="#??????" Visited Link Colour (*)
<input> Tag Attributes: alink="#??????" Active Link Colour (*)
type="***" Input Field Type: text, password, checkbox, submit etc. bgproperties="fixed" Background Properties - "Fixed" = non-scrolling watermark (*)
name="***" Form Field Name (for form processing script) leftmargin="?" Side Margin Size in Pixels (Internet Explorer) (*)
value="***" Value of Input Field topmargin="?" Top Margin Size in Pixels (Internet Explorer) (*)
size="***" Field Size
maxlength="?" Maximum Length of Input Field Data
checked Mark selected field in radio button group or checkbox
<select> ... </select> Select options from drop down list
<select> Tag Attributes:
name="***" Drop Down Combo-Box Name (for form processing script)
size="?" Number of selectable options
multiple Allow multiple selections
<option> ... </option> Option (item) within drop down list
<option> Tag Attributes:
value="***" Option Value
selected Set option as default selected option
<textarea> ... </textarea> Large area for text input
<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
Special Characters
< < - Less-Than Symbol
> > - Greater-Than Symbol
& & - Ampersand, or 'and' sign
" " - Quotation Mark
© © - Copyright Symbol
™ ™ - Trademark Symbol
- A space (non-breaking space)
&#??; ISO 8859-1 character - replace ?? with the iso code
Miscellaneous Tags
<!-- ... --> Comment within HTML source code
<!DOCTYPE html ... > Document Type Definition (wiki)
<meta> ... </meta> META information tag
<meta> Tag Attributes: