Wilbur - HTML 3.2

Syntax rules

In this overview of tags, I have used some simple rules to make the syntax clear. It also allows me to provide the information in a short format.

To illustrate the syntax rules, here's the section on IMG:

The first section, Appearance, gives a common way to use this tag. As you can see here, the IMG tag does not have an ending tag. If the beginning or ending tag appears inside square brackets, it is optional and may be left off.

The next section describes the attributes for the IMG tag. If an attribute appears in bold, it is required, otherwise it may be omitted. In the above case, SRC is required, but the other attributes are not. Note that the attributes themselves are listed in all caps, and the possible values (if possible) in lower case. Note that an attribute value must be quoted if it contains more than just letters, digits, hyphens and periods.

The contents section describes which tags are permitted inside this tag. For IMG, there are none. And last, you can see which tags allow IMG inside them.

The attributes and their values are noted in a very compact format as well. The "|" character is used to separate mutually exclusive attributes or values. For example, A=foo|bar indicates that attribute "A" may get foo or bar as value, but not both, or anything else. A=string|B=string indicates that you may use either A or B, but not both.

If an attribute can take more possible values than can be given in a list, the following special symbols are used:

n

A number. It must be an integer, and not have a "-" or "+" sign prepended. Numbers do not have to be enclosed in quotes.

p%

A percentage. The percentage must also be an integer. Exactly what the percentage applies to depends on the tag. Percentages must be enclosed in quotes.

URL

An URL. This can be an absolute or a relative URL, depending on the situation. In most cases, both are permitted. It is recommended that URLs always be enclosed in quotes.

string

A string of characters. Any character is permitted, including entities. It is recommended that strings are always enclosed in quotes.

#RRGGBB

A color code, in hexadecimal notation. The color is constructed in the red-green-blue format. Each part gets a hexadecimal number between 00 and FF, and it should be given in two digits at all times. Note that a color code must have a # as the first character, and it must be enclosed in quotes.

ADDRESS - Address information

The ADDRESS tag should be used to enclose contact information, addresses and the likes. It is often rendered with a slightly indented left margin and italics.

Notes:

• If you include an address in here, be sure to use BR for explicit linebreaks after every line, otherwise the address won't come out right.

APPLET - Java applet

The APPLET tag is used to include Java applets. The CODE attribute indicates the location of the class of the applet itself. CODEBASE can be used to specify an absolute URL for the applet, similar to the BASE element for HTML documents. Other classes for this applet will be searched at the location indicated in CODEBASE. If this is not specified, the current URL will be used for the location. The NAME attribute gives the name of the applet.

Just like with IMG, WIDTH and HEIGHT are used to specify the width and height of the applet's window, and HSPACE and VSPACE control horizontal and vertical spacing around the applet. ALIGN sets the horizontal or vertical alignment for the applet.

Arguments to the applet can be specified with the PARAM tag, which goes inside the APPLET tag.

The ALT text may contain text which should be displayed if the applet cannot be run, but you should use the TEXTFLOW tag instead. This tag, which goes inside APPLET, may contain markup (unlike ALT, which may contain only text) so it is more powerful. However, as it is an optional tag, you may leave it off and insert the alternative text with markup directly inside the APPLET tags.

Notes:

• Not all browsers support Java applets, and those that do often allow the user to disable it.
• Always provide alternative text, so your visitors get something when they can't see the applet.

AREA - Client-side imagemap hotspot

Inside the MAP tag, each "hotzone" in the client-side imagemap is defined with an AREA tag. The HREF attribute specifies the URL for the destination that should be chosen if this area was selected. If you specify NOHREF instead, this area won't do anything.

SHAPE and COORDS define the actual region. SHAPE can be a rectangle, circle, or polygon, and COORDS should contain a set of coordinates describing that shape. This is done with a comma separated list of numbers, enclosed in quotes. If SHAPE is set to DEFAULT, no coordinates need to be specified. The default area is what will be chosen if no others match. The syntax for COORDS depends on what shape you choose.

rect - rectangle

A rectangle has four coordinates. The first specifies the top left corner, and the second the bottom right corner of the rectangle. For example, <AREA SHAPE=rect COORDS="0,0,9,9"> would specify a rectangle of 10x10 pixels, starting in the top left corner of the image.

circle - circle

A circle is defined by its center and radius. The COORDS attribute first specifies the coordinates of the center, and then the radius of the circle, in pixels. For example, <AREA SHAPE=circle COORDS="10,10,5"> would specify a circle with radius 5 at location (10,10) in the image.

poly - polygon

A polygon is built up by a list of coordinates. They are all connected in the order you present, and the last coordinate pair is connected to the first. This way you can build arbitrary figures. For example, <AREA SHAPE=poly COORDS="10,50,15,20,20,50"> would specify a triangle, with edge locations (10,50), (15,20) and (20,50).

default - default

The default location doesn't have any coordinates, and it should be used only once in the map. It is used to indicate what should happen if the user selects one of the coordinates which are not defined in any of the other elements.

The ALT text is used by text browsers to present the URLs in the imagemap in a more readable fashion. If you leave those off, the browser can only display the "bare" URLs.

Notes:

• If you have an area which should not do anything, not even go to the URL specified in the default area, use NOHREF.
• Just like with IMG, there can be no markup inside the ALT attribute.

A - Hyperlinks

The anchor tag is the "glue" for hypertext documents. The enclosed text and/or image(s) will be selectable by the user, and doing so will take the user to the location specified in the HREF attribute. The TITLE attribute can be used to provide a description of that location, which is displayed by some browsers when the mouse moves over the URL.

The NAME attribute is used to set up "named anchors." The enclosed text will be marked as a "target" to which a browser can jump directly. For example, if you have "<A NAME="toc">Table of Contents</A>" and the user uses the URL "#toc" he will be taken to that line.

REL and REV are not widely used, although these attributes were already present in the HTML 2.0 specs. They are used to mark up relationships between the current document and the resource in the link. REL="foo" in document A, in a link pointing to B, indicates that document A has a relationship of "foo" with document B. REV="foo" indicates B has that relationship with A. Since these attributes are not widely used, there is no standard list of values for REL and REV.

Notes:

• Be sure to close the quotes around the value in HREF. Older browsers were often quite forgiving about them, but as this caused other problems, it was fixed in newer releases. This means that a hyperlink with an unclosed quote may not work correctly.
• TITLE is most often used for mailto URLs, where it is used to set the subject of the message. Some browsers also use it if you bookmark the link.
• Since you cannot nest anchors, you can't hyperlink a named anchor. You can however combine the NAME and HREF anchors into one anchor; <A NAME="foo" HREF="bar">text</A> works just fine.

BASE - Document location

The BASE tag is used to indicate the correct location of the document. Normally, the browser already knows this location. But in cases such as a mirrored site, the URL used to get the document is not the one that should be used when resolving relative URLs. That's when you use the BASE tag. The required HREF attribute must contain a full URL which lists the real location of the document.

Notes:

• It is not necessary to include this tag; use it only if relative URLs won't work otherwise.

BIG - Larger text

The BIG tag (as well as SMALL) is new. A browser should draw the enclosed text in a larger font if available, and ignore the tag otherwise. Since this tag is new, support for it is not universal. The FONT tag can do the same, with SIZE="+1".

Notes:

• Nesting BIG tags may produce text in a larger font than with just one BIG tag, but this is not required by the specs (although it is recommended).
• It is legal to nest BIG and SMALL, although the results are undefined.
• BIG is not supported by all browsers, so you might want to use <FONT SIZE="+1"> instead.

BLOCKQUOTE - Large quotations

If you are quoting more than a few lines from a document, use a BLOCKQUOTE to indicate this. Block quotations are often rendered with indented margins, and possibly in italics, although a rendering with the standard quotation symbol for E-mail, "> ", is of course also possible.

Notes:

• If you quote from someone else's work, don't forget to include a credit and/or copyright notice.
• Do not use BLOCKQUOTE simply to create indented text. This is not the required rendering, so you will not achieve the effect you want on all browsers. It will also confuse page indexers and summarizers.

BODY - Document body

The BODY tag contains the actual contents of the document. That contents should consist of block elements only. You may put in plain text in the body, this is then assumed to be inside a P container.

The attributes contain the appearance of the document. The BACKGROUND attribute should point to the location of an image, which is used as the (tiled) background of the document. The other attributes set the colors for the background, text, links, visited links and active (currently being selected) links, using the order above.

The color is composed by specifying the red, green and blue components of the color in hexadecimal notation, with a # in front. For example, to specify white, the red, green and blue components are 255, 255, 255, so you would use "#FFFFFF".

The BODY tag is optional; if you put all the HEAD elements first, the browser can immediately see where the actual document body begins.

Notes:

• If the background image cannot be displayed, the color specified in BGCOLOR will be used.
• If you set one of the attributes, set them all. Otherwise your specified color may conflict with a user's default. This could result in unreadable text. For example, imagine that you set your TEXT color to light gray, but forget to set the background. Then someone with a light gray background will not see anything at all.
• Do not set unvisited and visited links to the same color, it will confuse your readers.
• The specification suggests a list of names that you can use instead of the hexadecimal values, but these names are not widely supported. The specification also does not assign the color names to specific hex values, although it says they are picked from the "standard MS Windows VGA palette." The names are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
• Netscape 1.1 produced a "fade" effect when more than one BODY tag was used in a document. It would render the BGCOLOR colors in sequence. This bug has been fixed in later versions. Do not expect that using multiple BODY tags will give the intended results.

BR - Forced line break

The BR tag is used to force line breaks within text. Normally, linebreaks are treated as a space by browsers (except inside the PRE tag). The optional CLEAR attribute is used when you have an IMG image in your text. If that image uses ALIGN=LEFT or ALIGN=RIGHT, the text will flow around it. If you have text you want below the image, you can do this with <BR CLEAR=LEFT> or CLEAR=RIGHT to force scrolling down to a clear left or right margin, respectively. Using CLEAR=ALL will scroll down until both marings are clear. CLEAR=NONE is the default, and does nothing.

Notes:

• Some people use multiple BR tags to force whitespace. This is not required by the specs, so it may not work in all browsers.

B - Bold

B is used to indicate that the enclosed text must be rendered in a bold typeface. It must be rendered distinct from I-italics text.

If you want to indicate strong emphasis, use the STRONG element instead. B should only be used when you want bold typeface for some other reason than to denote strong emphasis. While the two tags usually produce the same output, the B tag does not provide any reasons why the enclosed text is in boldface. This means an indexer or text-only browser cannot pick a good alternative. With STRONG this is possible.

Notes:

• Putting large blocks of text in boldface makes the text hard to read.

CAPTION - Table caption

The CAPTION tag is used to provide a caption for a TABLE. This caption can either appear above or below the table. This can be indicated with the ALIGN attribute. It is usually centered with respect to the table itself, and usually appears in bold or otherwise emphasized.

The tag should appear directly below the TABLE tag, before the first TR.

Notes:

• Although you can use all text-level markup inside a CAPTION, it should be brief, so don't include images or large amounts of text in it.

CENTER - Centered division

The CENTER tag is one of the first Netscape extensions. It is used to indicate that large blocks of text should appear centered. In the Wilbur standard, it is defined as an alias for <DIV ALIGN=CENTER>.

The tag is more widely supported than the DIV method, as it was the first widely implemented Netscape extension to HTML 2.

Notes:

• The CENTER tag is not text-level markup, so do not use it to center single lines of text inside a paragraph or other block element. It will introduce a new paragraph.
• Older versions of Netscape treated CENTER as if it were text-level markup, so it was rendered without a paragraph break there.
• For better portability with browsers which do not support this tag, use ALIGN=CENTER on headers and paragraphs if possible.

CITE - Short citations

The CITE element indicates that the text enclosed is cited from some reference. It could be rendered with smart quotes, but usually a browser uses italics.

Notes:

• Do not use CITE for anything but citations. It will confuse indexers and automatic programs to extract information from your documents. Use EM for emphasis or I for text which must appear in italics.

CODE - Code fragments

CODE is used for snippets of code which appear inside a paragraph of text. It is usually rendered in a monospaced font. You can use this tag to mark up things like "<CODE>for ( ; ; ) ;</CODE> is a nice way to make an endless loop in C."

For larger blocks of code, use PRE instead. If what you are marking up is what a user should type in, use KBD.

Notes:

• CODE will usually be rendered in a monospaced font, but multiple spaces are collapsed, unlike in PRE. This can screw up the spacing in your code if you want to provide more than one line.

DD - Definition

The DD tag is used inside a DL definition list to provide the definition of the text in the DT tag. It may contain block elements but also plain text and markup. The end tag is optional, as it's always clear from the context where the tag's contents ends.

A typical rendering is indented, one line below the DT, but this is not guaranteed.

Notes:

• Some people use this tag out of its proper context (DL only) to achieve an "indent" in text. Don't do this, it is not valid and not guaranteed to work.

DFN - Definition of a term

DFN is used to mark up terms which are used for the first time. These are often rendered in italics so the user can see this is where the term is used for the first time.

Notes:

• Not all browsers render this tag in an appropriate way.

DIR - Directory list

The DIR element is similar to the UL element. It represents a list of short items, typically up to 20 characters each. Items in a directory list may be arranged in columns, typically 24 characters wide.

Notes:

• It is not permitted to use a block element, list element or TABLE in a LI inside a MENU or DIR.

DIV - Logical division

The DIV tag is used to mark up divisions in a document. It can enclose paragraphs, headers and other block elements. Currently, you can only use it to set the default alignment for all enclosed block elements. Future standards will most likely include more options for DIV.

Just like with other block elements such as P or H1, you can specify left, right and centered alignment.

Notes:

• The align attribute on a block element inside DIV overrides the align value of the DIV element.
• Instead of <DIV ALIGN=CENTER>, use CENTER. This element is more widely supported at the moment, even though HTML 3.2 defines both as identical.

DL - Definition list

DL is used to provide a list of items with associated definitions. Every item should be put in a DT, and its definition goes in the DD directly following it. This list is typically rendered without bullets of any kind.

While it is legal to have a DL with only DD or DT tags, it doesn't make much sense (what good is a definition without a term?) and you shouldn't expect it to get rendered as a normal list.

Notes:

• DL may not contain plain text or any tag other than DT or DD.
• Do not use DL to create an indented section of text. This is not guaranteed to work and it is syntactically invalid HTML.

DT - Definition term

The DT tag is used inside DL. It marks up a term whose definition is provide by the next DD. The DT tag may only contain text-level markup.

Notes:

• Although it is legal, using a DT without a corresponding DD tag is quite pointless.

EM - Emphasized text

EM is used to indicate emphasized text. While it is often rendered identical to I, italics, using EM rather than I is preferred. It allows the browser to distinguish between emphasized text and other text which can be drawn in italics (for example citations, CITE).

EM text should be rendered distinct from STRONG text.

Notes:

• Use EM only for emphasized text. If you want to use an italic font for some other reason, use a more appropriate element like CITE, DFN or I.

FONT - Font appearance

The FONT tag can be used to change the appearance of the current block, in terms of size and color. The SIZE attribute can either take an absolute value, ranging from 1 (smallest) to 7 (largest), or a relative value. Using the latter will change the font relative to the current font size. For example, <FONT SIZE="+1"> will make the font size one step bigger.

The COLOR attribute takes a hex value, which is the RGB-notation of the desired color. See the section on BODY for a more detailed explanation on how to specify colors.

Notes:

• Avoid making extreme font changes if possible. They can make a document hard to read. If possible, use BIG instead of <FONT SIZE="+1"> and SMALL instead of <FONT SIZE="-1">.
• The color attribute is not very widely supported, so do not rely on it.
• None of the browsers which support FONT allow their users to disable it. It is possible to disable body colors, so if you use FONT COLOR to change font colors and the visitor has overriden your body colors, the text may wind up invisible.
• Do not use the FONT tag to emulate headers. Indexers rely on the six header elements to generate an overview of a document, and they will not be able to index your document if you use FONT instead. FONT should be used only as an enhancement of the presentation.

FORM - HTML forms

Forms allow a person to send data to the WWW server. You can use the INPUT, TEXTAREA and SELECT tags to add individual elements, such as checkboxes, input fields or "drop down" lists to your form. A form may contain all markup (both text and body level tags), but it may not have a nested form.

FORM has one required attribute, ACTION, specifying the URL of a CGI script which processes the form and sends back feedback. There are two methods to send form data to a server. GET, the default, will send the form input in an URL, whereas POST sends it in the body of the submission. The latter method means you can send larger amounts of data, and that the URL of the form results doesn't show the encoded form.

Although you can specify an encoding type with ENCTYPE, currently only "application/x-www-form-urlencoded" is supported. Once more types are developed, it will be useful to add this attribute.

Notes:

• A form should always have at least one submit button. This can be done with <INPUT TYPE=submit NAME=submitit> or with an image: <INPUT TYPE=image NAME=submitit>.
• The URL specified in the ACTION attribute does not have to be a CGI script, although you can get pretty weird results if you try to feed data to a document which isn't a CGI script. A popular reason to do this is to get a "button" which when pressed takes you to a new page. This can be done with:

  <FORM ACTION="destination_url" METHOD=GET>
  <INPUT TYPE=submit NAME=foo VALUE="Go to destination">
  </FORM>
  

H1 - Level 1 heading

The level 1 heading is the most important header in the document. It should be rendered more prominently than any other header. It is usually used to indicate the title of the document. Often it has the same contents as the TITLE, although this is not required and not always a good idea. The title should be useful out of context (for example, in a bookmarks file) but the level 1 heading is only used inside the document.

The optional ALIGN attribute controls the horizontal alignment of the header. It can be LEFT, CENTER or RIGHT.

Notes:

• Headers should be used in hierarchical order.
• Do not asssume that this header means "very large font size and bold." While this is a popular rendering, it can be anything the browser chooses.
• Search engines may give words appearing in headers more importance in their index. The headers are also often used to build an "outline" of the document, which appears in the search results.
• Right alignment is not as widely supported as centered.

H2 - Level 2 heading

The level 2 heading is the second most important header in the document. It should be rendered more prominently than a H3, but less prominently than a H1. It is often used to mark up chapters in a document.

The optional ALIGN attribute controls the horizontal alignment of the header. It can be LEFT, CENTER or RIGHT.

Notes:

• Headers should be used in hierarchical order.
• Do not asssume that this header means "very large font size and bold." While this is a popular rendering, it can be anything the browser chooses.
• Search engines may give words appearing in headers more importance in their index. The headers are also often used to build an "outline" of the document, which appears in the search results.
• Right alignment is not as widely supported as centered.

H3 - Level 3 heading

The level 3 heading is the third most important header in the document. It should be rendered more prominently than a H4, but less prominently than a H2. It is often used to mark up sections inside a chapter in a document.

The optional ALIGN attribute controls the horizontal alignment of the header. It can be LEFT, CENTER or RIGHT.

Notes:

• Headers should be used in hierarchical order.
• Do not asssume that this header means "very large font size and bold." While this is a popular rendering, it can be anything the browser chooses.
• Search engines may give words appearing in headers more importance in their index. The headers are also often used to build an "outline" of the document, which appears in the search results.
• Right alignment is not as widely supported as centered.

H4 - Level 4 heading

The level 4 heading should be rendered more prominently than a H5, but less prominently than a H3. It is often used to mark up subsections in a document.

The optional ALIGN attribute controls the horizontal alignment of the header. It can be LEFT, CENTER or RIGHT.

Notes:

• Headers should be used in hierarchical order.
• Do not asssume that this header means "large font size and bold." While this is a popular rendering, it can be anything the browser chooses.
• Search engines may give words appearing in headers more importance in their index. The headers are also often used to build an "outline" of the document, which appears in the search results.
• Right alignment is not as widely supported as centered.

H5 - Level 5 heading

The level 5 heading is the second least important header in the document. It should be rendered more prominently than a H6, but less prominently than a H4. Because it is often rendered in a small font, it is not used very often. It should be used to divide sections inside a H4.

The optional ALIGN attribute controls the horizontal alignment of the header. It can be LEFT, CENTER or RIGHT.

Notes:

• Headers should be used in hierarchical order.
• Do not asssume that this header means "small font size and bold." While this is a popular rendering, it can be anything the browser chooses.
• Search engines may give words appearing in headers more importance in their index. The headers are also often used to build an "outline" of the document, which appears in the search results.
• Right alignment is not as widely supported as centered.

H6 - Level 6 heading

The level 6 heading is the least important header in the document. It should be rendered less prominently than a H5, but more prominently than normal text. Because it is often rendered in a small font, it is not used very often. It should be used to divide sections inside a H5.

The optional ALIGN attribute controls the horizontal alignment of the header. It can be LEFT, CENTER or RIGHT.

Notes:

• Headers should be used in hierarchical order.
• Do not asssume that this header means "very small font size and bold." While this is a popular rendering, it can be anything the browser chooses.
• Search engines may give words appearing in headers more importance in their index. The headers are also often used to build an "outline" of the document, which appears in the search results.
• Right alignment is not as widely supported as centered.

HEAD - Document head

The HEAD part of the document provides information about the document. It should not contain text or normal markup. If a browser encounters such markup, it will assume it has arrived in the BODY section of the document already.

Caveats:

• You may only omit this tag if you group all the tags which may go in it at the top.

HR - Horizontal rule

HR is used to draw horizontal rules across the browser window. If the margins are currently smaller, for example because of images (IMG) which are placed against the margins, the rule will extend to these margins instead of the whole window. A horizontal rule is typically used to separate sections within a document.

In HTML 3.2, the appearance can be controlled more than in HTML 2. You can specify the thickness of the rule with the SIZE attribute, which takes an integer number of pixels. The width of the rule can be specified in number of pixels or as a percentage of the currently available window width, using the WIDTH attribute. Don't forget that percentage values must be quoted! The NOSHADE attribute is used to indicate that the rule should not get its usual shaded appearance, but instead should be drawn as a thick line.

Notes:

• None of the attributes for HR existed in HTML 2, so they may not be supported by all browsers. This can produce bizarre effects if you are using multiple HRs in a row to produce growing or shrinking "stripes".
• If you use too many rules on a document, the end result can be that the document looks like a "sandwich" because there is little text between each rule.
• Setting an absolute width is not recommended, since you have no way to know how wide the currently available window is. Use a percentage if you have to change the width.

HTML - HTML Document

The HTML tag is the outermost tag. It is not required and may safely be omitted. It indicates that the text is HTML (the version can be indicated with the optional VERSION attribute), but this information is almost never used by servers or browsers.

Notes:

• If used, the HTML tags should go around the entire document, but directly after the DOCTYPE declaration.

IMG - Inline images