Hyper-Text Markup Language – Glossary of key elements
An HTML element takes the form:
<ELEMENT [...]> [... </ELEMENT>]
and has at least a beginning or 'opening' part, <NAME>, and which optionally may include attributes that control the behaviour of the element (represented above as '[...]') after the name and before the terminating chevron '>'.
In the following definitions it is assumed that a value for any attribute is always assigned thus:
<ELEMENT ATTR1="value1" [ATTR2="value2" [etc.]]>
There may also be an ending or 'closing' part </NAME>, but only if the element is designed to contain something between <NAME> and </NAME> upon which it has some effect, e.g. <P> – </P>, <FONT> – </FONT>, <CENTER> – </CENTER>. Such contents are herein again indicated by '...'.
Some elements are specifically component parts of other elements, e.g. <LI> (List Item), and <PARAM> for <APPLET> and <OBJECT>, <TR> (Table Row) for <TABLE>, which must be contained between the opening and closing 'parent' elements of which they are a part, and should not be used outside.
If the web browser includes a script engine, it will recognise some elements as objects and which may consequently be able to raise events that can call script functions.
Element names and attribute names can be written in upper or lower case, although keeping upper case makes them stand out easier in the text, but is not essential.
HTML Elements – Universal Attributes
There are several general attributes that can be applied to most if not all elements that can occur within the BODY element, such as ID, LANG, STYLE, DIR and CLASS. These attributes are extensions to the HTML 2.0 specification and are used with such features as cascading style sheets, and may not be compatible with early web browsers.
Generally speaking, Microsoft Internet Explorer and Netscape Navigator versions 3.0+ can recognise and use such extensions.
All elements as <NAME...> [... </NAME>] Attributes:
ID: a unique identifier for a particular element. Where an element can be interrogated or manipulated as an object by a script, for example, the value of ID becomes the name of the object. Only Internet Explorer can expose 'ID' to scripts; it is ignored by Netscape. NAME: For Netscape Navigator, 'NAME' takes the place of 'ID' above, so to make sure objects can be accessed by scripts in both browsers, make both the same value. CLASS: a name used to define the type of a particular element. When used in conjunction with a cascading style sheet (ASCII) file (*.css), CLASS is assigned the name of a defined style. E.g. the style file contains the line:
'.para {font-family:Arial, Helvetica, Univers; font-size:12pt; color:black; cursor:default;}'
and a <P> element is given the attribute: <P CLASS="para"> (without the '.' prefix). LANG: used to determine the language of the element; e.g., 'en.uk' may be used for British English. However, this can cause problems so this attribute is best left unused; the default is American English. DIR: defines the direction of text; right-to-left or left-to-right. Only applicable to languages written right-to-left; the default is left-to-right so is best left unspecified for English. Only used in conjunction with the LANG attribute. STYLE: used to apply a style to the element in the same way as would a cascading style sheet (*.css file) through a CLASS reference, and overriding that style sheet entry if applicable. Hence:
<P STYLE="font-size:10pt; color:blue;">
Events:
Many elements may also be able to raise a range of universal events, such as 'OnClick'. This is very much a subject of experimentation as it depends on whether the browser and its script engine can respond to a particular event from a particular element type.
HTML Documents
The initial two parts of an HTML document together identify it as an HTML type that can be 'rendered' (displayed) as such by a web browser. These are:
Note the value of 'colour' above is provided as an RGB (Red, Green, Blue) value either in the form of a six digit hexadecimal number prefixed with '#', e.g BGCOLOR="#FFFFFF" for white, or in decimal, e.g. '0' for black, or one of the predefined words representing the 16 basic Windows colours Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow or Aqua. This also applies to the colour attributes of any other elements.
Events – the following can execute a script or scripted function:
ONLOAD Occurs when the page has finished loading. Example: <BODY ONLOAD="JavaScript:alert('Here I am!');", or: <BODY ONLOAD='VBScript:MsgBox "Here I am!"' (Internet Explorer only), or a call to a function: <BODY ONLOAD = "JavaScript:initialise();" ONUNLOAD Occurs when the page unloads.
This concludes the <BODY> element.
Summary
In summary, an HTML document must consist of at least:
<prologue document identifier>
<HTML>
<HEAD>
<TITLE>Page Title</TITLE>
</HEAD>
<BODY>
Everything else
</BODY>
</HTML>
The <BODY> element can contain any of the following elements:
Events – the following can execute a script or scripted function:
ONCLICK Occurs when the underlined text is clicked on. ONMOUSEOVER Occurs when the mousepointer (or pointing hand icon) is moved over the underlined text. ONMOUSEOUT Occurs when the mousepointer leaves the underlined text.
ALT, ALIGN, BORDER, HSPACE, VSPACE, WIDTH, HEIGHT – see <IMG>. CODE Required. Gives the name of the file that contains the applet's compiled Applet subclass. This file is relative to the base URL of the applet. It cannot be absolute, e.g.: CODE="MyApplet.class" only is allowed. CODEBASE Optionally specifies the base URL of the applet – the directory that contains the applet's code, e.g.: CODEBASE="java/". If this attribute is not specified, then the document's own base URL is assumed. NAME Optionally specifies a name for the applet instance, which allows applets on the same page to find and communicate with each other if required, and, along with ID, makes it accessible as an object to scripts.
CLEAR – with the addition of floating images it was necessary to expand the <BR> element. Normal <BR> still just inserts a line break. A CLEAR attribute has been added to <BR>, so: CLEAR="left" will break the line, and move vertically down until you have a clear left margin (no floating images). CLEAR="right" does the same for the right margin. CLEAR="all" moves down until both margins are clear of images.
COLOR Sets the colour for the enclosed text. For actual colour values see <BODY> above. FACE Sets the name of the typeface for the enclosed text. Careful: the face displayed must already be installed on the user's computer. Substitute faces can be specified in case the chosen one is not installed, in a comma separated list, e.g.: <FONT FACE="Arial, Helvetica, Univers, Times New Roman">
If no match is found, the text will be displayed in the default font set by the browser, or that set with <BASEFONT SIZE=n>. SIZE Valid values range from 1 to 7. The browser's set default size equates to 3. The value given can optionally be preceded with '+' or '–' to specify a difference relative to the default base font, e.g. '–1'. The default can be changed with the <BASEFONT SIZE ...> element. Note: originally FACE was specific to Internet Explorer. Both this and Netscape Navigator support COLOR.
ALIGN : see <IMG>. CHECKED : If TYPE is a checkbox or radio button, indicates that it is selected. MAXLENGTH : If TYPE is a text field, indicates the maximum number of characters that can be entered into it. NAME : Always required. Used when transferring the form's contents, which is done as 'NAME=value' pairs for each input element. SIZE : Specifies the size or precision of the field according to its type. SRC : A URL or URN specifying an image. For use only with TYPE=IMAGE in HTML Level 2. TYPE : Defines the type of data field:
= BUTTON appears as a normal button that is not a SUBMIT or RESET type and you can do what what you want with. It can be given a caption by setting VALUE.
= CHECKBOX : simple on/off Boolean attribute, also a number of checkbox fields each of which has the same name. Each selected checkbox generates a separate name/value pair in the submitted data.
= HIDDEN : Invisible to the user, but the preset value of the field is sent with the submitted form.
= IMAGE : An image field which you can click on with the mouse, causing the form to be submitted.
= PASSWORD : same as TEXT, except that the text is not displayed as entered.
= RADIO : a button type that accepts a single value from a set of such buttons. Each radio button in the group should be given the same name, but a unique value. Only the selected radio button in the group generates a name/value pair in the submitted data. The one selected is identified by the value returned.
= RESET : a button that resets the form's fields to their specified initial values.
= SUBMIT : a button that submits the form.
= TEXT : used for a single line text entry.
= TEXTAREA : used for multiple-line text-entry fields.
= FILE : allows the inclusion of files with form information.
VALUE : The initial displayed value of the field or caption of a button; or the value to be returned when the field is selected, if it displays a Boolean value. Required for radio buttons. Events:
ACCEPT
ONCLICK
ONFOCUS control gets mouse/caret focus. ONBLUR control loses focus. ONCHANGE value/selection changed. ONSELECT item selected.
ALIGN Optional. Left, right or center. COLOR Optional. See <BODY> for colours syntax. NOSHADE Optionally switches off the shaded/engraved effect to make a plain solid line. SIZE Optional. The thickness in pixels. WIDTH Optionally forces the width in pixels. The default is page width minus margins. If specified, allows use of ALIGN.
<LH> List Header Can immediately follow an <OL>, <UL> etc. opening element to provide a non-bulleted or unnumbered sub-title for the list. If intended to be a separate line from the first list item, follow it with <BR>.
ALT, ALIGN, BORDER, HSPACE, VSPACE, WIDTH, HEIGHT – see <IMG>. CLASSID Any ActiveX object is only referred to by its CLSID key as recorded in the Windows registry. You must know what this is when writing the <OBJECT> element. For convenience, you should also give it a name with the ID and NAME attributes. CODE Rare. Some objects may require certain code to implement the object. CODEBASE Required. The URL to the location where the object or .CAB file can be sourced. Once the object is installed, this is not used again. CODETYPE The MIME type, usually "application/x-oleobject". DATA Rare. Used to point to a persistent data stream to initialise the object's state. STANDBY A message that is displayed in the defined area, like ALT for IMG, while the object is loading or installing.
Parts – <OBJECT> element
The 'properties', or attributes, of the object can be (and most often are) initialised by <PARAM> elements, see <APPLET>. Otherwise these can be initialised by a script.
Events – whatever events the object raises may be given an event handler script, e.g.:
<SCRIPT LANGUAGE="JavaScript" EVENT="Click" FOR="thisObject"><!--
function thisObject_Click () {
alert ('Object was clicked.')
}
//--></SCRIPT>
ALIGN Valid values are LEFT, CENTER, RIGHT. Where possible use the <CENTER> element because using <P ALIGN > may cause problems where <P> ... </P> is used as a container.
ALIGN allows a table to be aligned to the left or right of the page, allowing text to flow around the table. Also, as with floating images, it is necessary to have knowledge of the <BR CLEAR= > element, to be able to organise the text so as to minimise any unwanted clashing. BACKGROUND Internet Explorer supports the placing of images inside the <TABLE> element. If used, the specified image is tiled behind all of the table cells. BGCOLOR allows the background colour of the table to be specified, using either the specified colour names, or a rrggbb hex triplet (see <BODY>. BORDER if present, borders are drawn around all table cells. If absent, there are no borders, but by default space is left for borders. BORDER="0" forces no borders with minimum spacing. BORDERCOLOR sets the border colour of the table. See <BODY> about colours syntax. BORDERCOLORDARK the darker colour to be displayed on a 3-dimensional <TABLE> border. BORDERCOLORLIGHT the lighter colour to be displayed on a 3-dimensional <TABLE> border. CELLSPACING the amount of space inserted between individual cells in a table (pixels). CELLPADDING the amount of space between the border of each cell and its contents. FRAME Internet Explorer specific. Requires the BORDER attribute to be set and affects the display of the table borders. HEIGHT describes the height of the table, either as a particular pixel value, or as a percentage of the display window. RULES Internet Explorer specific. Requires the BORDER value to be set and may only be used in tables where the <THEAD>, <TBODY> and <TFOOT> sections have been set. It affects the display of the internal table borders ("rules"). VALIGN specifies that the text can be top- or bottom-aligned. The default is centre-aligned. WIDTH describes the desired width of this table, either as an absolute width in pixels, or a percentage of document width.
<WBR> Word Break
This is for the very rare case when a <NOBR> section requires an exact break. Also, it can be used any time Netscape Navigator can be helped by telling it where a word is allowed to be broken. The <WBR> element does not force a line break (<BR> does that) it simply lets Netscape Navigator know where a line break is allowed to be inserted if needed.