HTML 3.2 TAG REFERENCE |
||||||||||||||||||
|
Adapted from the official W3C HTML 3.2 Reference.
The Structure of HTML documentsHTML 3.2 Documents start with a <!DOCTYPE> declaration followed by an HTML element containing a HEAD and then a BODY element: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <HTML> <HEAD> <TITLE>A study of population dynamics</TITLE> ... other head elements </HEAD> <BODY> ... document body </BODY> </HTML> The HEAD elementThis contains the document head, but you can always omit both the start and end tags for HEAD. The contents of the document head is an unordered collection of the following elements:
TITLE is a container and requires both start and end tags. Example TITLE element: <TITLE>A study of population dynamics</TITLE> The BODY elementThis contains the document body. Both start and end tags for BODY may be omitted. The body can contain a wide range of elements: The key attributes are: BACKGROUND, BGCOLOR, TEXT, LINK, VLINK and ALINK. These can be used to set a repeating background image, plus background and foreground colors for normal text and hypertext links. Example: <body bgcolor=white text=black link=red vlink=maroon alink=fuchsia>
Colors are given in the sRGB color space as hexadecimal numbers (e.g. COLOR="#C0FFC0"), or as one of 16 widely understood color names. These colors were originally picked as being the standard 16 colors supported with the Windows VGA palette. | ||||||||||||||||||
| ||||||||||||||||||
Block and Text level elementsMost elements that can appear in the document body fall into one of two groups: block level elements which cause paragraph breaks, and text level elements which don't. Common block level elements include H1 to H6 (headers), P (paragraphs) LI (list items), and HR (horizontal rules). Common text level elements include EM, I, B and FONT (character emphasis), A (hypertext links), IMG and BR (line breaks). Note that block elements generally act as containers for text level and other block level elements (excluding headings and address elements), while text level elements can only contain other text level elements. The exact model depends on the element. HeadingsThere are six levels of headers from H1 (the most important) to H6 (the least important). H1, H2, H3, H4, H5 and H6 are used for document headings. You always need the start and end tags. H1 elements are more important than H2 elements and so on, so that H6 elements define the least important level of headings. More important headings are generally rendered in a larger font than less important ones. Use the optional ALIGN attribute to set the text alignment within a heading, e.g. <H1 ALIGN=CENTER> ... centered heading ... </H1> The default is left alignment, but this can be overridden by an enclosing DIV or CENTER element. ADDRESSThe ADDRESS element requires start and end tags, and specifies information such as authorship and contact details for the current document. Browsers should render the content with paragraph-breaks before and after. Note that the content is restricted to paragraphs, plain text and text-like elements as defined by the %text entity. Example: <ADDRESS> Newsletter editor<BR> J.R. Brown<BR> 8723 Buena Vista, Smallville, CT 01234<BR> Tel: +1 (123) 456 7890 </ADDRESS> Block elements
ParagraphsThe P element is used to markup paragraphs. It is a container and requires a start tag. The end tag is optional as it can always be inferred by the parser. Browsers should place paragraph breaks before and after P elements. The rendering is browser dependent, but text is generally wrapped to fit the space available. Example: <P>This is the first paragraph.
<P>This is the second paragraph.
Paragraphs are usually rendered flush left with a ragged right margin. The ALIGN attribute can be used to explicitly specify the horizontal alignment:
For example: <p align=center>This is a centered paragraph. <p align=right>and this is a flush right paragraph. The default is left alignment, but this can be overridden by an enclosing DIV or CENTER element. ListsList items can contain block and text level items, including nested lists, although headings and address elements are excluded. Unordered ListsUnordered lists take the form: <UL>
<LI> ... first list item
<LI> ... second list item
...
</UL>
The UL element is used for unordered lists. Both start and end tags are always needed. The LI element is used for individual list items. The end tag for LI elements can always be omitted. Note that LI elements can contain nested lists. The COMPACT attribute can be used as a hint to the browser to render lists in a more compact style. The TYPE attribute can be used to set the bullet style on UL and LI elements. The permitted values are "disc", "square" or "circle". The default generally depends on the level of nesting for lists.
Ordered (i.e. numbered) ListsOrdered (i.e. numbered) lists take the form: <OL>
<LI> ... first list item
<LI> ... second list item
...
</OL>
The OL START attribute can be used to initialize the sequence number (by default it is initialized to 1). You can set it later on with the VALUE attribute on LI elements. Both of these attributes expect integer values. You can't indicate that numbering should be continued from a previous list, or to skip missing values without giving an explicit number. The COMPACT attribute can be used as a hint to the browser to render lists in a more compact style. The OL TYPE attribute allows you to set the numbering style for list items:
Definition ListsDefinition lists take the form: <DL>
<DT> term name
<DD> term definition
...
</DL>
DT elements can only act as containers for text level elements, while DD elements can hold block level elements as well, excluding headings and address elements. For example: <DL> <DT>Term 1<dd>This is the definition of the first term. <DT>Term 2<dd>This is the definition of the second term. </DL> which could be rendered as:
The COMPACT attribute can be used with the DL element as a hint to the browser to render lists in a more compact style. Preformatted TextThe PRE element can be used to include preformatted text. Browsers render this in a fixed pitch font, preserving spacing associated with white space characters such as space and newline characters. Automatic word-wrap should be disabled within PRE elements. PRE has the same content model as paragraphs, excluding images and elements that produce changes in font size, e.g. IMG, BIG, SMALL, SUB, SUP and FONT. A few Browsers support the WIDTH attribute. It provides a hint to the browser of the required width in characters. The browser can use this to select an appropriate font size or to indent the content appropriately. Here is an example of a PRE element; a verse from Shelley (To a Skylark): <PRE>
Higher still and higher
From the earth thou springest
Like a cloud of fire;
The blue deep thou wingest,
And singing still dost soar, and soaring ever singest.
</PRE>
which is rendered as:
Higher still and higher
From the earth thou springest
Like a cloud of fire;
The blue deep thou wingest,
And singing still dost soar, and soaring ever singest.
XMP, LISTING and PLAINTEXTThese are obsolete tags for preformatted text that predate the introduction of PRE. Browsers may support these for backwards compatibility. Authors should avoid using them in new documents! DIV and CENTERDIV elements can be used to structure HTML documents as a hierarchy of divisions. The ALIGN attribute can be used to set the default horizontal alignment for elements within the content of the DIV element. Its value is restricted to LEFT, CENTER or RIGHT, and is defined in the same way as for the paragraph element <P>. Note that because DIV is a block-like element it will terminate an open P element. Other than this, Browsers are not expected to render paragraph breaks before and after DIV elements. CENTER is directly equivalent to DIV with ALIGN=CENTER. Both DIV and CENTER require start and end tags. BLOCKQUOTEThis is used to enclose block quotations from other works. Both the start and end tags are required. It is often rendered indented, e.g. They went in single file, running like hounds on a strong scent, and an eager light was in their eyes. Nearly due west the broad swath of the marching Orcs tramped its ugly slot; the sweet grass of Rohan had been bruised and blackened as they passed. from "The Two Towers" by J.R.R. Tolkien. FORMThis is used to define an HTML form, and you can have more than one form in the same document. Both the start and end tags are required. Forms can contain a wide range of HTML markup including several kinds of form fields such as single and multi-line text fields, radio button groups, checkboxes, and menus.
Further details on handling forms should be referenced from your ISP. HR - horizontal rulesHorizontal rules may be used to indicate a change in topic. In a speech based browser, the rule could be rendered as a pause. HR elements are not containers so the end tag is forbidden. The attributes are: ALIGN, NOSHADE, SIZE and WIDTH.
TablesTables take the general form: <TABLE BORDER=3 CELLSPACING=2 CELLPADDING=2 WIDTH="80%"> <TR><TD> first cell <TD> second cell <TR> ... ... </TABLE> The attributes on TABLE are all optional. By default, the table is rendered without a surrounding border. The table is generally sized automatically to fit the contents, but you can also set the table width using the WIDTH attribute. BORDER, CELLSPACING and CELLPADDING provide further control over the table's appearence. Each table row is contained in a TR element, although the end tag can always be omitted. Table cells are defined by TD elements for data and TH elements for headers. Like TR, these are containers and can be given without trailing end tags. TH and TD support several attributes: ALIGN and VALIGN for aligning cell content, ROWSPAN and COLSPAN for cells which span more than one row or column. A cell can contain a wide variety of other block and text level elements including form fields and other tables. The TABLE element always requires both start and end tags. It supports the following attributes:
The TR or table row element requires a start tag, but the end tag can always be left out. TR acts as a container for table cells. It has two attributes:
The element for defining table cells is TD. The start tags for TD are always needed but the end tags can be left out. Table cells can have the following attributes:
Tables are commonly rendered in bas-relief, raised up with the outer border as a bevel, and individual cells inset into this raised surface. Borders around individual cells are only drawn if the cell has explicit content. White space doesn't count for this purpose with the exception of . Text level elementsThese don't cause paragraph breaks. Text level elements that define character styles can generally be nested. They can contain other text level elements but not block level elements.
Font style elementsThese all require start and end tags, e.g. This has some <B>bold text</B>. Text level elements must be properly nested - the following is in error: This has some <B>bold and <I></B>italic text</I>.Browsers should do their best to respect nested emphasis, e.g. This has some <B>bold and <I>italic text</I></B>.
Phrase ElementsThese all require start and end tags, e.g. This has some <EM>emphasized text</EM>.
Form fieldsINPUT, SELECT and TEXTAREA are only allowed within FORM elements. INPUT can be used for a variety of form fields including single line text fields, password fields, checkboxes, radio buttons, submit and reset buttons, hidden fields, file upload, and image buttons. SELECT elements are used for single or multiple choice menus. TEXTAREA elements are used to define multi-line text fields. The content of the element is used to initialize the field. INPUT text fields, radio buttons, check boxes, ...INPUT elements are not containers and so the end tag is forbidden.
SELECT menusSELECT is used to define select one from many or many from many menus. SELECT elements require start and end tags and contain one or more OPTION elements that define menu items. One from many menus are generally rendered as drop-down menus while many from many menus are generally shown as list boxes. Example: <SELECT NAME="flavor">
<OPTION VALUE=a>Vanilla
<OPTION VALUE=b>Strawberry
<OPTION VALUE=c>Rum and Raisin
<OPTION VALUE=d>Peach and Orange
</SELECT>
SELECT attributes:
OPTION attributes:
TEXTAREA multi-line text fieldsTEXTAREA elements require start and end tags. The content of the element is restricted to text and character entities. It is used to initialize the text that is shown when the document is first loaded. Example:
<TEXTAREA NAME=address ROWS=4 COLS=40>
Your address here ...
</TEXTAREA>
Special Text level ElementsA (Anchor), IMG, FONT, BR and MAP. The A (anchor) elementAnchors can't be nested and always require start and end tags. They are used to define hypertext links and also to define named locations for use as targets for hypertext links, e.g. The way to <a href="hands-on.html">happiness</a>. and also to define named locations for use as targets for hypertext links, e.g. <h2><a name=mit>545 Tech Square - Hacker's Paradise</a></h2>
IMG - inline imagesUsed to insert images. IMG is an empty element and so the end tag is forbidden. Images can be positioned vertically relative to the current textline or floated to the left or right. See BR with the CLEAR attribute for control over textflow. e.g. <IMG SRC="canyon.gif" ALT="Grand Canyon"> IMG elements support the following attributes:
FONTRequires start and end tags. This allows you to change the font typeface, size and/or color for the enclosed text. The attributes are: SIZE, COLOR, and FACE. Font sizes are given in terms of a scalar range defined by the browser with no direct mapping to point sizes etc.
The following shows the effects of setting font to absolute sizes: size=1 size=2 size=3 size=4 size=5 size=6 size=7 BRUsed to force a line break. This is an empty element so the end tag is forbidden. The CLEAR attribute can be used to move down past floating images on either margin. <BR CLEAR=LEFT> moves down past floating images on the left margin, <BR CLEAR=RIGHT> does the same for floating images on the right margin, while <BR CLEAR=ALL> does the same for such images on both left and right margins. MAPThe MAP element provides a mechanism for client-side image maps. These can be placed in the same document or grouped in a separate document although this isn't yet widely supported. The MAP element requires start and end tags. It contains one or more AREA elements that specify hotzones on the associated image and bind these hotzones to URLs. Here is a simple example for a graphical navigational toolbar: <img src="navbar.gif" border=0 usemap="#map1"> <map name="map1"> <area href=guide.html alt="Access Guide" shape=rect coords="0,0,118,28"> <area href=search.html alt="Search" shape=rect coords="184,0,276,28"> <area href=shortcut.html alt="Go" shape=rect coords="118,0,184,28"> <area href=top10.html alt="Top Ten" shape=rect coords="276,0,373,28"> </map> The MAP element has one attribute NAME which is used to associate a name with a map. This is then used by the USEMAP attribute on the IMG element to reference the map via a URL fragment identifier. Note that the value of the NAME attribute is case sensitive. The AREA element is an empty element and so the end tag is forbidden. It takes the following attributes: SHAPE, COORDS, HREF, NOHREF and ALT. The SHAPE and COORDS attributes define a region on the image. If the SHAPE attribute is omitted, SHAPE="RECT" is assumed.
Where x and y are measured in pixels from the left/top of the associated image. If x and y values are given with a percent sign as a suffix, the values should be interpreted as percentages of the image's width and height, respectively. For example: SHAPE=RECT COORDS="0, 0, 50%, 100%" The HREF attribute gives a URL for the target of the hypertext link. The NOHREF attribute is used when you want to define a region that doesn't act as a hotzone. This is useful when you want to cut a hole in an underlying region acting as a hotzone. If two or more regions overlap, the region defined first in the map definition takes precedence over subsequent regions. This means that AREA elements with NOHREF should generally be placed before ones with the HREF attribute. The ALT attribute is used to provide text labels which can be displayed in the status line as the mouse or other pointing device is moved over hotzones, or for constructing a textual menu for non-graphical Browsers. Authors are strongly recommended to provide meaningful ALT attributes to support interoperability with speech-based or text-only Browsers. | ||||||||||||||||||
| previous | next | contents |