Dropping Anchors into HTML

The 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 P 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 chapter113.html. 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:

file:///home/arnold/book/chapters/chapter2.html

By using a relative URL to refer to Chapter 113, the absolute URL that results is:

file:///home/arnold/book/chapters/chapter113.html

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:

https://www.acme.com/books/OTP/chapters/chapter2.html
https://www.acme.com/books/OTP/chapters/chapter113.html

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 A element, 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:

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. The 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 REL and REV. These indicate the type of the hyperlink, as discussed in the previous section. 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 protected]"
TITLE="Dr. Arnold D. Propellerhead's E-mail address">
Dr. Arnold D. Propellerhead</A>
of <A HREF="https://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 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 Transfirbulation Technology."

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 appropriate ways.

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 (-), underscore (_), 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>

The above 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 NAME 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.

The 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...

Produced by Stephanos Piperoglou

All Rights Reserved. Legal Notices.

URL: https://www.webreference.com/html/tutorial2/7.html
Created: June 11, 1998
Revised: June 11, 1998