The Anchor element is the essence of HTML. It is marked text that is the
start and/or destination of a hypertext link. By default, linked text is
displayed with an underline, in blue if the link has not been visited and
in purple if it has. Use STYLE="{text-decoration:none}"
to avoid
that. Anchor elements are defined by the <A>
element.
The <A>
element accepts several attributes, but either
the NAME or HREF attribute
is required.
Attributes of the <A>
element :
HREF
If the HREF
attribute is present, the text between the opening
and closing anchor elements becomes a hypertext link. If the link is selected
by readers, they are moved to the document or location specified by the value
of the attribute.
Example :
See <A
HREF="http://subnet.virtual-pc.com/~le387818/">The HTMLib
site</A> for updated info on the HTMLib.
In this example, selecting "The HTMLib" takes the reader to a document located at http://subnet.virtual-pc.com/~le387818/ (which is the HTMLib web site)
With the HREF
attribute, the form
HREF="#identifier"
can refer to another anchor in the same document.
Example :
The <A
HREF="document.html#glossary">glossary</A> defines
terms used in the document.
In this example, selecting "glossary" takes the reader to
another anchor (i.e. <A
NAME="glossary">Glossary</A>
) in the document document.html.
The NAME
attribute is described below. If the anchor is in another
document and the HREF
attribute provides a partial URL, the
new document will be resolved from either the present document, or from any
specified base address.
Several other forms of the HREF
attribute are permitted by browsers.
They are as follows :
<A
HREF="http://...">
<A
HREF="ftp://...">
<A
HREF="gopher://...">
<A
HREF="mailto:...">
<A HREF="mailto:htmlib@htmlib.demon.co.uk?subject=The HTMLib is
fantastic">link text</A>
. Internet Explorer
4.0 and above meanwhile supports and extends the above possibility, allowing
various mail fields to be automatically filled in, by using the syntax:
<A HREF="mailto:htmlib@htmlib.demon.co.uk?subject=Subscribe to mailing
list&cc=htmlib@htmlib.demon.co.uk&body=I'd like to subscribe to the
mailing list please">Link text</A>
Note that spaces are allowed in the mail fields
Note : while this works when Outlook Express is used as the default e-mail client, it may not work for all e-mail clients.
<A
HREF="news:...">
<A
HREF="newsrc:...">
<A
HREF="nntp://...">
<A
HREF="telnet://...">
<A
HREF="wais://...">
<A HREF="view-source://...>
HREF
attribute value
forces the standard Netscape 'view source' window to appear, containing the
document specified in the value of the attribute.
<A
HREF="nethelp:vendor/product:topic_id">
HREF
attribute
value and is specifically only used when delivering on-line help via the
NetHelp method. For more details, visit the NetHelp site
at
http://home.netscape.com/eng/help/
and download the NetHelp SDK.
NAME
If present, the NAME
attribute allows the anchor to be the target
of a link (another <A HREF...>
element). The value of
the NAME
attribute is an identifier for the anchor. Identifiers
are arbitrary strings but must be unique within the HTML document. Also,
note that they are case sensitive within HTML documents and can not contain
spaces.
Example of use:
<A NAME="coffee">Coffee</A> is an example
of...
An example of this is <A HREF="#coffee">coffee</A>.
Another document can then make a reference explicitly to this anchor by putting the identifier after the address, separated by a hash character :
<A HREF="drinks.html#coffee">
TITLE
The TITLE
attribute is for informational purposes only (unless
used with a mailto: attribute). If present, the Title attribute should provide
the title of the document whose address is given by the HREF
attribute. When it was introduced, it was anticipated that perhaps browsers
would display the contents of the TITLE
attribute when the user
focuses on the link (like a ToolTip). So far, Internet
Explorer 4.0 (and above) is the only browser to implement this.
REL
The REL
attribute gives the relationship(s) described by the
hypertext link from the anchor to the target. The value should be a
comma-separated list of relationship values. Values and their semantics will
be registered by the HTML registration authority. The default relationship
if none other is given is void. The REL
attribute is only used
when the HREF
attribute is present. (See also
<LINK
REL="...">
)
REV
The REV
attribute is the same as the REL
attribute,
but the semantics of the link type are in the reverse direction. A link from
A to B with REL
="X" expresses the same relationship as a link
from B to A with REV
="X". An anchor may have both
REL
and REV
attributes. (See also
<LINK
REV="...">
)
URN
If present, the URN
attribute specifies a uniform resource name
(URN
) for a target document. The format of URN
s
is still under discussion (since 1994) by various working groups of the Internet
Engineering Task Force.
METHODS
The METHODS
attributes of anchors and links provide information
about the functions that the user may perform on an object. These are more
accurately given by the HTTP protocol when it is used, but it may, for similar
reasons as for the TITLE
attribute, be useful to include the
information in advance in the link. For example, the HTML user agent may
chose a different rendering as a function of the methods allowed; for example,
something that is searchable may get a different link appearance. The value
of the METHODS
attribute should be a comma separated list of
HTTP methods supported by the object for public use.
TARGET
Browser windows can now have names associated with them. Links in any window
can refer to another window by name. When the link is activated, the document
referenced will appear in that named window. If the window is not already
open, the browser will open and name a new window for you. Such an action
is only supported by frames capable browsers (i.e. Netscape and Internet
Explorer.)
The syntax for the targeted windows is:
<A HREF="url.html" TARGET="window_name">Link
text</A>
The TARGET
attribute can accept the following values :
<FRAME>
element, or by using the
window.open
scripting method. If a window_name
is used which does not correlate
to a previously defined window, then a new window is created and
NAME
d according the the window name used in the
TARGET
attribute. This new window can then be referenced using
its new name.
<FRAMESET>
element definitions that control the form's current window.
TARGET="window_name"
where the window_name used is
not a previously defined window. NOTE : Unlike
using the window_name
using a previously undefined window name,
using _blank
will not name the new window for future use.
See Also,
<BASE
TARGET=...>
ACCESSKEY
The ACCESSKEY
attribute can be used to specify a shortcut key
for the link (activated by pressing 'Alt' and the ACCESSKEY
together - like standard Windows applications menu shortcuts). The
ACCESSKEY
setting does not have to be a character in the actual
link text and the link text is not modified in any way to reflect that an
ACCESSKEY
has been defined for the link. A sensible way around
this would be something like :
<A HREF="url.htm" ACCESSKEY="W">W<SPAN
STYLE="{text-decoration:none}">hat's New</SPAN></A>
Which displays as :
alerting the user that there's something special about the 'W' in the link.
Pressing 'Alt+W' would then activate the link. Note that more than one link
in a document can use the same ACCESSKEY
setting. If from the
same document, an ACCESSKEY
is re-used, the next
ACCESSKEY
enabled link in the document (in the order they appear)
that uses the same setting will be activated. Unless you can guarantee where
in the current document the user is, it makes sense to try and use unique
ACCESSKEY
settings for links. Also note that
ACCESSKEY
settings override those of the main Internet
Explorer menus.
The ACCESSKEY
attribute is Internet Explorer
4.0 and above specific.
LANGUAGE
The LANGUAGE
attribute accepts values of Javascript
or VBscript
to explicitly set the scripting language used in
any in-line scripts within the element. It attempts to set the language of
all scripts relating to the element, but external script blocks (using the
<SCRIPT>
element) should contain their own
LANGUAGE
setting in the <SCRIPT>
element.
(See
Javascript
or
Visual
Basic Script topics for more information). LANGUAGE
can
be useful if you set multiple in-line event handling routines within an anchor
element, to save using event="javascript:..."
or
event="vbscript:..."
in each event handler, however,
doing so would over-ride the LANGUAGE
setting. For example,
the following HTML fragment :
<A HREF="url.htm" onclick="javascript:return false">Link
text</A>
'kills' the link, by cancelling the 'click' action. This could be simplified by using :
<A HREF="url.htm" LANGUAGE="Javascript" onclick="return
false">Link text</A>
as the LANGUAGE
element expressly sets the scripting language
to be Javascript. The same 'idea' in Visual Basic Script could be :
<A HREF="url.htm" LANGUAGE="VBscript"
onclick="window.event.returnvalue=false">Link text</A>
(Note the different syntax for event cancelling.)
INDEXSTRING and
TOCSTRING
These two Netscape specific attributes of the
<A>
element are specific for authoring on-line help/user
assistance, employing NetHelp. For more information about NetHelp, visit
http://home.netscape.com/eng/help/
and download the NetHelp SDK.
For NetHelp help systems, the INDEXSTRING
and
TOCSTRING
are used to define table of contents and index entries.
NetHelp uses extensive scripting to dynamically create a table of content
and an index for the files that make up the help system. To author a NetHelp
system, table of contents entries and index keywords are defined in anchors
within
<Hx>
elements. The INDEXSTRING
and TOCSTRING
attributes
are then used to define the text that will appear in the table of contents
and the keywords that will appear in the index. For example:
<H1>
<A NAME="intro" TOCSTRING="The
HTMLib"></A>
</H1>
<H2>
<A NAME="introidx" TOCSTRING="Introduction to the HTMLib"
INDEXSTRING="introduction^HTMLib^help">Introduction to
the HTMLib</A>
</H2>
In a NetHelp system, this would result in a 'chapter' in the table of contents,
headed "The HTMLib" (<H1>
elements are interpreted as
chapter headings by the NetHelp tools). The first section inside the "The
HTMLib" chapter in the table of contents, would be entitled "Introduction
to the HTMLib" (<H2>
elements are interpreted as section
headings, within a chapter heading by the NetHelp tools). Clicking on "The
HTMLib" in the NetHelp generated table of contents would navigate to the
anchor NAME
d intro
and searching the NetHelp index
with either "introduction", "HTMLib", or "help" would result in 'hits' which
would navigate to the section NAME
d introidx
. Clicking
on the "Introduction to the HTMLib" entry in the table of contents would
also navigate to the same section.
DATAFLD
The DATAFLD
attribute can be used to specify a data column name
from the Data source (see DATASRC
) that the
<A>
is bound to. For more information on the
DATAFLD
attribute, see the
Data
Binding topic. Note that the data being taken from the Data Source will
be used for the HREF
attribute value if an anchor is data-bound.
Therefore, having it receive data that isn't a valid URL would make the link
useless.
DATASRC
The DATASRC
attribute can be used to specify a data source that
the <A>
is bound to. For more information on the
DATASRC
attribute, see the
Data
Binding topic.
LANG
The LANG
attribute can be used to specify what language the
<A>
element is using. It accepts any valid ISO standard
language abbreviation (for example "en"
for English,
"de"
for German etc.) For more details, see the
Document
Localisation section for more details.
CLASS
The CLASS
attribute is used to specify the
<A>
as using a particular style sheet class. For example,
external links throughout the HTMLib use a style class declared as:
<STYLE TYPE="text/css">
.external {color : #0000FF}
</STYLE>
with the external links being referenced as:
<A CLASS="external"
HREF="http://www.microsoft.com">http://www.microsoft.com/</A>
See the Style Sheets overview for more information and style sheet settings.
ID
The ID
attribute can be used to either reference a unique style
sheet identifier, or to provide a unique name for the
<ADDRESS>
element for scripting purposes. Any
<ADDRESS>
element with an ID
attribute can
be directly manipulated in script by referencing its ID
attribute,
rather than working through the
All
collection to determine the element. See the
Scripting
introduction topic for more information.
STYLE
As well as using previously defined style sheet settings, the
<A>
element can have in-line stylings attached to it.
For example:
<A STYLE="color:#0000FF"
HREF="http://www.microsoft.com">http://www.microsoft.com/</A>
would display exactly as the above example. See the Style Sheets section for more details about style sheet settings.
The <A>
element style can also be controlled by using
the Anchor pseudo-elements.
Using a Style Sheet definition in the <STYLE>
element,
the pseudo-classes A:link
, A:visited
and
A:active
can be used to set the text style of links, visited
links and active links respectively (just as the LINK
,
ALINK
and VLINK
attributes of the
<BODY>
element do for those browsers that do not support style sheets). Note however,
that while Internet Explorer 4.0 currently supports the
use of these pseudo-classes, it 'breaks' any scripting for the particular
<A>
element (either using an event handler in the element,
or a separate script function referenced by the anchors ID
attribute).
<A...> Scripting
<A...>
Properties
Besides the
Standard
Dynamic HTML properties (i.e. className,
document, id,
innerHTML, innerText,
isTextEdit, lang,
language, offsetHeight,
offsetLeft, offsetParent,
offsetTop, offsetWidth,
outerHTML, outerText,
parentElement,
parentTextEdit,
sourceIndex, style,
tagName and title), each
link object (i.e. <A HREF...>
) has the following properties,
which are available for manipulation for every link in the document, either
directly (within an in-line event handler, or via referencing of the anchor/links
ID
attribute) or via the
Links
array/collection.
Note that most of the following properties are only supported by
Internet Explorer 4.0's
Dynamic
HTML scripting model. Some properties and events are supported by
Netscape (and earlier versions of Internet
Explorer as each <A ...>
element creates an Anchor
and/or a Link object (depending on whether it's <A
HREF...>
or <A NAME...>
, whose properties and
events are exposed through the
Links
array/collection and
Anchor
topic.
accessKey
- (Internet Explorer 4.0+)
If the
ACCESSKEY
attribute (see above) is set for a link, then the accessKey
property reflects the setting, otherwise it remains empty. It is possible
to change a links accessKey
property in script code.
datafld
- (Internet Explorer 4.0+)
The dataFld
property directly reflects the value of the
DATAFLD
attribute (see above). For more information on the
DATAFLD
attribute, see the
Data
Binding topic.
datasrc
- (Internet Explorer 4.0+)
The dataSrc
property directly reflects the value of the
DATASRC
attribute (see above). For more information on the
DATASRC
attribute, see the
Data
Binding topic.
hash -
(Internet Explorer 3.0+, Netscape 2.0+)
The hash
property reflects, or sets any 'bookmark' definitions
within the link's HREF
attribute. For example :
<A HREF="http://www.htmlib.com/intro.htm#contents"
ID="ContentsLink">View the contents</A>
. . .
<SCRIPT LANGUAGE="VBScript">
strHash=ContentsLink.hash
</SCRIPT>
would make strHash
have the value of contents
.
host -
(Internet Explorer 3.0+, Netscape 2.0+)
The host
property is essentially a combination of the
hostname
(see below) and port
(see below) properties.
For the above example (for the hash
property), the
host
property would be www.htmlib.com:80
. (80 is
the standard port for Web servers)
hostname
- (Internet Explorer 3.0+, Netscape 2.0+)
The hostname
property reflects, or sets the name of the computer
identified in the
HREF
attribute. Using the above example (for the hash
property),
the hostname
property would be www.htmlib.com
.
href -
(Internet Explorer 3.0+, Netscape 2.0+)
The href
property reflects, or sets, the
HREF
attribute of the link. It is possible to change a link's href
property through scripting.
Methods
- (Internet Explorer 4.0+)
The Methods
property reflects, or sets the links
METHODS
attribute (if set)
name -
(Internet Explorer 3.0+, Netscape 2.0+)
The name
property reflects the anchors
NAME
attribute.
pathname
- (Internet Explorer 3.0+, Netscape 2.0+)
The pathname
property reflects, or sets the full path to the
target document, as given in the
HREF
attribute. For example :
<A HREF ="http://www.htmlib.com/html/Block Level
Elements/address.htm" ID="ContentsLink">View
the contents</A>
. . .
<SCRIPT LANGUAGE="VBScript">
strPathName=ContentsLink.pathname
</SCRIPT>
would give strPathName
a value of html/Block Level
Elements/address.htm
.
port -
(Internet Explorer 3.0+, Netscape 2.0+)
As mentioned above, the port
property reflects, or sets the
port setting (if given) in the
HREF
attribute (if set). If not port is specified in the HREF
setting,
then port 80 is assumed (the standard port for Web servers).
protocol
- (Internet Explorer 3.0+, Netscape 2.0+)
The protocol
property reflects, or sets the protocol of the
HREF
attribute (if set). For example :
<A
HREF="http://www.microsoft.com/">Microsoft</A>
<A HREF="ftp://ftp.microsoft.com/">Microsoft
(ftp)</A>
would have protocol
properties of http://
and
ftp://
respectively. For relative URLs in the HREF
attribute, the protocol
of the currently displayed document
is used.
rel - (Internet
Explorer 4.0+)
The rel
property directly reflects, or sets the value of the
REL
attribute (if set).
rev - (Internet
Explorer 4.0+)
The rev
property directly reflects, or sets the value of the
REV
attribute (if set).
search
- (Internet Explorer 3.0+, Netscape 2.0+)
The search
property reflects, or sets any search strings appended
to the URL given in the
HREF
attribute (if set). For example :
<A HREF=
"http://www.htmlib.com/intro.htm?contents">Link
text</A>
would have a search
property value of contents
target
- (Internet Explorer 3.0+, Netscape 2.0+)
The target
property reflects, or sets the link's
TARGET
attribute (if set)
urn - (Internet
Explorer 4.0+)
The urn
property reflects, or sets the link's
URN
attribute (if set)
<A...>
Methods
Besides the
Standard
Dynamic HTML methods (i.e. click,
contains, getAttribute,
insertAdjacentHTML,
insertAdjacentText,
removeAttribute,
scrollIntoView and
setAttribute), each Link object has the following
methods, which are available for manipulation for every link/anchor in the
document. Note that all of these methods are Internet Explorer
(4.0 and above) specific. The
Anchors
array and
Links
array as supported by Netscape (and earlier versions
of Internet Explorer) have a few Javascript specific methods,
but this reference isn't a Javascript language reference, so they aren't
detailed. For details, see any Javascript language reference.
blur -
(Internet Explorer 4.0+)
The blur
method can be used to force the users focus away from
the referenced <A>
.
focus
- (Internet Explorer 4.0+)
The focus
method can be used to force the users focus onto the
referenced <A>
. For example:
Link1.focus()
would force the focus to the link, whose ID
attribute is Link1.
<A...>
Events
Besides the
Standard
Dynamic HTML events (i.e. onclick,
ondblclick, ondragstart,
onfilterchange, onhelp,
onkeydown, onkeypress,
onkeyup, onmousedown,
onmousemove, onmouseout,
onmouseover, onmouseup
and onselectstart), each
<A...>
element/object accepts the following events (both
in separate script functions and within the element). Note that while some
are supported in various versions of Netscape (via the anchors
array/collection and links array/collection, depending on whether it's
<A HREF...>
or <A NAME...>
, or both),
most are Internet Explorer (4.0 and above) specific and
are
standard
Dynamic HTML Events. Each event handler details its browser support.
Also detailed are the various methods and properties accessible by script
functions for anchors within the document. To navigate to specific information,
use the 'Anchor Scripting' popup in the title of this topic.
onblur -
(Internet Explorer 4.0+)
The onblur
event can be used to execute script functions when
the particular link loses the focus. Note the subtle difference between this
event and the onmouseout
event in that removing the mouse from
being over the link does not lose the focus. This requires either
programmatically forcing another object to receive the focus, or by the user
manually passing the focus to another object or control in the document,
or clicking the document background
The example link below (containing ID="egOnBlurLink"
) executes
the following script function when it loses the focus :
Sub changetext()
egOnBlurLink.innerHTML = "Now I've <STRONG>lost</STRONG> the
focus"
End Sub
Give it a try :
Click
me, then click the document background
onfocus
- (Internet Explorer 4.0+)
The onfocus
event can be used to execute script functions when
the particular link receives the focus. Note the subtle difference between
this event and the onmouseover
event in that passing the mouse
over the link does not give it focus. This requires either programmatically
forcing the link to receive the focus, or by using the 'tab' key to progress
through the document links.
The example link below (containing ID="egOnFocusLink"
) executes
the following script function when it receives the focus:
Sub ReceivedFocus()
egOnFocusLink.innerHTML = "I received the
<STRONG>focus</STRONG>"
End Sub
Which causes the link text to be replaced with the new message. Try it below by pressing the button above the link and following the instructions.
Dynamic HTML in action! Note that clicking the link will also activate the script function (because the link receives the focus - before any reaction to clicking the link is determined), but that's not the point of the example. particular document.
© 1995-1998, Stephen Le Hunte