HTML 3.2 Quick Reference

This document is an attempt to fill the gap between Kevin Werbach's Bare Bones Guide and the definitive guides produced by the Web Design Group and the World Wide Web Consortium. It is not a HTML primer nor is it a tutorial for the design of Web pages.

I have taken Michael Grobe's HTML Quick Reference (a guide to HTML 2.0), torn it apart, then rebuilt it with input from the guides mentioned above. Any errors and omissions are mine alone. In areas of confusion the definitive reference is the HTML 3.2 Reference Specification.

The HyperText Markup Language (HTML) is composed of a set of elements that define a document and guide its display. This document attempts to present a quick reference guide to HTML 3.2 - all the elements in the draft document for HTML 3.2 are listed, plus a brief description of those elements. HTML 3.2 builds on version 2.0, HTML+ and the experimental version 3.0, it is also an attempt to bring order and some legitimacy to the rogue elements introduced by Netscape, Microsoft and others. It is backwards compatible with HTML 2.0. As an aside I have mentioned some elements that are not part of the HTML 3.2 standard where these are in widespread use but I would emphasise that these are not part of the standard and their use should be avoided wherever possible.

Designers need to be aware that HTML is an evolving language, this document is based on the draft standard which has yet to be finalised, and that different Web browsers may recognise slightly different subsets of HTML elements and render them differently.

General information about HTML including plans for new versions can be found at W3C.

An HTML element consists of an opening tag and a closing tag. The closing tag is not always used, it may be optional or even forbidden. An opening tag may have attributes. An opening and closing tag form a container, which may contain text or other elements. An opening tag without a corresponding closing tag forms an empty container.

<tag> ... </tag>

<tag attribute=value> ... </tag>

<tag>

<tag attribute=value>

For example

<title>

</title>

and

<a href="URL">

</a>

The value of the attribute will be selected from a list (in which case quotes are not required) or be a supplied string (in which case quotes are advisable).

<h1 align=center> ... </h1> 

<a name="string"> ... </a> 

An HTML document is composed of a single element

<html>

</html>

this in turn is composed of head and body elements

<head>

</head>

and

<body>

</body>

For backwards compatibility, <html>, <head>, and <body> are optional within HTML documents, but it is recommended practice to always include them.

It is now mandatory for the document to be preceded by an SGML prologue which identifies the file as HTML and states the version of HTML used.

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Draft//EN">

When finalised the Draft will be replaced by Final or it may be omitted altogether.

A minimal document would appear as follows

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Draft//EN">

<html>

<head>

<title> A minimal document </title>

</head>

<body>

... some text ...

</body>

</html>

With the exception of character entities used to specify non-English characters and special symbols the tags are not case sensitive.

Elements placed in the head element

The head element is used to provide information about the document. The primary purpose of the <head> element is to provide information to robots.

<title> ... </title>

Document title. It will usually appear in a window bar identifying the contents of the window. It will often contain the same information as the main header element but the functions differ. HTML header tags perform the functions usually reserved for titles. The title element is to provide information in external listings therefore it should be as informative as possible. My book is not acceptable as a title whereas Keith Parkins' UK International PGP Home Page is acceptable. The title element is mandatory.

<isindex prompt="prompt_message">

Primitive search. The current document describes a database that can be searched using the index search method appropriate for whatever client is being used to read the document.

prompt="prompt_message": Prompt message. Prompt user for input.

<meta>

Meta-information. Not at present widely used but future potential for conveying information about the document. The information can either be placed in the HTTP response header or made available to robot search engines. The naming conventions are in a state of flux, those I've shown are in widespread use. View the source code of this document for further examples.

<meta http-equiv="HTTP_response_header_name" content="string">

The information is sent back in the HTTP header under the appropriate header-ID. Care has to be taken to avoid clashes with existing HTTP response header names. Check with server documentation.

<META HTTP-EQUIV="Keywords" CONTENT="PGP,security,encryption,privacy">

<meta name="meta-information_name" content="string">

The information is associated with a meta-information name and is available to robots as an aid to cataloguing the document.

<meta name="author" content="Keith Parkins">

<meta name="description" content="less than 1000 words">

<meta name="generator" content="Bloggs Web Tools v2.03">

<link rel="relationship" rev="relationship" title="title" href="URL">

The link tag allows you to define relationships between the document containing the link tag and the document specified in the "URL". Used to describe site structure. The rel attribute specifies the relationship of the Uniform Resource Locator (URL) to the HTML file containing the tag. For example if the URL was the Home Page for this document then rel="home". The rev attribute (for "reverse") specifies the relationship between the HTML file and the URL from the perspective of the URL, that is the relationship looking backwards from the URL to the HTML file. For example, <link rev="made" href="URL"> indicates that the file maker or owner (who made this document) is described in the document identified by the URL, that is the URL is a pointer to whoever made this document. WDG show rel and rev to be mutually exclusive. From my own reading of the DTD this would not appear to be the case and though rare a possible scenario would be taking the above example <link rel="home" rev="made" href="URL">, where the URL is the Home Page for the document, which is also the Home Page of the author. Note links define static relationships, not hypertext links. The URL may be absolute or relative. The link tag is not widely used and its details are in a state of flux, the following are provisional (assume the tag is contained within this document to resolve the relationships). For further information on relationships see Hypertext links in HTML.

rel="style sheet": The Style Sheet for this document.
rel="home": The Home Page for this document.
rel="index": The Index page for this group of documents.
rel="toc": The Table of Contents for this group of documents.
rel="next": The next page in a sequence of documents.
rel="previous": The previous page in a sequence of documents.
rel="up": The page logically above this document.

An example for this file (view source code for more examples)
<link rev="made" href="http://www.i-way.co.uk/~reality/sunrise/keith.htm">

<base href="URL">

Document location. The name of the file relative to which partially qualified path names in URLs should be resolved. This is usually the URL of the document when in its original location. If not otherwise specified the URL of the document being displayed is used as the base. This is not required unless the document is to be mirrored or used elsewhere. If a user downloads a page then uses it locally the browser will not be able to resolve the external references unless it knows the base reference. I quote this out, it is then possible to use it locally by removing the quotes. It also enable me to test a group of pages off-line.

<script> script statements </script>

Inline script. A place marker for future developments. Not widely recognised. Netscape implements this as JavaScript. The only obligation on the browser is to ignore everything contained within this element. WDG note an attribute language="script_language", this is the language in which the script is implemented.

<style> style information </style>

Style information. A place marker for future developments. Not widely recognised. The only obligation on the browser is to ignore everything contained within this element. WDG note an attribute type="style_language", this is the language in which the style statements are written.

Elements placed in the body element

The body of the document is that which is seen within the browser window or that which is printed if we decide to print the document.

<body> ... </body>

The body element is used to enclose the body of the document. All attributes are optional. If the background colour is changed from the default grey or a tiled background used, it may prove necessary to adjust the other colours.

background="URL"

The background image used to tile the background, usually a gif or a jpeg.

bgcolor="#rrggbb"|color

The background colour. Either a RedGreenBlue triplet in hex or a named colour from the table below. Default grey.

text="#rrggbb"|color

The text colour. Either a RedGreenBlue triplet in hex or a named colour from the table below. Default black.

link="#rrggbb"|color

The hypertext link colour. Either a RedGreenBlue triplet in hex or a named colour from the table below. Usually blue.

alink="#rrggbb"|color

An activated link. Either a RedGreenBlue triplet in hex or a named colour from the table below. Usually silver.

vlink="#rrggbb"|color

A visited link. Either a RedGreenBlue triplet in hex or a named colour from the table below. Usually magenta.

color

These colour names are not widely recognised.

		`black="#000000"`			`green="#008000"`
		`silver="#c0c0c0"`			`lime="#00ff00"`
		`gray="#808080"`			`olive="#808000"`
		`white="#ffffff"`			`yellow="#ffff00"`
		`maroon="#800000"`			`navy="#000080"`
		`red="#ff0000"`			`blue="#0000ff"`
		`purple="#800080"`			`teal="#008080"`
		`fuchsia="#ff00ff"`			`aqua="#00ffff"`

The major divisions of the body of the document are the block level elements and the text level elements.

Block level elements divide the document into smaller chunks for easy digestion by human readers and categorisation by robots.

Text level elements are used to mark up the document at the text level.

The remainder of this document roughly groups the elements into block level and text level.

Headers

The main header is the equivalent of the document title, as seen in the browser window (and often contains the same text as the window title). The difference is that H1 is used within the document as a title heading whereas title is used for external reference. Headers should be used for their logical meaning, not as a quick fix for a change in font size - for the latter use font or big or small. H5 and H6 are rarely used as they result in small font size. Bold and changes in layout can also be used to achieve sub-divisions but these will not be recognised and categorised by robots. The default header alignment may be overridden by div or center if the header is contained within either of these elements. This document uses four levels of headers, the header for this section is h3.

<hn align=left|center|right> ... </hn>

Section headers. Used to provide a logical structure to the document.

<h1> ... </h1> Most prominent header
<h2> ... </h2>
<h3> ... </h3>
<h4> ... </h4>
<h5> ... </h5>
<h6> ... </h6> Least prominent header

align=left: Align the header to the left margin. Default.
align=center: Align the header in the centre of the browser window.
align=right: Align the header to the right margin. Ignored by many browsers.

Text containers

<p>: Paragraph. Browsers collapse all white space to a single space. P is the means to render a paragraph structure. An end tag is rarely seen and is not necessary. Though used as a separator p is strictly speaking a container. The absence of the P tag will result in all text being rendered as a single paragraph. The default alignment may be overridden by div or center if the paragraph is contained within either of these elements.
<p align=left|center|right> ... </p>: Paragraph used as a container. The end tag is now mandatory. In this case the P tag is used to control the layout of the text. align=left forces left justified text, this is the default and is equivalent of the P tag used on its own that is the first case, align=center and align=right are centred and right justified text respectively.
<pre width=n> ... </pre>: Preformatted text. Text that has already been formatted (preformatted) by some other system and must be displayed as is. Preformatted text may include embedded tags, but not all tag types are permitted. The <pre> tag can be used to include tables in documents. Usually rendered as a monospaced font. width=n is a hint to the browser as to the width in characters of the preformatted text.
<blockquote> ... </blockquote>: Quote large blocks of text. Include a section of text quoted from some other source. Usually indented.
<address> ... </address>: Address information. The address (virtual or otherwise) of the author or owner of the document. This should be placed at the top or bottom (more usual) of the document. An aid to robots and search tools.

Other structural elements

Logically forms and tables belong to this group but due to complexity I've given them space of their own.

<center> ... </center>

Text alignment. Equivalent to div with align=center. Used to set the default alignment of contained elements.

<div align=left|center|right> ... </div>

Document division. A generalisation of center. Used to set the default alignment of contained elements. Not widely recognised.

<hr align=left|center|right width=n|% size=n noshade>

Horizontal rule or separator. Serves to break up the document into manageable chunks. All attributes are optional. Default centre alignment, full width. Inline gifs as separators can give a pleasing effect, but have no semantic meaning to robots.

align=left|center|right: Horizontal alignment of rule. Default centre. The default alignment may be overridden by the use of center or div.
width=n|%: Horizontal width of rule in pixels or as a percentage of the browser window. Width in pixels is meaningless when the size of the browser window is unknown, use percentage width of window. Percentages should be in quotes. Default 100%.
size=n: Thickness of rule in pixels. Optional.
noshade: Turn off 3D cut effect. Draws a solid line. Default 3D.

Lists

Lists offer a way to present structured information.

Many authors incorrectly state that compact does not work. For an example of compact in action see the text containers section, that is if it works on your system.

<ul compact type=disk|square|circle> ... </ul>

Unordered list or bulleted list. A sequential list of bulleted items. May only contain list items. It is possible to obtain an indented list without bullets by omitting the list tag and using explicit line breaks. This kludge whilst useful is not legal. A way forward to avoid this kludge and without relaxing the content model would be to introduce type=none to turn bullets off.

compact

Hint to browser to render in a more compact form.

type=disk|square|circle

bullet type

disk - filled circle
square - square
circle - open circle

<ol compact type=1|a|A|i|I start=n> ... </ol>

Ordered list or numbered list. A sequential list of numbered items. May only contain list items.

compact

Hint to browser to render in a more compact form.

type=1|a|A|i|I

numbering scheme

1 (arabic numerals default) - 1,2,3,4,5....
a (lower case) - a,b,c,d,e...
A (Upper Case) - A,B,C,D,E...
i (roman numerals) - i,ii,iii,iv,v...
I (Roman Numerals) - I,II,III,IV,V...

start=n

start digit

<li type=ULtype|OLtype value=n> ... </li>

List item. Container for list items within a list. The end tag is optional and usually omitted. The attributes are used to override the default list sequence.

type=disk|square|circle: Bullet type for unordered list.
type=1|a|A|i|I: Number type for ordered list.
value=n: Reset count to n. Ordered list only.

<dl compact> ... </dl>

Definition list or glossary list. Used to define items. Contains one or more term-definition pairs. Often used with a missing or empty dt element to obtain indented text. Whilst legal, a practice that is frowned upon as semantic garbage and a kludge that is not guaranteed to work on all browsers.

compact: Hint to browser to render in a more compact form.

<dt> ... </dt>

Definition term. The term to be defined. The end tag is optional and usually omitted.

<dd> ... </dd>

Definition. Used to provide a definition for the corresponding term. The end tag is optional and usually omitted.

<dir compact> ... </dir>

Directory list. For short items, may be arranged in multicolumns. May omit bullet points. Rendered by many browsers as ul. Little used.

compact: Hint to browser to render in a more compact form.

<menu compact> ... </menu>

Menu list. May omit bullet points. Rendered by many browsers as ul. Little used.

compact: Hint to browser to render in a more compact form.

Tables

Tables are used to present tabular information. The concept is not that of rows and columns, rather a sequence of rows which themselves contain one or more cells. Tables may be nested. Tables contain an optional caption and one or more rows. Tables are a subset of RFC 1942.

<table> ... </table>

Define a table. All attributes are optional. The default is left aligned, sized to fit data, no border.

border: Turn border on. Default off.
border=n: Turn border on, specify thickness in pixels. Default off.
align=left|center|right: Table alignment. Default left. Default may be set with div or center. Not all browsers recognise this attribute.
width=n|%: Table width in pixels or as a percentage of the current margins. Best set as a percentage of available window size, though this can cause undesirable appearance if the window dimensions are set to extremes. Percentage requires quotes.
cellspacing=n: Spacing between table cells.
cellpadding=n: Spacing between cell data and the cell boundary.
bgcolor="#rrggbb"|color: Table background colour. Either a RedGreenBlue triplet in hex or a named colour. It is not clear whether or not this is part of the HTML 3.2 specification as mentioned in the specification, but not in the DTD. Recognised by most browsers. See body for more information on colours.

<caption align=top|bottom> table caption </caption>

Table caption. Contained within the table element. Optional. Default at top of table. Will usually be rendered in a more prominent font. Has to be the first element in the table container.

<tr align=horz_align valign=vert_align bgcolor="#rrggbb"> .... </tr>

Table row. Tables are constructed as a sequence of rows. May contain header cell or data cell. The end tag is optional, but should always be included for nested tables. All attributes are optional.

align=left|center|right: Row alignment. Alignment for whole row. Default left.
valign=top|middle|bottom|baseline: Vertical alignment. Alignment for whole row. Default center. baseline indicates that the first line of text in each cell should have a common baseline.
bgcolor="#rrggbb"|color: Row background colour. Either a RedGreenBlue triplet in hex or a named colour. Default table setting. It is not clear whether or not this is part of the HTML 3.2 specification as mentioned in the specification, but not in the DTD. Recognised by most browsers. See body for more information on colours.

<th> .... </th>

Header cell. The only difference between this and a data cell is that the text may be displayed in a more prominent font and the default alignment is center. The end tag is optional, but should always be included for nested tables. All attributes are optional. See td for more information on attributes.

<td> .... </td>

Data cell. May include almost any other elements including other tables. The alignment and colour attributes override those set for the row. The end tag is optional, but should always be included for nested tables. All attributes are optional.

nowrap: Turn off word wrap. Line breaks will have to be set explicitly using br.
align=left|center|right: Cell alignment. Align each cell individually. Default row setting.
valign=top|middle|bottom|baseline: Vertical alignment. Alignment for individual cells. Default row setting. baseline indicates that the first line of text in each cell should have a common baseline.
rowspan=n: Row span. Number of rows a cell should span. Default 1.
colspan=n: Column span. Number of columns a cell should span. Default 1.
width=n: Cell width in pixels. Will not be used if conflict with other cells.
height=n: Cell height in pixels. Will not be used if conflict with other cells.
bgcolor="#rrggbb"|color: Cell background colour. Either a RedGreenBlue triplet in hex or a named colour. Default row setting. It is not clear whether or not this is part of the HTML 3.2 specification as mentioned in the specification, but not in the DTD. Recognised by most browsers. See body for more information on colours.

Forms

HTML forms enable the client to supply information to the server. The use of forms requires server-side scripts to process the information. More information on forms can be found in RFC 1867.

<form action="URL" method=GET|POST enctype=encypher_type> ... </form>

Define a form. A document may contain multiple form elements, but form elements may not be nested.

action="URL": The location of the script that will process the form. Usually in a directory cgi-bin.
method=GET|POST: This may be case sensitive. Check with your server, mine requires Upper Case. GET is for short strings and embedded standard responses. POST should be used for lengthy data strings. GET supplies the data as part of the URL, POST supplies the data as the body of the message. GET is the default. POST may not be available on all systems. See reference section for more details.
enctype="application/x-www-form-urlencoded": The MIME type for transmission of data. The default is URL encoded and currently the only recognised type. For MIME types see RFC 1521 and RFC 1522.

<input name="string" type="input_type">

Data input. A wide range of data input types are available. The end tag is forbidden, input is an empty container.

type=data_type

Used to set the type of the input field.

type=text: Text input. A single line for text input. Default. The visible length of the input field is set with size, the maximum length with maxlength. Note a user can edit the source code and override the maxlength.
type=password: Password field. As text input, except used for password entry. Note password is not sent encrypted.
type=checkbox: Fields are either selected or not. One box should be pre-selected using checked.
type=radio: Fields of the same name allow selection of only one of the associated values. One button should be pre-selected using checked.
type=submit: Defines an action button that sends the completed form to the query server.
type=reset: Defines a button that resets the form variables to their default values.
type=hidden: Defines an invisible input field whose value will be sent along with the other form values when the form is submitted. This is used to pass state information from one script or form to another.
type=image: Defines an image map within a form and returns the co-ordinates of a mouse click within that image.
type=file: Send a specified file to the server. The accept attribute can be used to specify the MIME type of the file. For MIME types see RFC 1521 and RFC 1522.

name="variable_name"

A property name used to identify the field.

value="value"

Used to initialise a field or to provide a text label for submit and reset buttons. Mandatory for radio buttons and checkboxes.

checked

Used to initialise checkboxes and radio buttons. If checked is present the input field is checked by default. It is advisable to always have one selection pre-selected.

size=n

Display width for the type=text or type=password input.

maxlength=n

Maximum number of characters permitted in a text field, that is type=text or type=password. Note a user can edit maxlength and override the maximum length.

src="URL"

URL for graphical image. Used as a graphical submit button.

align="alignment"

Image alignment. See img for information on parameters.

accept="file_type"

MIME file type to send to the server. This can be used to restrict the type of files. It is not clear whether or not this is part of the official specification as mentioned in the draft specification but not in the DTD. For MIME types see RFC 1521 and RFC 1522.

<select name="string" size=n multiple> ... </select>

Define a select field. The user is offered a selection from a pull down list of items. The <select> element may only contain <option> elements.

name="string": Symbolic identifier for the select field variable. Contains one or more options to choose. Mandatory.
size=n: List length. Number of <option> items that will be displayed at one time. Default 1.
multiple: Enables selection of more than one <option>.

<option value="string" selected>

Define a select field option. Used within the <select> element to list options.

value="string": The value to be returned and associated with the field symbolic name.
selected: Pre-selects this option.

<textarea name="string" rows=n cols=n> default text </textarea>

Define a text area. Open a text box for user input. The default text is optional and may be used as hint to the user as to what to enter. All attributes are mandatory.

name="string": Symbolic name that identifies the <textarea> variable.
rows=n: Number of rows.
cols=n: Number of columns.

Text Markup

There exists two methods of marking up text and this probably leads to more confusion in use than any other elements. Logical markup lays emphasis on the semantic meaning of the text and leaves the rendering to the browser, whereas physical markup lays emphasis on the appearance of the text even though it may not be possible for the browser to render. Wherever possible logical should be used in preference to physical as this gives greater leeway to the browser and leaves the semantic meaning intact for robots. This is not the same as saying logical should always be used which is the interpretation given by many authors. A few examples should make this clear.

If I wish to give strong emphasis to something then I would use strong, on the other hand if I wish something to appear in bold than I would use b. Similarly if I was quoting the title of a book or some other reference (which print convention puts in italics) I would use citation cite (logical, usually rendered in italics), if on the other hand I specifically wanted text to appear in italics I would use i.

Logical Styles

Leave rendering to browser, semantic meaning for robots.

<em> ... </em>: Emphasis. usually displayed in italics
<strong> ... </strong>: Strong emphasis. usually displayed in bold
<code> ... </code>: Code fragment. usually a monospaced font All the tags in this document are displayed using code.
<samp> ... </samp>: Show sample output. usually a monospaced font
<kbd> ... </kbd>: Keyboard input. usually a monospaced font
<var> ... </var>: Variable. usually italics Used for computer variables. Enables the automatic listing of variables.
<dfn> ... </dfn>: Definition of a term. ignored by most browsers
<cite> ... </cite>: Citation. For a reference or title. usually displayed in italics

Physical Styles

Apply physical rendering as specified, no semantic meaning.

<b> ... </b>

Boldface

<i> ... </i>

Italics

<u> ... </u>

Underline This is a hangover from typewriters and should be avoided. It is ignored by most browsers due to the conflict with underlining used to show a hypertext link.

<tt> ... </tt>

Typewriter font

<strike> ... </strike>

~~Strikeout~~. Useful in legal documents. Not widely recognised. A future proposal is that <strike> be replaced by the more concise <s> (recognised by Netscape).

<font size="+n"|"-n"|n color="#rrggbb" face=font1,font2... > ... </font>

Specify the font size. This can be either an increment on the existing font size or an actual size. Can also be used to specify the font color and the font to use. If supplied with a list of fonts will try to supply, with the first given priority.

size="+n"|"-n": Increment or decrement the font size where n is the increments in points. The size cannot exceed a maximum of seven points. Note a string not a number therefore quotes required.
size=n: Specify the font size in points. n can range from 1-7. font size=2 font size=4
color="#rrggbb"|color: Specify the font colour. rrggbb is a RedGreenBlue triplet in hex. May also be a named colour - see body for more details. Red, Green, Blue.
face=font1,font2...: Specify the font to use. Browser will choose font1, if that is not available font2 and so on. Not part of the Wilbur specification and goes against the philosophy of markup. Do not use. Not widely implemented. This may be in Arial.

<basefont size=n>

Specify the base font size for the document. Size can be 1-7. The default is 3. Any change in font size will be relative to this base font. Place at the beginning of the body.

<big> ... </big>

use a larger font size Not widely recognised.

<small> ... </small>

use a smaller font size Not widely recognised.

<sub> ... </sub>

Subscript. Useful for mathematical notation. a₁ Not widely recognised.

<sup> ... </sup>

Superscript. Useful for mathematical notation. x² Not widely recognised.

<listing> ... </listing>

Example computer listing; embedded tags will be ignored, but embedded tabs will work. This is an archaic tag, included for backwards compatibility. Do not use.

<xmp> . . . </xmp>

Similar to <pre> except no embedded tags will be recognised. This is an archaic tag, included for backwards compatibility. Do not use.

<plaintext>

Similar to <pre> except no embedded tags will be recognised, and since there is no end tag, the remainder of the document will be rendered as plain text. This is an archaic tag, included for backwards compatibility. Do not use. Some browsers may recognise a <plaintext> tag, even though it is not defined by the standard.

<s> ... </s>

~~Strikeout~~. Useful in legal documents. A Netscape extension, not part of the official standard. Not widely recognised. A future proposal is that <strike> be phased out in favour of the more concise <s>.

<blink> ... </blink>

Blinking text. A Netscape extension. Not part of the HTML standard. The most derided tag in the universe. Extremely irritating for the user. Do not use.

Character entities

Certain characters and symbols are not available from the keyboard. These can be entered either by an entity name or by the ISO Latin-1 character code. If an entity name exists use in preference to the character code as more obvious when reading the HTML source code. Three characters are a special case < > &. The first two are used as tag delimiters and the third is required as an escape character to represent the first two. These can only be represented via entity names or character codes. Entity names are case sensitive - ñ ñ, is not the same as Ñ Ñ.

&entity_name;: Display a particular character identified by an entity name. For example the entity & specifies the ampersand &, and the entity < specifies the less than < character. A list of entity names can be found in the W3C specification. Where an entity name does not exist use the ISO Latin-1 character code.
&#iso_latin-1_code;: Use a character code literally. Do not use a character or numeric code from your local character set. This may work on your system but won't work elsewhere. Warning do not omit the hash # character, if you do you will get the numeric code printed not the desired character!

Hypertext links or Anchors

It is the hypertext links that give the power to HTML. A single mouse click and the user can jump to another part of the document or retrieve another document held on another machine located anywhere in the world.

<a name="anchor_name"> ... </a>: Define a target location in the document. This is where a jump will end.
<a href="#anchor_name"> ... </a>: Link to a location in the base document, which is the document containing the anchor tag itself, unless a base tag has been specified.
<a href="URL"> ... </a>: Link to another file or resource.
<a href="URL#anchor_name"> ... </a>: Link to a target location in another document.
<a href="URL?search_word+search_word"> ... </a>: Send a search string to a server. Different servers may interpret the search string differently. In the case of word-oriented search engines, multiple search words might be specified by separating individual words with a plus sign (+).

An anchor must include a name or href attribute, and may include both. There are several optional attributes, but these are rarely encountered. See link for more information on these attributes.

rel="relationship": Relationship of the link to the current document.
rev="relationship": Reverse relationship of the link to the current document.
title="title": Title of the link.

For information on the construction of URLs see http://www.w3.org/hypertext/WWW/Addressing/URL/Overview.html

Inline Images

Images can add interest to a page. There is a tendency to overdue it and cause long download times. Think twice before adding an image, an image may look pretty but does it add any extra information for the user? Use small images. Use hypertext links to enable the user to download a larger image. Use interlaced gifs and progressive jpegs. The images should always be sized. This enables the browser to layout the page and render the text before downloading the images.

Images may also be used as image maps. The image contains hot zones that activate a hypertext link. The image could literally be a map. For example a map of Cyprus, click on any town and pull up further information on that town.

Prior to HTML 3.2 image maps required a server-side script. It is now possible to use client-side scripts. This has an advantage for the designer as no longer dependent on the server.

<img src="URL" alt="alt_text" align=alignment width=n height=n>

Embed a graphic image in the document. Recognised formats for the image are gif and jpeg, possibly png.

src="image_URL": Specifies the location of the image. Mandatory.
alt="alternative_text": Allows a text string to be rendered in place of the image when images are not rendered. Advisable. An UP button is of little use when images are turned off!
align=top: Align the image with the top of the text. The next line of text will be rendered below the image leaving a yawning gap. Of little use other than a one line caption.
align=middle: Align the image with the middle of the text. The next line of text will be rendered below the image leaving a yawning gap. Of little use other than a one line caption.
align=bottom: Align the image with the bottom of the text. The next line of text will be rendered below the image leaving a yawning gap above the text.
align=left: Float the image to the left of the text. The text will wrap around the image.
align=right: Float the image to the right of the text. The text will wrap around the image. Most browser ignore this attribute.
width=n: Width of the image in pixels. Should always be specified for optimum download time.
height=n: Height of the image in pixels. Should always be specified for optimum download time.
hspace=n: Horizontal run around space in pixels.
vspace=n: Vertical run around space in pixels.
border=n: Size of the hypertext border in pixels, if the image is a hypertext link. border=0 is a special case and turns the border off. It may look neat but it is not a neat idea as it gives no visual clue as to the active nature of the image.
ismap: If ismap is present and the image tag is within an anchor, the image will become a clickable image. The pixel co-ordinates of the cursor will be appended to the URL specified in the anchor if the user clicks within the ismap image. The resulting URL will take the form URL?x,y where x and y are integer co-ordinates, and the URL will specify the location of a program that will examine the pixel co-ordinates, and return an appropriate document. Requires a cgi server script to process the commands. See map for more information on co-ordinates.
usemap="client_image_map_URL": Client supplies map, either as part of the document or as a separate document. Has the advantage of not requiring a server script, but currently little support.

<map name="map_name"> ... </map>

Client-side image map. The map can be in the same document as the image or in a separate document. The latter is not widely supported. The map element contains one or more area elements that define the hot zones. The map element is not widely supported therefore although it is the preferred design route it may still prove necessary to provide a server-side image map for compatibility.

name="map_name": Map name. The name should be the same name as referenced in the img tag. Case sensitive.

<area shape="shape" coords="coords" alt="alt_text" nohref|href="URL">

Define client-side image map hot spots. Within a map each hot spot is defined with an area tag. The attributes shape and coord are used to define the area.

shape=rect: Rectangle. Coordinates are top left and bottom right corners.
shape=circle: Circle. Coordinates are centre and radius.
shape=poly: Polygon. Map out an arbitrary shape. Coordinates are the vertices.
shape=default: The default. Specify action if the activated area has not been explicitly defined as a hot zone.
coords="coordinates": Coordinates. A comma separated list of coordinates. The interpretation depends upon the shape. Coordinates are x,y measured in pixels from the origin - the top left hand corner (0,0). Coordinates may, but not usual, be measured as a percentage of the image.
<area shape=rect coords="0,0,10,15">: Rectangle - upper left (0,0), bottom right (10,15)
<area shape=circle coords="10,15,5">: Circle - centre (10,15), radius (5)
<area shape=poly coords="0,0,0,15,10,15">: Triangle - join the points (0,0), (0,15), (10,15)
nohref: No hypertext link. No action, a dead zone.
href="URL": Hypertext link.
alt="alternative_text": Alternative text. For use by non-graphical browsers, or when images are turned off. Mandatory.

Java

Java was introduced by Sun Microsytems to bring action and interaction to an otherwise static page. Its take off has been surprisingly rapid. For more information on Java see the Java Home Page.

<applet code="string" width=n height=n> ... </applet>

Java applet. This was originally <app>. Open a window and execute Java code. Future proposals may have a more general element for embedded objects. The param element contained within the applet element is used to pass parameters to the applet.

codebase="codebaseURL": The base URL for the applet. Performs a similar function to base.
code="appletFile": File containing the applet class. It is relative to the base URL. It can not be an absolute URL. Mandatory.
alt="alternative_text": Alternative text for non-Java browsers or those with Java disabled. Often used for a hypertext link to a non-Java page. WDG also show textflow as a means of providing alternative text, though this is not mentioned in the official specification.
name="appletInstanceName": The name of this instance of code execution. Enables communication between applets on the same page.
width=n: Width of applet window in pixels. Mandatory.
height=n: Height of applet window in pixels. Mandatory.
align=alignment: Alignment of applet window. See img for details.
hspace=n: Horizontal run around space in pixels.
vspace=n: Vertical run around space in pixels.

<param name="param_name" value="param_value">

Java applet parameters. Contained within the applet element. No end tag. The arguments to the parameters are case sensitive. Anyone can alter the source parameter values. Can your applet handle it?

name="param_name": Parameter name.
value="param_value": Parameter value.

<textflow> ... </textflow>

Used to supply alternative text within the applet. WDG note this as an alternative method of providing alternative text for the applet and that it must be used if no alternative text is supplied within the applet tag. The official specification does not mention this element!

Miscellaneous

Place a comment in the HTML source. A space is required after the first two dashes. A comment can also be used to embed commands for server-side scripts. This is very server dependent.

<br clear=left|right|all|none>

Force a line break immediately and retain the same style. The text continues on the next line with no white space. All attributes are optional. Used to force text below an image or to start a new line.

clear=left|right|all|none: If text flows around an image the clear attribute can be used to force the break below the image. left will take it below to a clear left margin, right will take it below to a clear right margin, and all will take it below to where both margins are clear of images, none does nothing and is the default operation equivalent to no attribute being set.

Frames

Frames are not part of the official HTML specification. Frames may be included in future proposals. If you need to use frames think twice then think again before going ahead. Can it be done any other way, do you really need frames? Most of the use I've seen of frames is 'look me too'. Frames grind a slow system to a standstill! In other words - don't.

<frameset> ... </frameset>

Define frame document. Used instead of <body> ... </body> to enclose the body of the document.

rows=",,,": Row heights pixels or percentage
rows=n: Row heights relative size
cols=",,,": Column widths pixels or percentage
cols=",,,": Column widths pixels or percentage
frameborder=yes|no: Frame border
border=n: Border width pixels
bordercolor="#rrggbb": Border colour RedGreenBlue triplet hex

<frame>

Define contents of an individual frame.

src="URL": Display document
name="string"|_blank|_self|_parent|_top: Frame name
marginwidth=n: Width of margins pixels
marginheight=n: Top and bottom margins pixels
scrolling=yes|no|auto: Scroll bar
noresize: Not resizable
frameborder=yes|no: Frame border
bordercolor="#rrggbb": Border colour RedGreenBlue triplet hex

<noframes> ... </noframes>

Unframed content. Content for browsers that do not recognise frames, though begs the question: "if frames not recognised will this be recognised?"

References

A Beginner's Guide to HTML: An excellent primer from NCSA. Only covers HTML 2.0.
An Instantaneous Introduction to CGI Scripts and HTML Forms: A good introduction to the use of forms and cgi-scripts.
HTML Quick Reference: Michael Grobe's reference for HTML 2.0. It only covers version 2.0 and is not comprehensive in its coverage of all the attributes.
HTML Reference Manual: A manual produced for Sandia National Laboratories by Michael J Hanna. Comprehensive coverage of HTML 2.0, with pointers as to what to expect in future developments.
HTML 2.0 (RFC 1866): Official specification of HTML 2.0. Further information at W3C.
Form-based File Upload in HTML (RFC 1867): Describes extensions to HTML 2.0 to support file upload.
HTML Tables (RFC 1942): Reference document for HTML Tables.
The Bare Bones Guide to HTML: The ultimate crib sheet. When I last looked it was missing a few attributes.
Wilbur - HTML 3.2: An excellent annotated guide to HTML 3.2 from WDG. A few elements are missing. Also available as a Windows 3.11 help file.
HTML 3.2 Reference Specification: This is the definitive reference from the World Wide Web Consortium. It includes the SGML DTD.
Hypertext links in HTML: A detailed discussion paper by Murray Maloney on hypertext links and their relationships.
Java Home Page: Sun Microsystem Java site.
Spyglass HTML Validator: Off-line HTML 3.2 validator.
WebTechs HTML Validation Service: On-line HTML 3.2 validator.
The Unofficial WebTechs HTML Validator FAQ: Although primarily aimed at the WebTechs validator, this does nevertheless cover some of the finer points of HTML design.

Home ~ Index ~ Web Design