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.
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
<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">
... information about document
... document body
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:
<META NAME="author" CONTENT="Your name here">
<META NAME="description" CONTENT="Describe the document">
- 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
<LINK REV="made" HREF="mailto:email@example.com">
<LINK REL="stylesheet" HREF="/somewhere/something.css">
- 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
- 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'.
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
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 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:
- Indicates that a border of n pixels should be drawn around the
table. If this attribute is omitted, no border is drawn.
- 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.
- 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.
- The spacing between table cells, in pixels.
- The amount of space between a table cell border and its contents,
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:
- Indicates the amount of columns to the right of the current column
that this cell overlaps.
- Indicates the amount of rows below the the current row
that this cell overlaps.
- Disable word wrap in this cell. Line breaks must now be inserted
manually using BR.
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.
- 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.
- 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.
- 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.
- 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
- 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.
- 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.
- 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.
- 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.
- 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.
- 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
n". A text browser will treat it as
identical to a normal submit button.
- 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
- 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 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.
None of these elements take any markup. They may be nested and may
also contain physical or "special" elements.
- EM - Emphasized text.
- STRONG - Strongly emphasized text.
- DFN - Defining instance of a term, usually the first time it is
- CODE - A fragment of (computer, HTML, ...) code.
- SAMP - Sample text, either input or output.
- KBD - Keyboard input, to be entered by the user.
- VAR - A variable
- CITE - Title of a cited work. There is no way to logically mark
up a short citation.
None of these elements take any markup. They may be nested and may
also contain logical or "special" elements.
- TT - Teletype
- I - Italics
- B - Bold
- U - Underline
- STRIKE - Strikeout
- BIG - Larger text
- SMALL - Smaller text
- SUB - Subscript
- SUP - Superscript
- A - Hypertext anchor. Attributes are HREF (URL to destination)
and NAME (destination in document). Anchors may not be nested.
- BASEFONT - Default font size. Has a required attribute SIZE
which ranges from 1 to 7.
- IMG - Image. The required SRC attribute indicates the location
of the image (in GIF or JPEG format) to be inserted. The ALIGN attribute
(values LEFT, RIGHT, TOP, MIDDLE, BASELINE and BOTTOM) indicate the alignment
of the text after the image. With LEFT and RIGHT the image is placed
against that margin, and text flows around it. The WIDTH and HEIGHT
attributes indicate the width of the image, in pixels. VSPACE and HSPACE
indicate vertical and horizontal whitespace around the image in pixels.
The BORDER attribute indicates the thickness of the border around the
image when it is inside an anchor. The USEMAP and ISMAP attributes are
used to indicate that the image is an clientside/server-side imagemap.
See the section on imagemaps for more information.
Lastly, the ALT attribute must be used to provide an alternative to the
image if the image is not loaded.
- APPLET - Used to insert a Java applet. Parameters are passed
to it with the PARAM element inside APPLET. This element takes
attributes NAME and VALUE for the parameter to pass. You can put all
text-level elements inside APPLET. APPLET takes the same attributes
as IMG, apart from USEMAP, ISMAP and SRC. The location of the applet
is indicated with CODE instead of SRC.
- FONT - Font modification. This can be either a font size change,
indicated with the SIZE attribute (value can be 1 through 7, or a
(quoted) relative change with +n or -n, make sure the resulting value
does not exceed 1 to 7), or a font color change, with the COLOR attribute.
The value of COLOR is a hexadecimal color code, similar to the
colors specified for the document body.
- BR - Line break. To ensure that text after a left- or right-
aligned image does not appear next to it, use the CLEAR attribute to
scroll down until the indicated margin (LEFT, RIGHT or ALL) is clear.
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 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 "
>" anywhere in the comment.
HTML 3.2 Reference
~ Elements by Function
~ Elements Alphabetically
Copyright © 1996 - 2006
Arnoud Engelfriet -
All rights reserved.