HTML Cookbook Basic HTML Course

It's Easy!

Alternate version

Anchor Tag, Part 2: Internal Links

Make friends and influence people with Internal Links!!!

We've already talked about how to make a link.

The basic anchor tag looks like:
<a href="URL">Text

How would you like to link to different sections of your page?

Let's say you have a personal page with sectons for your cat, your car and your boat. You want to have a small table of contents so you can link directly to each section.

First, we need to name a target for each section.

Use the name attribute for the anchor tag:
<a name="?">Text

Let's say you use a heading at the top of each section, like so:


<h2>My Cat</h2>
blah blah blah
<h2>My Car</h2>
blah blah blah
<h2>My Sailboat</h2>
blah blah blah

Now let's add the targets with the following code:
Text

Your name can be anything you want (no special characters). I'll use cat, car and boat for my links.

Our targets will look like this (headings also shown):

<h2><a name="cat">My Cat</a></h2>
blah blah blah

<h2><a name="car">My Car</a></h2>
blah blah blah

<h2><a name="boat">My Sailboat</a></h2>
blah blah blah

Now we can make our links, but each URL will have a pound sign (#) and the name we used for each target, like so:
<a href="#name">Text</a>

Our Table of Contents might look like this:

<h1>My Page</h1>
<a href="#cat">My Cat</a>
<a href="#car">My Car</a>
<a href="#boat">My Sailboat</a>

The links work like any other link, but you go to a page section instead of to another page. If you click on My Cat, you go to the My Cat section.

Once you have your targets set up, you can go directly to any section of your page from any other page by adding the target name to your page URL. Huh?

Make a regular link to your page, then add the pound sign and your section name as part of the URL.

Here is a sample page URL:
www.myhost.com/myaccount/mypage.html

Here is the "car section" of the page:
www.myhost.com/myaccount/mypage.html#car

Here is a link to just the car secton:
<a href="www.myhost.com/myaccount/mypage.html#car">
Check out my cool car!
</a>

Real Life Example: let's go to the "g" section of one of my pages, Midnight Midis. It's on the 2nd page.

Here is the URL:
http://www.gnu-bee.com/index2.shtml#g

This is what the link looks like:
<a href="http://www.gnu-bee.com/index2.shtml#g">
Go To songs starting with "G"
</a>

Try it out: Go To songs starting with "G".

If you scroll to the top of that page, you will see the links to each section.

Make an internal link on one if your pages today!

Happy coding!
Gnubee

Links
Tips
Tools
References
Rules
HTML Help Gnubee - Newsgroup
HTML Course Contents (Home)

Valid XHTML 1.0!

Valid CSS!