Web Site
Developers

Simpler Method to Internal Bookmark Footnotes Using the Anchor Tag

Internal Bookmarks - Neglected

I have already written on this topic once and I thought that sufficed. Nonetheless, I soon found myself when pressed shirking my duty, by not making it easy for the reader to view (or not) the footnote contents and easily return to the same section of text. In my case, the reasons were I kept forgetting the syntax, partially due to the lack of constant use. The second reason was my trying to create descriptive, unique names in both directions. And the third, I was being pressed to do too many tasks, hence, I neglected some.

Easy Bookmarks - Targets

I now no longer need to lookup the syntax on each use, however, the simplification comes from employing to very simple naming of both the target and return locations. Moreover, I have used this technique in an ad-hoc manner in two recent articles. Now I am confident that the technique has some generality. This may fit your coding style and help doing hand coding faster. Primarily the technique is a good fit going and returning from repetitive locations such as footnotes. If this interests you, the description is short.

The basic idea is very simple. When one cites a footnote, one is referring to a digit. I think of that as going to that number, i.e. "To-9" so that the target is simply coded:

  <a id="To-9" name="To-9">9.</a> Footnote content ... 

Now you want to go back, easy. However you needed to create a target near to your take off point in the text. I usually do not bring the reader back to the exact location they left, since some critical part of the text may be obscured or forgotten. Recently, I essentially had several footnotes returning to nearby locations I put the return within a group headline. Here is one real example:

  <h4 class="title-small"><a id="back-5" name="back-5">A</a>
   Few Closing Comments</h4>

  <p>As detailed as these instructions are, ... 

Here is the way that code appears, showing a couple of partial lines:

  <h4 class="title-small"><a id="back-5" name="back-5">A</a>
   Few Closing Comments</h4>

  <p>As detailed as these instructions are, ... 

In the code, notice the simple naming "back-5", obviously related to the fifth footnote. That's essentially it "To-..." and "back-..." telling clearly what the intent and from where it arose. In addition, note in the image of the text above the anchor target is not highlighted. Indeed it seems completely absent:

Where the footnotes are too distant from the group heading, I put the target code around the first word of the paragraph. When you begin to test, upon a failure check your link code first and then be certain your target is present. Either error is too probable when you are doing multiple links. Yes, be certain to test the web page on the server.

Easy Bookmarks - Links

We address next, the link to the internal bookmark. Again using the same naming and nearly standard link syntax we create highlighted links with that necessary,built in "#" character. Here is what it looks like using the in-line footnote within the text:

  "... some insightful words 
  <a href="http://www.opensourcetoday.org/path/article.html#To-9">[9.]</a>
  of wisdom ..."

Remember, if you are running a test version from a local file there is a slash between the end of the file name's extension and the # character. Now, just for completeness, here is link at the footnote. This link sends the reader back to the text area from whence they came:

  <a id="To-9" name="To-9">9.</a> Footnote content ... 
  <a href="http://www.opensourcetoday.org/path/article.html#back-9">Return</a>

The link above can be placed at the end of an unfilled, last line of a footnote or beneath the footnote text entirely. In one case, I found it more effective to have a single back link for a group of footnotes within a single paragraph. Thus I place it well below this group to stand out.

Easy Internal Bookmarks - Conclusions

It is obvious the internal anchor / bookmarks, when written using the suggested simplified naming, are effective and swift. However, it would still be desirable to create a model with a more general applicability than just footnotes. Nonetheless, I will use this trick to create quicker, cleaner hand written html code. I would hope it helps some others that are at least trying to hand write web pages for the learning experience.

This article was originally published on the Open Source Today (dot) org site on October 16, 2007. Some alterations may have been made prior and after appearing on this site.

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