The Odd, Little Happy

Finally I dance with confidence to songs

HTML for Dummies: Bookmarks for Internal Page Navigation

Posted by theBarefoot on August 15, 2013


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.

About these ads

5 Responses to “HTML for Dummies: Bookmarks for Internal Page Navigation”

  1. […] HTML for Dummies: Bo… on HTML For Dummies How to Make a… […]

  2. Thanks for this, dude; any HTML techniques are very helpful and useful to me! And as always you break it down in such an easy to understand way (also, thanks for the past few home improvement articles you posted; obviously from personal experience no doubt).

  3. wned2012 said

    Thanks for the reminder, Mr. Barefoot. I seem to have some sort of mental block against the ID anchor and have to look it up every time. Perhaps, due to your eloquence of language and good writery, this time it will “take”.

  4. Today, I went to the beach front with my children. I found a sea shell and
    gave it to my 4 year old daughter and said
    “You can hear the ocean if you put this to your ear.” She put the shell to her ear and screamed.
    There was a hermit crab inside and it pinched her ear.
    She never wants to go back! LoL I know this is completely off topic but I had
    to tell someone!

  5. I think the admin of this site is really working hard in favor
    of his website, for the reason that here every information is quality based information.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

Join 815 other followers

%d bloggers like this: