Help People Navigate Your Site with Internal Links

One of the most common uses for hyperlinks on a Web site is for site navigation. Site navigation is just a fancy term for helping people find their way around. It’s good to keep that in mind as you develop your site. As you develop links to other pages on your Web site, remember that you want to make things as easy for your visitors as possible. The larger and more complex your site becomes, the more links you will find yourself using. If your links are complicated, confusing, or non-functional, visitors will become frustrated and probably will leave.

Link to Pages on Your Own Site

Linking to another page on your own site is even simpler than linking to a different Web site; all you need to include is the name of the file you’re linking to and the directory where it is located. If the file happens to be in the same directory, you need only the filename.

Link to Another Page in the Same Directory

To link to another page in the same directory, simply include the filename in the href attribute of the opening anchor tag. For example, to add a link to your index.htm page that will open up headings.htm, type

<a href="headings.htm">Headings Page</a>.

This creates a link that looks like this:

This kind of link will work as long as the file is stored in the same directory. However, if you have a large site, you might find it easier to organize your files in different directories, much as you do on your computer. If you do this, you will have to provide the path to your file. You can do this by using either absolute or relative URLs.

Link to Another Page in a Different Directory with Absolute and Relative URLs

You have two options when linking to a file in another directory: absolute or relative URLs.

Use Absolute URLs for Simplicity

The least complicated option is to use an absolute URL. Although that term might sound intimidating, it simply refers to the exact path to the file’s location, including all directories and subdirectories you have to go through to get there. It is called absolute because it specifies a precise address. For example, suppose you have a site devoted to facts about famous people. One of your subdirectories might be named Biographies. In that directory, you might have several other directories; for example, Actors, Musicians, or Presidents. If you want to link to a file named washington.htm and that file is located in the Presidents directory, you would write the URL in your link this way:

<a href="/biographies/presidents/washington.htm">Washington</a>

This tells the browser to go to the Biographies directory, then to go to the Presidents directory, and finally to load the washington.htm file.

Tip

Remember that directories should be separated by a forward slash, and the filename comes last.

If you want to create a link on the washington.htm page that will take a visitor back to the home page, you can use an absolute pathname that goes in the opposite direction:

<a href="presidents/biographies/index.htm">Home</a>

Absolute URLs work fine, provided you never move your pages to different locations. If you do, you’ll have to go back into each page and rewrite the links to reflect the new paths. If you have a small site, that might not be a problem. However, if you have a large site with lots of files, you can plan on spending quite a few hours just rewriting links. To avoid this problem, use relative URLs.

Note

How many directories you decide to use on your site is entirely up to you. If you plan on a small and relatively uncomplicated site, or you will be your own Webmaster, you might choose to keep your files all in a single directory, thus eliminating the need for complicated pathnames in your URLs. However, if you plan on a large, difficult-to- maintain site or if more than one person is accessing the files, you probably will want to organize similar files in directories with descriptive titles; for example, Images, Personnel, Statistics, Reports, and so forth. This will make working on your site much easier.

Use Relative URLs for Flexibility

If you want your site to have maximum flexibility and you definitely don’t want to waste your time rewriting links, relative URLs are your solution. Whereas an absolute URL contains the exact address of the file you want the browser to load, a relative URL uses a kind of shorthand to tell the browser to go backward one or more directories. If you want to write the link from washington.htm-to-index.htm using a relative URL, it will look like this:

<a href="../../index.htm">Home</a>

The two dots followed by a slash are the code that instructs the browser to move backward (or up) one directory level. Because you must go up two levels to get to the main (or root) directory and index.htm, you must use the code twice. What makes relative URLs advantageous is that the link will work even if you move the file to another directory.

What if you want to link to a file in a parallel directory; that is, go sideways rather than backward? On our famous persons’ Web site, to link to Mozart’s biography, you’d send the browser to the Musicians directory. You would write a link to tell the browser to go up one directory (to Biographies), to go forward one directory (to Musicians), and to load the file mozart.htm. How would it look?

<a href="../musicians/mozart.htm">Mozart Biography</a>

Confusing? It can be if you let your Web site structure get complicated. A good rule is to keep the structure of your Web site as simple as you can and still accomplish what you need to accomplish. In the meantime, remember that two dots followed by a slash (../) take you backward or up one directory. To go forward, give the directory name followed by a slash, directory/.

Tip

If you’re struggling with the whole idea of relative URLs and how to use them, try creating several practice directories on your computer. Name your root directory home and create a subdirectory named sub-a. Make another directory inside sub-a and name it sub-b. Just for fun, create another subdirectory of home and call it sub-c. Then create an HTML page in home, naming it index.htm. Put a page in each of the other directories and practice linking them together until you are confident using relative URLs.

Link to Precise Spots on a Page

Another practical use of links is to help visitors navigate a single, long page. Have you ever visited a site where most of the content was contained on a single page? You could scroll down through the entire page, but you might be interested in only one particular topic covered there. If the page’s author included links to location markers with ids or named anchors, you’d find it much easier to get around.

Create a Place Marker with the id Attribute

The most versatile way to create a place marker is with the id attribute. With this attribute, you can assign a specific name to virtually any element on your page. For example, suppose you have divided your page into four major sections, each beginning with an <h1> element. You can identify each individual heading by assigning it its own id, as in the following markup:

<h1 >First Heading</h1> <h1 >Second Heading</h1> <h1 >Third Heading</h1> <h1 >Fourth Heading</h1>

Tip

If you try this out, be sure to make your page long enough for the links to actually take you somewhere. Your content needs to exceed the length of your browser window.

To create a link to one of your newly created ids, you use the anchor <a> element and href attribute but apply a slightly different URL. In this case, you use the crosshatch symbol (pound sign) # along with the id you wish to link to, as in the following:

<a href="#heading2">Go to Second Heading</a> 

When visitors click this link, they will be taken to the second heading on your page without having to scroll through the rest of the content. You can use the id attribute with almost any element, but there are some important rules to keep in mind when applying it:

• ID names must be unique. If you use id to create your place markers, you must choose a unique name for each one you make.

• IDs can be anything you choose, but they must begin with either a letter or an underline.

• IDs may not begin with a number.

• An ID may be used only one time (as an anchor) in a single document. In other words, you can’t have several different elements all using the same ID.

• ID names must go inside an element’s opening tag.

Create an Anchor with the name Attribute (Deprecated)

Another way to create a place marker and link is by using the name attribute along with the anchor <a> element. Because it works with the anchor element, this is sometimes called a named anchor. To use a named anchor to place a link at the bottom of a page that will take visitors back to the top without using the scroll bar:

1. Place an anchor at the top of the page by typing <a name="top"> </a>. Notice that even though there is no content between the two anchor tags, both are still required.

2. At the bottom of the page make a link to your anchor by typing the following:

   <a href="#top">Top of Page</a>

Be sure to include the pound sign (#) at the front of the name when you use it as a URL in the link.

3. Your markup might look like this:

   <html> <head><title>Named Anchors</title></head> <body> <a name="top"> </a> <h1>This is the text of your page</h1> <a href="#top">Top of Page</a>. </body> </html>

It is not necessary to put your named anchor around an actual line of text or image. The browser will go to the spot where the anchor is located, whether or not it is attached to something visible on the page. However, the longer and more complicated your page is, the more desirable it is to have your anchor actually tied to something you can see. Plus, some browsers will ignore the anchor element if it doesn’t contain some content.

The W3C has deprecated the name attribute in favor of id. However, because some older browsers will not recognize the id attribute when used as a place marker for links, it is still helpful to be familiar with the procedure for using named anchors.

Whether you use id, name, or both, you can see how links to place markers can be useful for enabling people to navigate a long page, for example, a glossary of terms. You could create place markers at each new letter of the alphabet with links at the top of the page. Each term could include links that would take the visitor back to the alphabetical directory or just to the beginning of the particular section in which the term was found.

Use Place Markers to Link to Precise Locations on Different Pages

Suppose you are designing a site for a university and you want to create links that will direct online visitors to a brief paragraph describing a certain course but you want to include all course descriptions in a single document. One way to do it would be to create a place marker for each course and create a link to each course’s description. It might look something like the following code:

• Anchor (on a courses.htm page):

  <p >Biology 103</p>

• Link (perhaps on a degree program page, listing required courses):

  <a href="courses.htm#biology103">Click for a description  of BI-103</a>

Note

You also can link to other pages using the name attribute. Instead of putting the name in an element, as with id, write it as <a name="biology103"> </a>.

The preceding link will take visitors to the courses page where they will find a description of the Introduction to Biology course. The advantage of linking this way is that you can reference a single pool of information from any number of different pages. When using an anchor to link to a different page, you should not separate the filename and anchor name or ID with spaces or any other characters.

Use Named Anchors to Link to a Different Web Site

This same approach will work, even if you want to link to an entirely different site. All you need to know is the anchor name or the id name and the site’s URL to link to a specific portion of that site.

Suppose the preceding imaginary university has several satellite campuses, each with its own site. They could access the information on the main site’s servers simply by linking to the site’s anchors, like this:

<a href="http://www.imaginaryu.edu/catalog/courses.htm#biology103">BI-103</a>.

Note that you need to use the complete URL when you are trying to link to another site.

Caution

Although it is possible to link to any site this way, keep in mind that not everyone will be delighted by the idea of you linking to their sites; copyright issues also can come into play. Always get the permission of the Webmaster if you plan to link to another site.

Open Links in a New Window

If you are reluctant to include links to other Web sites because you don’t want your visitors to leave your site too quickly, there are several steps you can take to encourage them to stay. One of the easiest is to set up your links so that they open a new browser window. That way, visitors can visit the site you’re linked to and remain at your site. You can configure a link to open in a new window by using the target attribute.

Use the target Attribute to Open New Browser Windows

When a visitor clicks a link with the target attribute, the content will open in a new browser window. To indicate a new window with the target attribute, add the target attribute with a value of "_blank" between the quotation marks as in the following code sample:

<a href="www.newSite.com" target="_blank"> This link opens a new window.</a>

Note

The value "_blank" must have the underscore character before the letter b.