Make your own free website on Tripod.com

Back Main GuestBook Contact Music (JS) Appendix

<A></A> - Hypertext Links and Anchors

This tag is used to create a hyperlink (like the text you click on to take you somewhere else).
This is done by creating a source anchor, which is the starting point of the link (the clickable text). The link points to a destination anchor, usually another file, whose location is specified by the href attribute.

The anchor tag (<A>) is also used to create destination anchors within an HTML document. The name attribute can name a small section of HTML content. You can then point a link at this named section with the document's URI followed by # and the destination anchor's name.

HTML 4.0 allows you to link to almost any HTML element without using an anchor tag by using the id attribute (included in %coreattrs). Linking to an element by id works the same way as linking to one by name--you add # and the id name to the URI. Since this is a new capability, don't rely on it unless you restrict page access to browsers that support it.

Topics relating to client-side image maps will be added with its respective section.

This tag must be closed at the end of the linked text by typing </A>. It is illegal to nest anchor tags; however, you may specify both the name and href attributes in the same tag.

Attributes for <A>

  %coreattrs %i18n %events

Basic Structural Attributes

  name= [CS]
Specifies the name, which must be unique in the document. No other name, id, or class may have the same value.
This attribute names the anchor for use as a link destination.

  href= [CS]
Gives the location of the destination anchor.
This attribute creates a hyperlink by defining a destination anchor for the link.

  target= [CS]
  • "__"
    [target name]
Targets a frame or window with the given name. Target names must begin with a letter (A-Z,a-z).
  • "_blank"
Targets a new, unnamed window.
  • "_self"
Targets the same window/frame as the source anchor. This is the default value (unless overriden by a <BASE> element).
  • "_parent"
Targets the immediate frameset parent (one level up). Defaults to "_self" if already at the top.
  • "_top"
Targets the full window, cancelling all framesets.
This attribute tells the browser where to load the linked file.

Advanced Structural Attributes

  charset= [CI]
Gives the character encoding type.
This attribute tells the browser what character encoding is used by the linked document.

  type= [CI]
Gives the file type.
This attribute tells the browser the file type of the linked file.

  hreflang= [CI]
Gives language.
This attribute tells the browser the language of the linked file.

  rel= [CI]
Gives a space separated list of link types (or just one).
This attribute defines forward link types, expressing the relationship of this document/section to the one at the destination of the link.

  rev= [CI]
Gives a space separated list of link types (or just one).
This attribute defines reverse link types, expressing the relationship of the document/section at the destination anchor to this one. That would be the same value as rel on a link from the destination back to the source.

  accesskey= [CS]
Specifies access key.
This attribute tells the browser to activate the link when the specified key.

  tabindex= [CN]
Specifies tabbing order number.
This attribute controls the order in which elements recieve focus when tabbing. The default value is zero.
The order begins with the element assigned the lowest nonzero tabindex and works to the highest. Elements with the same tabindex go in the order they appear in the document, and elements with a tabindex of zero ("0") go last.

Attributes for Scripting

  onfocus= [CS]
  • "__"
    [script]
Gives the script commands in the document's default scripting language.
This attribute tells the browser to execute the specified script when the link receives focus.
You must specify a default scripting language!

  onunfocus= [CS]
  • "__"
    [script]
Gives the script commands in the document's default scripting language.
This attribute tells the browser to execute the specified script when the link loses focus.
You must specify a default scripting language!

Samples:

Read down the list, then try the links. Use your browser's back button to return from the first one.


The other attributes for <A> aren't used as often; the minimum amount of information necessary to create a link is the destination anchor's location, given by the href attribute. As a demonstration using <A>'s other attributes, I'll take the link to this page from the HTML Links table of contents and expand upon it:

<A> - Hypertext Links and Anchors

The code for the sample above is:
<A href="a.html" type="text/html" charset="UTF-8" hreflang="en" rel="section"><CODE>&A&</CODE< - Hypertext Links and Anchors>/A<

The link above gives more information about its destination that just the location:

Code Meaning
Attribute Value
href a.html The destination anchor is a file located in the same folder as this one and is named "a.html".
type text/html "a.html" is an HTML document.
charset UTF-8 The character encoding for "a.html" is UTF-8. (It isn't really; I don't know what it is.)
hreflang en "a.html" is written mainly in English.
rel section "a.html" is a section of this collection of documents.

Here is the code for the samples above:

<p>Read down the list, then try the links. Use your browser's back button to return from the first one.</p>
<UL>
  <LI><A href="../../contents.html">This link</A> takes you to the main page.
  <LI><A href="#top">This link</A> takes you to the anchor named "top", which is, incidently, at the top of this page. (The "Back" link has name=top in it.)
  <LI><A href="../../Tools/cheklist.html" target="CL">This link</A> opens a new window named "CL" and loads a checklist into it.
  <LI><A href="../../site/aknowlej.html" target="CL">This link</A> loads my acknowledgements page into the "CL" window.
  <LI>I'll add targets with framesets when I add the frames section. "_~
</UL>

Code for the "Back" button at the top of the page:

<A name=top href="index.html"><IMG src="../../toolbar/back.gif" width=34 height=85 border=0></A>