The Anchor element is the essence of HTML. It is marked text that is the start and/or destination of a hypertext link. 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 URNs 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 NAMEd 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 NAMEd intro and searching the NetHelp index with either "introduction", "HTMLib", or "help" would result in 'hits' which would navigate to the section NAMEd 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