The Problem
You want to provide your reader with an easy way to move to different locations and maybe back to where they were on a page your created. Sounds reasonable. There sould be an easy way to do this and there is!
The Solution
In HTML language, it’s called bookmarking. Not to be confused with your browsers bookmarking menu, HTML bookmarking is a simple hyperlink that doesn’t leave the page. Hyperlinking is one of the cornerstones of HTML. Without it, the web would be much less useful. You’re familiar with how hyperlinks work. You tag some text on your page with an anchor code that contains a URL. When you click the text, your browser is directed to that address (URL). The tag looks like this:
<a href="http://www.google.com">Go to Google</a>
Only the words “Go to Google” display on the page, but if you click them, you are transported to Google’s home page.
You’re saying, “Yeah, yeah, I know this. How do I make this work for jumping around on my page?” Here’s what you’ll need.
The Tools
You need the HREF anchor tag (above), the ID property to name your destination, and the knowledge that hyperlinks are relative. That means if you leave off the
http://www.domain.com
HTML assumes the link is relative to where you already are, the page you’re on.
First you’ll need to name the spot you want the hyperlink to go to. This could be a footnote, image, or any spot you want to land on. This is done with the ID property;
<a id="destination">Land here</a>
Now, back where you want to link to the destination, you simply apply the regular hyperlink tag with one small change. You use an octothrope (#). This tells the brower that the link it’s looking for is right here on the page.
<a href="#destination">Click me to go to the destination</a>
Note, the name in the HREF code must match the ID property you made up. That’s it. It really is that simple. For simple jumps, the browser’s “Back” navigation button will take the reader back to the HREF jump off, but you could include a link back to the beginning or out to any other place. You’ll just keep combining ID properties and HREFs to your heart’s content.
Putting it Together
<a id="startHere" href="#destination">Click me to go to the destination</a>
<a id="destination" href=#startHere">Land here & click again to go back</a>
That creates a back-and-forth link between the two texts. You can see how handy that is for footnotes. You can now link to a footnote and provide a “Go Back” link, too. Try combining what you learned about Footnotes and you can create something like:
| Code | Results |
|---|---|
An important point cited here<a id="BkMkToFoot1" href="#footNote1"><sup>[1]</sup></a> |
An important point cited here[1] |
<a id="footNote1"><sup>[1]</sup></a> I got this information from a guy on the corner. (<a href="#BkMkToFoot1">Go Back</a>) |
[1]I got this information from a guy on the corner. (Go Back) |
Caution!
A few rules apply. One, you only need bookmarks if you page is very long. If your reader can see the entire page on their screen, bookmarking doesn’t really do anything useful. Notice in the Results column of table above, the links really work, but they’re too close together to look like you go anywhere. If you click them, the URL in your address bar changes though. Two, bookmarking only works for continuous pages. If you are putting your HTML into a hosting site that is going to slice-and-dice your text and create their own page breaks, don’t even bother with bookmarking.
The Odd, Little Happy 