Dropping Anchors into HTML
A element is used to represent anchors in
HTML. An anchor is quite simply a hyperlink head or a hyperlink tail.
The syntax is slightly different for each.
Anchors as Hyperlink Heads
Hyperlink heads are
A attributes that have an
HREF attribute. The
HREF attribute accepts URL
references as values, and points to the tail of the hyperlink. The
contents of the elements are a "hot zone" in your document that forms
the head of the hyperlink. Here's an example:
<P>The Object Transfirbulation Protocol is implemented similarily to the Media Object Request Originating Name Sequencer (see <A HREF="chapter113.html">Chapter 113 - M.O.R.O.N.S. in Action</A>).</P>
By now you should be able to see what this is: a
element that contains some text and an
A element. The
A element is a hyperlink head. The tail of this hyperlink
is identified by the relative URL
Following this hyperlink will cause the user agent to resolve this
relative URL based on the document's base URL, and take us to the
absolute URL that results.
Now you can see the value of relative URLs. If the document containing the above code was in your hard disk being edited, then its base URL might be something like this:
By using a relative URL to refer to Chapter 113, the absolute URL that results is:
Now suppose you publish the book online on Acme Computer Corporation's Web site. Chapters 2 and 113 of the book may be at the following URLs respectively:
Now, without changing your HTML at all, the relative URL in the hyperlink still points to Chapter 113, even though the base URL has changed. This means you can have your book in your hard disk, on a Web site, or even in many separate Web sites, and the hyperlinks between various parts of the book will still be valid.
With hypertext technology, there's no need to actually explicitly
include references like "see Chapter 113" in the text. However, if such
references are omitted, the content of an
A element may not
always describe the tail of the hyperlink sufficiently. For this reason,
we have the
TITLE attribute to the
which should be set to the title of the hyperlink's tail. So our example
could be made more elegant like this:
<P>The Object Transfirbulation Protocol is implemented similarily to the Media Object Request Originating Name Sequencer (<A HREF="chapter113.html" TITLE="Transfirbulation Technology - M.O.R.O.N.S. in Action"> MORONS </A>).</P>
This HTML is getting a little messy, so here it is in this document:
The Object Transfirbulation Protocol is implemented similarily to the Media Object Request Originating Name Sequencer (MORONS).
Depending on the browser you're using to view this tutorial, the
above will be shown differently. Assuming you're using a graphical
browser that follows the more traditional rendering, it will be a block
of text with margins at the top and bottom (which represents the
paragraph element) which will have the word "MORONS" colored differently
and underlined. This indicates a hyperlink. Following this hyperlink
would take us to the chapter on MORONS, but don't follow it right now
because the URL doesn't point to an existing document. Certain browsers
(like Internet Explorer 4.0) will display the contents of the
TITLE attribute when the mouse is placed (but not clicked)
over the hyperlink.
This is a very good but simple example of the abstraction of HTML.
TITLE attribute is rendered as a "tool-tip" by Internet
Explorer 4.0, but is ignored by, say Netscape Navigator. Other user
agents might use it in different ways - a search engine robot, for
instance, may use the title to index the document at the tail of the
hyperlink. Also, the rendering of the text above may be completely
different. A speech-based browser, which you might be using if you're
visually impaired, will read the element out loud, pausing before and
after to indicate a paragraph, pausing or changing voice inflections at
the punctuation marks, and indicating the anchor element by making a
special sound. You might also be using a Braille reader to render the
element in Braille, in which case the appropriate Braille symbols will
be output on a special device. Or you might be viewing this page through
a PDA that has a small monochrome screen and cannot change colors, and
chooses to indicate paragraphs as blocks with no margins and indents the
first line of each paragraph, book-style.
That's the wonderful thing about HTML. A single HTML document will have the same meaning and the same functionality to people or machines using all of these methods to read it. So although at times I will tell you to look at what a fragment of HTML or a whole document looks like, remember that this is never the right way to make sure your document is correct. You must always make sure that the markup in the document agrees with the semantics of the document. You can optimize for specific media, so for instance this page looks nice if viewed on a multi-color graphical display. But you must always remember that that is always in addition to the semantic markup, which is the basis of your document.
All right, enough ranting: let's get back to business.
The two other attributes to the
A element that I'm going
to introduce in this section are
These indicate the type of the hyperlink, as discussed in the previous
REL indicates a forward relationship, while
REV indicates a reverse relationship. Here's an example,
from the book's introduction, which also illustrates the use of the
mailto URL scheme and the use of absolute URLs.
<H1>Transfirbulation Technology</H1> <H2>Abstract</H2> <P>This book, by <A REL="Author" HREF="mailto:email@example.com" TITLE="Dr. Arnold D. Propellerhead's E-mail address"> Dr. Arnold D. Propellerhead</A> of <A HREF="http://www.acme.com/" TITLE="Acme Computer Corp. - Who We Are">Acme Computer Corporation</A>, details the current state of Object Transfirbulation Technology, including the newly standardized <A HREF="glossary.html#OTP" REL="Definition" TITLE="Transfirbulation Technology - Glossary: O.T.P."> Object Transfirbulation Protocol</A>.</P>
This book, by Dr. Arnold D. Propellerhead of Acme Computer Corporation, details the current state of Object Transfirbulation Technology, including the newly standardized Object Transfirbulation Protocol.
This little snippet of HTML has three hyperlinks: one to Dr.
Propellerhead's e-mail address, which is identified as having a
relationship of "Author" because it points to the author of this
document. Another to Acme's Web site, which is just a plain reference,
and one more to the fragment
OTP in the document described
by the relative URI
glossary.html. This has a relation of
"Definiton" because it is the definition of the phrase "Object
It is not always necessary to be so verbose about link titles and
relations. And since there's usually a lot of repetition involved, this
process can usually be automated. For instance, in a project as large as
a technical manual on Transfirbulation you can write a script that goes
through your HTML files and adds
TITLE attributes by
checking against the tail's titles, or a script that goes through all
your files and links instances of glossary terms to the glossary in
Anchors as Hyperlink Tails
The second function of the
A element is to act as a
hyperlink tail by defining a document fragment. In this case, only one
attribute is required,
NAME, which is the name of the
fragment identifier. Note that fragment identifiers have severe
restrictions as to their syntax: They must begin with a letter, and may
contain only letters, digits, and the hyphen (
_), colon (
:), and period
.), characters. For example, the entry in the glossary for
OTP may be as follows:
<P><A NAME="OTP">Object Transfirbulation Protocol</A>: A method standardized by the Federation for Abstract Transfirbulation (FAT) to facilitate transfirbulation of distributed data objects in an consistent, cross-platform way.</P>
Object Transfirbulation Protocol: A method standardized by the Federation for Abstract Transfirbulation (FAT) to facilitate transfirbulation of distributed data objects in an consistent, cross-platform way.
A element is the fragment of the document that
the fragment identifier
#OTP corresponds to. Note that the
hash mark is not included in the value of the
attribute. Most user agents will not give such anchors any special
renderings, and this is an example of an element that has no impact on
rendering but is very important in terms of function.
A element is used to insert hyperlinks into the body
of a document. But what if we want to define links whose head is the
whole document? Read on and find out...