Project Management

Add links to your Web page

The HTML anchor tag will help you link to various information on the Web. Find out how to use this tag on your site.

By Fred Dekker and Donald St. John

Now you're ready to learn about the anchor tag, which allows the Web to be the astounding collection of linked information that it is. You'll use the anchor tag and its attributes to connect text on your Web page to other Web pages, email addresses, and online addresses. Without the anchor tag, the Web wouldn't exist.

Let's put this powerful tool to work by making a few links in the line "Let E-Z Accounting tell you more about our services, fees, and background." We'll assume that the information about the company's services, fees, and background will go on separate pages, called respectively services.html, fees.html, and backgrnd.html. Whenever someone clicks one of those words, you want to send him or her to the appropriate page.

Let's add anchor tags to the second paragraph, like this:

<P>
Ready to save yourself some money? Let E-Z Accounting tell you more about our <A HREF="services.html">services</A>, <A HREF="fees.html">fees</A>, and <A HREF="backgrnd.html">background</A>.
</P>

What does this do? The <A> tag tells the browser that you're creating a link. The HREF attribute stands for Hypertext Reference—the technical name for a link. Whatever follows HREF= in quotes is the actual name or URL of the item to which you want to link. In this case, we're assuming that you're linking to pages that reside in the same Web server directory as your original index.html page. If you have multiple directories, you would just name the appropriate directory before the file name. For example, if the services.html page lived in a directory called main, you would link to it like this: <A HREF="main/services.html">.

Now when users look at this page, they'll see the words services, fees, and background as hyperlinks. Hyperlinked text will appear underlined and in a different color than standard text. Remember that you designated the color of your links in the <BODY> tag earlier. (Of course, we'd actually have to create those pages for these links to work. In our example, clicking a link will just bring you back to the same window.)

The anchor tag can do more than just link Web pages to other pages on the same site. It can also link to pages at other Web sites. For instance, we could link to the IRS home page like this:

...in the <A HREF="http://www.irs.ustreas.gov/">tax laws</A>...

The anchor tag doesn't have to send visitors away from your starting page. Using the NAME attribute, you can simply jump users to another location on the same page. This technique can be particularly useful on exceptionally long pages. Suppose that the page explaining E-Z Accounting's fees has sections for both businesses and individuals. You want to create a link that takes individuals directly to their information below the business fee information.

The NAME attribute labels the destination of the link with an anchor name. In this example, we'll name it "individuals." Go to the destination text and surround it with the tags <A NAME="individuals"> and </A>. Then go to the text you want to link from and surround that text with the link tags <A HREF="#individuals"> and </A>. Now when someone clicks the link, he or she will be taken to the target text further down the page.

Fred Dekker is one of the Founders of The H.E.L.P. Community, an online resource for beginning Webmasters.

Donald St. John was the founding Webmaster at PC Games magazine.

Editor's Picks

Free Newsletters, In your Inbox