Web Site
Developers

Internal Web Page Bookmarks: Anchor <a> Tag

WYEMNBWYG^*

^* What You Expect May Not Be What You Get It has been my experience with the anchor tag that is supposed to control the internal bookmarks on a web page. Internal web page bookmarks should allow the user to jump ahead and return at their discretion. Nonetheless, I have found many of the published tutorials, on-line suggestions failed to work as described whether under local testing or on a server. Indeed some of the results were bizarre.

Wisdom on the Internet: Bookmarks

Mostly misdirection with more hits on the standard meaning where you store url's of pages you wish to return to some day. Even when you filter the obvious misidenifications, those found may be of limited utility due to scant coverage on the topic of interest. Moreover, the syntax (and/or examples) may be out-of-date. Here are some links I used to guide my coding of bookmarks within a single page: c.f.bottom of the page, mostly: "Links to sections ..." area again near the bottom and a page that I find hard to read, but contained some gems. It is the latter that shows the usual name syntax has been depreciated. Regarding the last reference, look at these pertinent lines:

   Although these pages list A HREF and A ID/NAME separately
   in order to emphasize the distinction in functionality
   between the two behaviors, the HREF and ID/NAME attributes
   can co-exist in the same tag to serve as both a jump point 
   and a destination for a jump point.

nice to know, however, I separated the two for clarity. You may take it as a given, the clarity I seek is for both you (the reader/coder) and I (writer/coder), it smacks too much of the predisposition of some perl coders to compress code to the point few if any others can comprehend its meaning. I used this as a guide, however, I remain uneasy why there still seemed to be no necessity to connect the html code to the css file. For a quick fix, I accepted using both the id and the name syntax within the same tag and as said the author stated it worked.

Bookmark Code Samples

Here is the way most say you code an anchor to a target area:

  Text begins here <a name="come-back-to-me">land here</a>.
  Now after a bit more filler, you offer the reader a new takeoff:
  <a href="#land-there">Go There</a> now!
  ...
  Read special text:<a name="land-there">you are there</a>.
  ...
  Once done: <a href="#come-back-to-me">Go Back</a>.

The code resembling a url, prefaced by the '#' resembles a usual url being underlined, highlighted and active text area. Clicking upon it returns the browser to the target defined by the anchor name. The target, however, appears no different than the surrounding text. In the code above we have two targets and two internal url's to reach their respective targets. The core problem is it does not work. To my shock, despite running locally the return page exhibited by the movement link showed our home page on the internet!

It would have been nice had it worked so simply. Nonetheless, the changes are fairly minor, i.e. entering the full path necessary and properly. That is, this applies only to the return link using the "#" preface and the test on a local file will add the full path to the page and end as if it were a directory. So two points: only the internal url and ending the file as a directory when you are running off your local drive. Here is a sample using part of the sample above:

  Text begins here <a name="come-back-to-me">land here</a>.

See? Target unaltered. Now check the return ticket at the bottom:

  Once done: <a href="file:///project-name/webpage-name/#come-back-to-me">Go Back</a>.

hit it and you are back. That is fairly straight forward once you are used to the necessity of adding a path, however, moving the code to the server again resulted in an error. This time the key element was not having a slash between the page and the prefaced "#" attribute. This worked:

  <a href="http://project.com/path/page.html#come-back-to-me">Go Back</a>

will find the proper web page and the correct location on the same page.

Bookmark Code Sample - Different Page

To date I have not felt the need to utilize internal bookmarks that jump to a separate page. Nonetheless, I have a memory that the suggestion that the path be inserted may have been the key to making the single page internal bookmarks functional. Therefore, it seems obvious the proper code has this form (for the target and link, respectively):

  <!-- Return Target on web-page-1 -->
  <a id="return-target" name="return-target">Return</a>
   ...
  <!-- Outgoing Link to web-page-2 -->
  <a href="http://project.com/web-page-2#outgoing-target">
  Go there;/a>

The other page will be the complementary code that accounts for the differing page locations:

  <!-- Outgoing Target on web-page-2 -->
  <a id="outgoing-target" name="outgoing-target">Return</a>
   ...
  <!-- Return Link to web-page-1 -->
  <a href="http://project.com/web-page-1#return-target">
  Go back;/a>

from my experience, very little differs from the single page internal bookmarks. I am certain, if I made any errors I will be hearing from you. Therefore, I will thank you all in advance and direct you to my contact information below.

Corrections, suggested extension or comments write: How-To-Guy. If the mailto does not work, use this: hcohen[-At-]bst-softwaredevs.com.

     © Herschel Cohen, All Rights Reserved

Return B/ST Home or Tags Page

References