Basic HTML Structure

The Basics

<h?> … </h?>

Heading (?= 1 for largest to 6 for smallest, eg h1)

<p> … </p>

Paragraph of Text

<b> … </b>

Bold Text

<a href=”url”> … </a>

Basic Link

Text Formatting

<h?> … </h?>

Heading (?= 1 for largest to 6 for smallest, eg h1)

<b> … </b>

Bold Text

<i> … </i>

Italic Text

<u> … </u>

Underline Text

<strike> … </strike>

Strikeout

^…

Superscript – Smaller text placed below normal text

_…

Subscript – Smaller text placed below normal text

<small> … </small>

Small – Fineprint size text

<tt> … </tt>

Typewriter Text

<pre> … </pre>

Pre-formatted Text

<blockquote> … </blockquote>

Text Block Quote

<strong> … </strong>

Strong – Shown as Bold in most browsers

<em> … </em>

Emphasis – Shown as Italics in most browsers

<font> … </font>

Font tag obsolete, use CSS. (*)

Section Divisions

Division (or Section) of Page Content

<p> … </p>

Paragraph of Text

<br>

Line Break

<hr>

Basic Horizontal Line

<hr> Tag Attributes:

size=”?”

Line Thickness in pixels

width=”?”

Line Width in pixels

width=”??%”

Line Width as a percentage

color=”#??????”

Line Colour (*)

align=”?”

Horizontal Alignment: left, center, right (*)

noshade

No 3D cut-out

<nobr> … </nobr>

Line Break

Images

<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

<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 a bookmark (defined with name attribute).

href=”mailto:email”

Link which initiates an email (dependant on user’s email client).

Lists

<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

<table> … </table>

Define a Table

<table> Tag Attributes:

border=”?”

Thickness of outside border

bordercolor=”#??????”

Border Colour

cellspacing=”?”

Space between cells (pixels)

cellpadding=”?”

Space between cell wall and content

align=”??”

Horizontal Alignment: left, center, right (*)

bgcolor=”#??????”

Background Colour (*)

width=”??”

Table Width (pixels or %) (*)

height=”??”

Table Height (pixels or %) (*)

<tr> … </tr>

Table Row within table

<th> … </th>

Header Cell within table row

<td> … </td>

Table Cell within table row

<td> Tag Attributes:

colspan=”?”

Number of columns the cell spans across (cell merge)

rowspan=”?”

Number of row a cell spans across (cell merge)

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 (*)

nowrap

Force no line breaks in a particular cell

Frames

<frameset> … </frameset>

Define the set of Frames

<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> … </frame>

Define a frame within the 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

<form> … </form>

Form input group decleration

<form> Tag Attributes:

action=”url”

URL of Form Script

method=”***”

Method of Form: get, post

enctype=”***”

For File Upload: enctype=”multipart/form-data”

<input> … </input>

Input field within form

<input> Tag Attributes:

type=”***”

Input Field Type: text, password, checkbox, submit 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

<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

&lt;

< – Less-Than Symbol

&gt;

> – Greater-Than Symbol

&amp;

& – Ampersand, or ‘and’ sign

&quot;

” – Quotation Mark

&copy;

© – Copyright Symbol

&trade;

™ – Trademark Symbol

&nbsp;

 – 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:

name=”***”

Meta name: description, keywords, author

http-equiv=”***”

HTTP Equivalent Info: title, etc.

content=”***”

Information content

<link>

LINK content relationship tag

<link> Tag Attributes:

rel=”***”

Type of forward relationship

http=”url”

Location (URL) of object or file being linked

type=”***”

Type of object or file, eg: text/css

title=”***”

Link title (optional)

Body Background & Colours

<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) (*)