Adding Internal Links with the Named Anchor Tag

You can link to a section within a page of either the current page, or another document. An anchor tag must be used first to define the named section you will link too. For example on most of my pages I have a named anchor at the top of my page defined as:

Note there isn't anything between the anchor tags, but there could be, it's up to you. Viewers of your page will not be able to see this anchor tag or bookmark, unless they view your source code.

To link to a named section within your own page, use a relative link, with a # sign in front of the name in the anchor tag. In this example, I might have: Take me to the top. created with html code: <a href="#top">top</a>

The following table summarizes these two variations of the anchor tag.

Opening tag	Closing tag	Purpose
<a name="anchorName" id="anchorName"	</a>	Inserts a named anchor that an <a href> anchor tag can reference. Text between the opening and closing tags in the section that the link will reference. Both anchor names of the two tags must be the same in order to work together. i.e. The anchorName is case sensitive.
<a href="#anchor_name">	</a>	Inserts a link or "hotspot' that references another part of your Web page. Text between the opening and closing tags is highlighted as a link to the location of the <a name> anchor tag within the same document.

I often use this technique with Web pages that extend longer than one screen. I place a named anchor at the top of the document, then place a link to it at the bottom of the Web page.

Extracts of the html code used to produce this current page, (Much of the middle has been deleted, replaced by etc..). The named anchor tags and hyperlink are in larger font size and bold to emphasis the code.

<html>

        <head>

        <title>Internal Links</title>

        </head>

<body> <h1><a name="top" id="top" ></a>Adding Internal Links with the Named Anchor Tag</h1>

With the <a name> tag you can create a "named location" within your Web page.  then, by adding a # sign to the <a href > tag, you can create a link to a different section within the same document.  This is sometimes referred to as a bookmark link.

etc., etc., etc..

I often use this technique  with Web pages that extend longer than one screen.   I place a named anchor at the top of the document, then place a link to it at the bottom of the Web page.  Extracts of  

<a href="#top">top</a>

 </body> </html>

If this page is not loaded within another frame, you can click on this top hyperlink, and notice how the address changes in the browser address bar.

Please NOTE, unlike most html code, bookmark names defined in anchor tags are case sensitive!! If the name is defined in all lower case letters, you must use all lower case letters in linking to that named anchor.

top

This page was last updated on 01/23/2008 by L.M. Hicks