The Web Design Group presents:

Wilbur quick reference

This is a "quick reference" or index to all elements from the upcoming HTML 3.2 reference. All the elements are listed with a brief description and some notes on syntax. For a more extensive discussion, please see its entry in the reference. The section on structure and the Wilbur introduction provide background information on this standard and on HTML authoring.

General syntax

An HTML document consists of text, marked up with elements. An element consists of a start tag with optionally a closing tag. If there is no closing tag, the element is said to be empty. If there is a closing tag, the element is used to mark up its contents in a particular way. Note that in some cases, the closing tag may be omitted as it can be clear from the context where it ends.

Elements can have certain attributes, which provide extra information about the enclosed text. These attributes are used on the opening tags, and may not be repeated or added to the closing tag. An attribute consists of a name and (most of the times) a value. This value may always be enclosed in quotes ("), but must be enclosed in quotes if the value contains more than just letters, digits, hyphens and/or periods.

For example, <A HREF="foo/bar.html">foozlebib</A> is the HTML markup to turn the text "foozlebib" into a hyperlink to document "foo/bar.html". The element used here is A, with the attribute HREF. The value for HREF is quoted, as it contains the character "/".

<H1 ALIGN=CENTER>Welcome!</H1> marks up the text "Welcome!" as a level one header. The attribute ALIGN here indicates the alignment of this header, in this case centered. As the value consists only of letters, the quotes may be omitted.

Tags and attribute names are not case sensitive; attribute values are.

Structure of a document

An HTML document that adheres to HTML 3.2 begins with a so-called DOCTYPE declaration. This is necessary for validators to check the elements you used against the ones in the HTML version you use. The DOCTYPE declaration for HTML 3.2 looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">.

Next comes the HTML opening tag. This top-level element contains the head and the body of the document. The head of a document provides information about the document, and the body contains the actual marked up text.

An outline of an HTML 3.2 document would be as follows: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
... information about document
</HEAD>
<BODY>
... document body
</BODY>
</HTML>

Elements for the HEAD of a document

The head section is used to provide information about the document. This can be the title of the document, the name of the author, a short description, and many other things.

TITLE - Document title
This element gives the document's title, which is commonly used in the browser window to identify the document, but also in bookmark files and in search results. This is the only required HTML element. You may only use text and entities inside this element. The title should be understandable out of context.
META - Meta-information
This is an empty element, used to provide some information or labels about the document. The information is given with a name and a value. The value is given in the CONTENT attribute, and the name can be given in the HTTP-EQUIV or the NAME attribute. If the HTTP-EQUIV attribute is used instead of NAME, the name/value pair is treated as if it were an HTTP response header. Popular ways to use META:
LINK - Site structure
Not used by many browsers. The LINK element is used to define relationships between this and another document. The other document is indicated in the HREF attribute, and the relationship in the REL attribute. For a reverse relationship, use REV instead of REL. Popular use:
ISINDEX - Primitive search
Used before forms became popular. This tag should be inserted if the document can be searched on the server (for example, if the document is generated with a CGI script). The message in the search window can be specified using the PROMPT attribute.
BASE - Location of document
When you put a document on a server, you can indicate the actual location of the document with the BASE element. The required HREF attribute indicates the actual location. All relative URLs in the document are resolved against this URL.
SCRIPT - Inline script
In HTML 3.2, nothing is done with text inside this element. Certain browsers support scripts, which should be defined in here.
STYLE - Style information
In HTML 3.2, nothing is done with text inside this element. Certain browsers support stylesheets, and style information can be defined inside this element.

Elements for the BODY of a document

The body of the document contains the actual text, marked up with HTML elements. The document colors are specified using attributes on the <BODY> tag. These attributes are TEXT (normal text), LINK (unvisited links), VLINK (visited links), BGCOLOR (background color) and ALINK (selected links). They are given a hexadecimal color code, in red-green-blue notation. For example, "#FF0000" is bright red. An image to be used as background can be specified using BACKGROUND. These are all optional, but if one is used, it is recommended that they all are. Otherwise certain selections may conflict with user settings and turn some text unreadable.

The text in a document is mainly marked up using block-level elements. Text inside a block-level element is marked up using text-level elements. Certain block-level elements may also contain other block-level elements, or only a restricted set of elements and no text.

Headers: H1, H2, H3, H4, H5 and H6.
In HTML there are six levels of headers, ranging from level one (most important) to six (least important). They should be used in hierarchical order. The horizontal alignment for each header can be indicated using the ALIGN attribute, which takes values of LEFT, RIGHT and CENTER.
Paragraphs: P.
Most of the text will be inside paragraphs. These are marked up using the P element. The horizontal alignment for a paragraph can be indicated using the ALIGN attribute, which takes values of LEFT, RIGHT and CENTER. The closing tag for paragraphs is optional. Note that a paragraph is a container and not an empty tag.
Block quotations: BLOCKQUOTE.
To indicate a quoted piece of text, use this element. It has no attributes, and may contain paragraphs, headers and other block-level elements.
Preformatted text: PRE
Text that is already formatted for a specific width (for example ASCII art) can be marked up using the PRE element. Unlike normally, linebreaks and spaces are rendered as shown.
Address information: ADDRESS
The ADDRESS element is usually placed at the bottom of the document to provide some information to the reader. This can contain the URL of the document, the e-mail address of the author, but also a normal address.
Divisions: DIV
A division (marked up with DIV) encloses a number of block-level elements. It is used to set the default alignment and to group these elements together. It takes the attribute ALIGN with values LEFT, RIGHT and CENTER.

<CENTER> is a shorthand for <DIV ALIGN=CENTER>.

Horizontal rules: HR
The HR element (empty) is used to indicate a break in the document, usually with a horizontal ruler. The appearance of this ruler can be indicated with several attributes. Its width can be set using the WIDTH attribute, with a number in pixels or a (quoted) percentage, its height in pixels is set using the SIZE attribute, and if the width is less than 100%, the alignment can be set with the ALIGN attribute (values of LEFT, RIGHT and CENTER). The NOSHADE attribute draws the rule without a 'shadow'.
Lists
HTML knows three major types of lists: ordered, unordered and "definition" lists. The former two differ only in the labeling of each list item; ordered lists are numbered and unordered lists are bulleted.

An unordered list is indicated with UL, with the optional TYPE attribute. This attribute can be DISC, SQUARE or CIRCLE, and indicates the type of bullet to use. The opening and closing tags are required and UL may only contain LI elements and nothing else.

An ordered list is indicated with OL, with the optional TYPE attribute. It can be 1 (decimal), a (lowercase letters), A (uppercase letters), i (lowercase Roman) or I (uppercase Roman). The optional START attribute indicates the starting value for the list. It musta always be given in decimal, regardless of the value in TYPE. The opening and closing tags are required and OL may only contain LI elements and nothing else.

Items for both these lists are given with LI. A list item may contain other block-level elements.

A definition list is similar to an unordered list, except in that it uses two elements per item: DT marks up the term to be defined, and DD provides its definition. These are the only two elements that may appear inside DL. A definition list typically appears without bullets.

Tables

Tables are used to present tabular information. In HTML, tables are constructed as a series of rows. Before the first row, the CAPTION element provides a caption for the table.

The TABLE element takes several attributes:

BORDER=n
Indicates that a border of n pixels should be drawn around the table. If this attribute is omitted, no border is drawn.
ALIGN=left|right|center
Indicates the alignment of the table. In many browsers, ALIGN=CENTER is not supported. This requires that the entire table is enclosed in a CENTER element.
WIDTH=n
Indicates the suggested width of the table, either a pixel value or a (quoted) percentage. The percentage is recommended, as values in pixels do not take the current window size in account.
CELLSPACING=n
The spacing between table cells, in pixels.
CELLPADDING=n
The amount of space between a table cell border and its contents, in pixels.

Rows in a table are marked up using TR. The table row can be used to set the default alignment for all cells in this row: ALIGN=left|right|center for horizontal, and VALIGN=top|middle|bottom|baseline for the vertical alignment. This value can be overridden by individual cells.

There are two types of cells: headers (marked up with TH) and data cells (marked up with TD). They only differ in their appearance, the syntax is the same. Both take the same attributes as TR, as well as several others:

COLSPAN=n
Indicates the amount of columns to the right of the current column that this cell overlaps.
ROWSPAN=n
Indicates the amount of rows below the the current row that this cell overlaps.
NOWRAP
Disable word wrap in this cell. Line breaks must now be inserted manually using BR.

Forms

With forms, the user can enter data and send it to a program on the server. This program can then process the data and send a certain request back. The program to process the form, as well as the method to send the data to it, are specified using the FORM element. The ACTION attribute indicates the processing script, and the METHOD attribute indicates the method: GET or POST. Forms may not be nested, but you can have multiple forms on a document.

There are three elements relevant to forms.

INPUT
This element is used to create a wide range of input elements. It is an empty element, there is no closing tag. In all cases, the NAME attribute is used to assign the input a name. Usually the initial value can be set using the VALUE attribute.
TYPE=text
This generates a input field, where the user can enter up to MAXLENGTH characters. The SIZE attribute lists the length of the input field (if the user enters more characters, the text will scroll). The VALUE attribute specifies the initial value for the input field.
TYPE=password
Same as TYPE=text, but the text will be hidden by "*" or similar characters. It is still sent in the clear to the server, though.
TYPE=checkbox
Produces a checkbox. It has two states, on and off. When it is on when the form is submitted, it will be sent as "name=on", otherwise it is ignored altogether. If you use CHECKED, it will come up checked (selected) initially.
TYPE=radio
Produces a radio button. A radio button always exists in a group. All members of this group should have the same NAME attribute, and different VALUEs. The VALUE of the selected radio button will be sent to the server. You must specify CHECKED on exactly one radio button, which then will come up selected initially.
TYPE=submit
Produces a button, which when pressed sends the contents of the form to the server. You can have more than one submit button in the form. Each should have a different NAME. The name and value of the pressed button will be sent to the server as well. The value of the VALUE attribute is typically used as text on the submit button.
TYPE=reset
Also produces a button, which will restore the form to its original state if pressed. The value of the VALUE attribute is typically used as text on the reset button.
TYPE=file
Allows the user to upload a file. It is still very new, so it is not very widely supported. It is typically presented as an input box with a button to start browsing the local hard disk. This way, a user can specify one or more filename(s) to upload.
TYPE=hidden
Allows you to embed information in the form which you do not want changed. This can be useful if the document is generated by a script and you need to store state information. NAME and VALUE of this input field will be sent to the server without modifications.
TYPE=image
Functions similar to a submit button, but uses an image instead. The ALIGN attribute controls the alignment of the image. The coordinates of the selected region will also be sent to the server, in the form of "NAME.x=n&NAME.y=n". A text browser will treat it as identical to a normal submit button.
SELECT
This defines a selection list, with various options. A list of options (marked up with OPTION) is provided inside the list, and one or more of the options can be selected. The SELECT element has the attribute NAME, indicating the name for the selected option, and the optional attribute MULTIPLE, indicating that multiple elements may be selected. The SIZE attribute indicates how many elements should be visible at once.

The OPTION element may only contain text, and has the optional attribute VALUE. This is the value returned if this option is selected. If none is provided, the text after OPTION is used. The SELECT attribute indicates that this option should come up pre-selected.

TEXTAREA
This element is used to insert a larger input box. The ROWS and COLS attributes indicate the number of rows and columns to be used. The name to return the entered text in is provided with NAME. A default text can be supplied between the opening and closing tags.

Text-level markup

Text-level markup can roughly be divided into three groups: physical markup, logical markup and "special" markup. The first group contains elements that indicate a specific rendering for the enclosed text, the second indicate the logical meaning of the enclosed text, and the third group indicates some "action". It is recommended that logical elements are used whenever possible, as they adapt better to various viewing environments than physical styles. For example, if boldface is not available, a different way to render emphasized text can be chosen, but only if it is known that this is emphasized text, and not to be rendered bold for some other reason.

Logical markup

None of these elements take any markup. They may be nested and may also contain physical or "special" elements.

Physical markup

None of these elements take any markup. They may be nested and may also contain logical or "special" elements.

"Special" markup

Client-side imagemaps

An imagemap is an image in which "clicking" in various regions leads you to different URLs. This is done either with a server-side imagemap, which requires that a server examines the location chosen and sends back an URL, or with a client-side imagemap where the browser determines the right location itself. An image becomes a client-side imagemap if the attribute USEMAP="location_of_map_data" is added. The location must end in #name, where name is the name of the MAP element used to provide the data.

The MAP element is used to provide the imagemap data. It takes one attribute, NAME, which is the name of the imagemap. It contains a number of AREA elements, which each define one area in the map.

An area comes in four different shapes, indicated with the SHAPE attribute. The shapes are RECT (rectangle), CIRCLE (circle), POLY (polygon) and DEFAULT (covers non-specified regions). The coordinates of a shape other than DEFAULT is defined in the COORDS attribute. This attribute takes a comma-separated list of numbers, which make up coordinates. For a rectangle, it is "x1,y1,x2,y2", for a circle it is "x1,y1,radius" and for a polygon it is "x1,y1,x2,y2,x3,y3,...". The URL associated with this area is indicated with the HREF attribute. You can also use NOHREF instead of HREF, to indicate that this area leads nowhere. You must supply alternative text in the ALT attribute, which is used to build a list of the areas in a menu.

HTML comments

HTML comments are provided in a somewhat awkward fashion. The exact syntax is rather complex. In short, use the following rule to embed comments:

An HTML comment begins with "<!--", ends with "-->" and does not contain "--" or ">" anywhere in the comment.

HTML 3.2 Reference  ~ Elements by Function  ~ Elements Alphabetically

Home, Forums, Reference, Tools, FAQs, Articles, Design, Links

Copyright © 1996 - 2006 Arnoud Engelfriet - Web Design Group All rights reserved.