HTML 4.0 Sourcebook:HTML and Document Design

To access the contents, click the chapter and section titles.

HTML 4.0 Sourcebook
(Publisher: John Wiley & Sons, Inc.)
Author(s): Ian S. Graham
ISBN: 0471257249
Publication Date: 04/01/98

Table of Contents

Anchor Element: The NAME Attribute

Links to particular locations in a document, or between locations in the same document, are made possible through the NAME attribute of the A (anchor) element. The NAME attribute lets you assign a unique name, called a fragment identifier, to a particular place in a document. You can then link to this named location using a special form of URL that contains this special name.

Figure 2.9 shows a document containing several named locations, illustrating one of the common uses of named locations to create a simple index for the contents of the page. The top of the page contains links that access the different sections of the document, while each section contains links that allow you to return to the top of the page and back to the contents listing. This page was originally developed by the author and Sian Meikle of the University of Toronto Library, and is part of a template document collection we distribute to university departments interested in developing their own document collections. The entire template is located at www.utoronto.ca/ian/Template/readme.html.

Figure 2.9 A Typical HTML document, deptinfo.html, that contains named anchor elements. Portions of the document have been omitted to save space. Comments are in italics, while markers indicating the named anchors are in boldface italics.

<HTML> <HEAD>
  <TITLE> Biology Department: General Information  </TITLE> </HEAD>
<BODY>
<A HREF=“depthome.html” NAME=“top”><IMG SRC=“home.gif” ALT=“[home]”></A>
<HR> 
<IMG ALIGN=“right” SRC=“french2.gif” ALT=“[Picture of our Building]”>
<H1>Biology at the University of Toronto</H1>
<ADDRESS>
  University of Toronto          <BR>  150 St George Street, Room 213 <BR>
  Toronto Ontario M5S 1A1 CANADA <BR>  <B>Tel:</B>    (416)–978–7000  <BR>
  <B>Fax:</B>    (416)–978–9000  <BR>  <B>E–mail:</B> 
<a href=“mailto:[email protected]”[email protected]</a>
</ADDRESS>
<HR>
<B>On this page:</B>
[<A HREF=“#general”>General Information</A>] 
[<A HREF=“#facilities”>Research Facilities</A>] 
[<A HREF=“#history”>Department History</A>]   [<— References Named Anchor]
<HR>

<H2><A NAME=“general”>General</A></H2>
<BLOCKQUOTE> 
<P><EM> This example document ... [text deleted] ... 
   There is one advantage, however, to keeping this material together — it 
   allows the user to print the entire document for reading away from the 
   computer.</EM>
</BLOCKQUOTE>

<P> The University of Toronto is the largest university in Canada 
  with 2500 graduate faculty and more than 9000 full and part–time graduate
  students. ...
...  [textl deleted ...] 
<H2><A NAME=“facilities”>Research Facilities</a></H2>

<P> The Department provides many facilities to aid astronomical research,
   and students and staff use national and international observatories
   all over the world ...
...   [text deleted]
[<a HREF=“#top”>... to top of page</A>
<H2><A NAME=“history”>History of the Department</A> </H2> [<—NAMED ANCHOR]

<P> Biology became a major department in 1905.  The first chair of
   the Department, Dr. Roland Fishburn, ...
.......[more text deleted]
[<a HREF=“#top”>... to top of page</A>
<HR>
<a HREF=“depthome.html”><IMG SRC=“icons/home.gif” ALT=“[home]”></A>
</BODY> </HTML>

Figure 2.10 Netscape Navigator 3 rendering of the document deptinfo.html shown in Figure 2.9.

Figure 2.11 Netscape Navigator 3 rendering of the document deptinfo.html shown in Figure 2.9 after accessing the internal link referenced by the text string “Department History,” shown at the top of Figure 2.10. Note how the browser has scrolled the page so that the link target (History of the Department) is visible.

NAME Attribute and Fragment Identifiers

There are four named anchors in Figure 2.9, but for this discussion we will focus on the one for the history section. The relevant hypertext anchor is:

<A NAME=“history”>History of the Department</A>

This anchor associates a fragment identifier, namely “history,” with this location in the document. Looking at Figure 2.10, you will see that this section of text is not rendered in any special way. In general, an anchor that contains only a NAME attribute is not specially displayed. From elsewhere in this document, this location can be referenced using a URL of the form

<A HREF=“#history”>Department History</A>

as illustrated in Figure 2.9. Note how the fragment identifier is indicated by prepending the hash character (#), to distinguish this from a regular URL. If the user clicks on the anchored text Department History, the browser will search for the named fragment identifier and scroll down (or up) the page to that location, as illustrated in Figure 2.11.

NAME and HREF Combined

A hypertext reference can simultaneously take both HREF and NAME attributes. An example is shown in the very first anchor in Figure 2.9, namely:

<A HREF=“depthome.html” NAME=“top”><IMG SRC=“home.gif” ALT=“[home]”></A>

Clicking on this anchor links the user to the document depthome.html (you will note in Figure 2.10, this image is highlighted as a linked hypertext anchor). At the same time, clicking on internal page links of the form

<a HREF=“#top”>... to top of page</A>

returns the user to the top of the page and to this same linked image. Thus, anchors can be both the start and destination of a hypertext link.

Fragment Identifiers and Full URLs

You can also access named locations from outside the document. This is done by appending the fragment identifier to the document’s locator string. For example, if the full URL for the document deptinfo.html were http://www.utoronto.ca/ian/Template/deptinfo.html

Figure 2.12 Schematic illustrating the use of NAME and HREF attributes. The dashed lines indicate hypertext links and their destinations. Links (A) and (E) are absolute URLs, while (B) and (D) are partial URLs between two documents in the same directory. (C) is an internal link within the document deptinfo.html. The base URL for both documents is: http://www.utoronto.ca/ian/Template/

then the URL that explicitly references the history section is simply (with the fragment identifier in boldface):

<http://www.utoronto.ca/ian/Template/deptinfo.html#history>

Figure 2.12 schematically illustrates some of the more common uses of named anchors. Details about writing valid fragment identifiers and URLs are found in Chapter 8.

Lessons from Example 6

1. The NAME attribute assigns a name, called a fragment identifier, to an A (anchor) element. This allows an anchor to be the destination of a hypertext link, and allows for hypertext HREF anchors that target specific locations within a given document.

2. You can reference a NAMEd location from within the same document, using an anchor element of the form <A HREF=“#frag_id”>anchor text</A>, where frag_id is the fragment identifier you wish to reference. The hash character is mandatory, and indicates the start of a fragment identifier.

3. You can reference a NAMEd location from any other document by appending the fragment identifier to the URL of the document, for example:

<A HREF=“http://bla.bla.edu/Projects/doc2.html#frag_id”>anchor text</A>

4. You can combine HREF and NAME anchors in the same anchor element:

<A HREF=“URL_string” NAME=“frag_id” >anchor text</A>

This means that the anchor is both the start and the possible destination of hypertext links.

Exercises for Example 6

Create a long HTML document (e.g., convert a word-processor document to HTML) and build some internal links between a contents list and the various sections. Note how much easier it is to read the document when these internal navigational tools are available.

Table of Contents

Products | Contact Us | About Us | Privacy | Ad Info | Home

Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc.
All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.