================================================

Web Design: New HTML tags

HTML 4 introduced many new tags and commands. Although
some of the new tags such as <DIV>, <SPAN> and <STYLE>
are used extensively in DHTML, many others are less well
known. Some of these tags may be extremely useful in your
design efforts. Although not every web visitor may yet be
using a DHTML 4 compatible browser, the vast majority are.
Currently less than 5% of visitors to the Virtual Mechanics
site are using a none HTML 4 compatible Web Browser.

I have listed most of the new Version 4 tags below. I have also
posted many working versions of these examples at:
http://www.IMSWebTips.com/iss28fig1.htm . If you would
like to find out more about some of the Version 4 tags check :
http://www.w3.org/TR/html4/appendix/changes.html#h-A.3 or
visit the W3C web site http://www.w3.org/ to get
information on any HTML standards and proposals.

<ABBR>, <ACRONYM> Abbreviation, Acronym
These tags are used to display an abbreviated term or an
acronym. The full term or meaning can then be displayed in a
popup box. (note: the popup does not appear to work with
ABBR in IE 5)

<ACRONYM Title="Interactive Multimedia
System">IMS</ACRONYM> is used to create interactive
web pages.

<BDO> Bidirectional Algorithm
Forces the direction that text is written. It is most often used
with the <PRE> tag to mix Left to Right text with languages
that are written from Right to Left, such as Hebrew.
LTF= Left to Right, RTL =Right to Left

<BDO DIR="RTL">hello</BDO>

<BUTTON> Button command
The Button Tag is usually used in forms and is similar to the
previous Input tag but provides more display possibilities
including the use of images.

<BUTTON name="submit" value="submit"
type="submit">Home<IMG src="me_home.jpg" alt="Go
Home"></BUTTON>

<COL>,<COLGROUP> Column, Column Group
These commands are used in tables to specify attributes that
are common to a selected number of columns. Colgroup will
apply the attribute to a selected range of columns. Col will
change a columns attribute within the Colgroup.

<COLGROUP span="40" width="20">
<COL Span="39">
<COL id="Column40">
</COLGROUP>

<DEL>,<INS> Delete, Insert
The Insert and delete Tags are used to denote a change in a
document. These operations are often displayed in legal
documents by Underlining inserted text and Striking through
deleted text. The Title subcommand can be used to display a
popup box with the reasons the changes were made.

<DEL title="The boss does not like him">David</DEL><INS
title="This is the bosses choice">John</INS> has been
promoted.

<FIELDSET>,<LEGEND>
The Fieldset tag is used to group related labels and controls by
placing a group box around them. The Legend tag is used to
assign a caption to a Fieldset.

<FIELDSET>
<LEGEND>Countries of North America</LEGEND>
Canada<br>
United States<br>
Mexico<br>
</FIELDSET>

<FRAME>, <FRAMESET>, <IFRAME>
These Tags have been around for awhile. With Version 4
HTML they have been assign additional features and
capabilities which are too extensive to list here. Visit the W3C
for more details.

<LABEL> Label tag for Forms;
The Label Tag will attach information to a form command.

<LABEL>First Name<INPUT type="text">
</LABEL>

Use the 'For' attribute to explicitly assign a label.
<LABEL for="fname">First Name</LABEL>
<INPUT type="text" id="fname">

<OBJECT>, <PARAM> Object, Parameter
Identifies an Object to be placed on the page and lets the
browser determine how to display it. Graphics and Text are
usually processed by the Browser. If a none native Object is
used, the necessary instructions and code can be passed with
the <PARAM> tag.

<OBJECT
classid="http://www.miamachina.it/analogclock.py">
<PARAM name="height" value="40" valuetype="data">
<PARAM name="width" value="40" valuetype="data">
</OBJECT>

<OPTGROUP> Option Group
Optgroup provides the ability to group choices logically. This
is particularly useful in forms with long lists of multiple
choices.

<FORM>
<SELECT name="People">
<OPTION label="none" value="none">None</OPTION>
<OPTGROUP label="children">
<OPTION label="boys" value="boys">boys</OPTION>
<OPTION label="girls" value="girls">girls</OPTION>
</OPTGROUP>
<OPTGROUP label="adults">
<OPTION label="men" value="men">men</OPTION>
<OPTION label="wom" value="wom">women</OPTION>
</OPTGROUP>
</SELECT>
</FORM>

<THEAD>,<TBODY>,<TFOOT>Table Head, Table Body,
Table Foot
These tags can be applied to a Table Rows to permit scrolling
of the Body section independently of the Head and Footer
sections.

<TABLE>
<THEAD>
<TR> ...header information...
</THEAD>
<TFOOT>
<TR> ...footer information...
</TFOOT>
<TBODY>
<TR> ...first row of block one data...
<TR> ...second row of block one data...
</TBODY>
<TBODY>
<TR> ...first row of block two data...
<TR> ...second row of block two data...
<TR> ...third row of block two data...
</TBODY>
</TABLE>

<Q> Quote
The Q tag is simply an abbreviation for the Blockquote Tag
and can be used interchangeably.

Something that many HTML authors don't realize is that just
because a Browser is version 4 does not necessarily mean that
it supports HTML 4. In the case of Netscape Navigator 4 and
Internet Explorer 4 this is only coincidentally true. Internet
Explorer 5 for instance, does not support HTML 5 because
there is no such thing. Internet Explorer 4 was also released
prior to HTML 4 being fully adopted which means it may not
fully support all of the requirements of the HTML 4
specifications. In fact, none of the Browsers to date ever have
fully supported the current standard.

In a future newsletter I shall talk about some of the
specifications being discussed for XHTML.


================================================
"IMS Web Tips" ISSN 1488-7088
© Copyright 1999 Virtual Mechanics
================================================

"IMS Web Tips" is a weekly news letter for all web site managers regardless of experience who are looking for detailed information on creating, maintaining and promoting their web sites.
Web Engine
For the best in D HTML editors
Click here for a free WYSIWYG pixel precision HTML editor.
IMS WebTips



Home
Archive by Topic
Archive by Date
Virtual Mechanics