The Web Design Group

Web Authoring FAQ: Hyperlinks


This list of Frequently Asked Questions is maintained by the WDG and was last updated on November 29, 1999. It may be found at the following URLs:

If you would like to contribute to this FAQ, please send mail to <darin@htmlhelp.com>. All contributors will be listed at the bottom of the FAQ.

4. Hyperlinks

  1. Should I end my URLs with a slash?
  2. How do I link to a location in the middle of an HTML document?
  3. How do I link without using the full URL?
  4. How do I create a link that opens a new window?
  5. How do I create a link that opens a new window of a specific size?
  6. How do I get a button which takes me to a new page?
  7. How do I get a back button on my page?
  8. How do I create a link that sends me email?
  9. How do I specify a subject for a mailto: link?
  10. How do I link an image to something?
  11. How do I eliminate the blue border around linked images?
  12. How do I link different parts of an image to different things?
  13. How do I turn off underlining on my links?
  14. How can I have two sets of links with different colors?
  15. How can I make links change when the cursor is over them?
  16. Why are my hyperlinks coming out all wrong or not loading?
  17. Why does my link work in Internet Explorer but not in Netscape?

4.1. Should I end my URLs with a slash?

The trailing slash is used to distinguish between directory and file URLs. A file URL is an URL for a file, and a directory URL refers to a directory. For example, the URL for the WDG's HTML reference is http://www.htmlhelp.com/reference/ and the URL for the overview of HTML 3.2 elements is http://www.htmlhelp.com/reference/wilbur/overview.html

If you request a directory URL without the trailing slash, the browser will actually ask for a FILE with that name. This file doesn't exist on the server, so the server sends back a message saying that the browser should ask for the directory. It uses a redirection message for this. The browser then sends another request, this time for the directory, and finally gets what was asked for in the first place. This wastes time and network resources.

When you write a document, all directory URLs should end with a slash. Since you already know you are linking to a directory, why force the user to make that second request, when it could have been done using only one?

And by the way, it is NOT the browser which appends the slash. The browser cannot know if what you are asking for is a file or directory, not even when the final part of the URL does not have an extension. http://www.somewhere.com/src/something/README is a perfectly valid URL, has no extension in the final part, yet refers to a file and not a directory.

The only apparent exception is when you refer to an URL with just a hostname. Since it is obvious that when you use http://www.htmlhelp.com you actually want the main index "/" from our server, you do not have to include the / in this case. It is regarded as good style to do so, however.

For a full discussion of the proper form of URLs, see RFC 1738 at <URL:http://www.cis.ohio-state.edu/htbin/rfc/rfc1738.html> and, for relative URLs, RFC 1808 at <URL:http://www.cis.ohio-state.edu/htbin/rfc/rfc1808.html>.

[Table of Contents]

4.2. How do I link to a location in the middle of an HTML document?

First, identify the destination of the link with a named anchor (an anchor that uses the NAME attribute). For example:

<H2><A NAME="section2">Section 2: Beyond Introductions</A></H2>

Second, link to the named anchor. The URL of the named anchor is the URL of the document, with "#" and the name of the anchor appended. For example, elsewhere in the same document you could use:

<A HREF="#section2">go to Section 2</A>

Similarly, in another document you could use:

<A HREF="thesis.html#section2">go to Section 2 of my thesis</A>

[Table of Contents]

4.3. How do I link without using the full URL?

Links that do not specify the full URL are called relative links. Before the browser can request the linked document, it must generate the full URL using the relative URL and the URL of the current document.

First, the browser strips everything after the last slash ("/") in the URL of the current document. Second, it moves up one level in the URL hierarchy for each "../" at the beginning of the relative URL, removing the leading "../" strings from the relative URL as it does so. Third, it appends the relative URL to get the final URL.

Some examples may help make this clear. Assuming that the current document is <URL:http://www.htmlhelp.com/faq/html/links.html>:

"all.html"
refers to <URL:http://www.htmlhelp.com/faq/html/all.html>
"../"
refers to <URL:http://www.htmlhelp.com/faq/>
"../cgifaq.html"
refers to <URL:http://www.htmlhelp.com/faq/cgifaq.html>
"../../reference/"
refers to <URL:http://www.htmlhelp.com/reference/>

For more details on using and resolving relative URLs, see "Using Relative URLs" <URL:http://www.stack.nl/%7Egalactus/html/urls.html.

[Table of Contents]

4.4. How do I create a link that opens a new window?

<A TARGET="_blank" HREF=...> opens a new, unnamed window.

<A TARGET="foobar" HREF=...> opens a new window named "foobar", provided that a window or frame by that name does not already exist.

Note that links that open new windows can be annoying to your readers if there is not a good reason (from the reader's perspective) for them.

[Table of Contents]

4.5. How do I create a link that opens a new window of a specific size?

With HTML, there is no way to control the size (or window decoration, or other features) of a new window. However, in JavaScript you can specify such details when using the window.open() function.

Start with a normal HTML link (possibly one that opens in a new window as described in the answer to the previous question). Then use the ONCLICK attribute to open a window with the desired appearance for those readers with JavaScript supported and enabled. The following example specifies a window named "popup" that is 300 pixels by 150 pixels.

<A HREF="foo.html" TARGET="popup" ONCLICK="window.open('foo.html', 'popup', 'width=300,height=150'); return false">View Foo</A>

Used in this manner, JavaScript can specify a new window with the desired appearance, without blocking access when JavaScript is unsupported/disabled.

[Table of Contents]

4.6. How do I get a button which takes me to a new page?

This is best done with a small form:

<FORM ACTION="http://url.you.want.to.go.to/" METHOD=GET>
<INPUT TYPE=submit VALUE="Text on button" NAME=foo>
</FORM>

If you want to line up buttons next to each other, you will have to put them in a one-row table, with each button in a separate cell.

Note that search engines might not find the target document unless there is a normal link somewhere else on the page.

A go-to-other-page button can also be coded in JavaScript, but the above is standard HTML and works for more readers.

[Table of Contents]

4.7. How do I get a back button on my page?

In HTML, this is impossible. Going "back" means that you go to the previous page in your history. You might be able to create a link to the URL specified in the "HTTP_REFERER" environment variable in your document, but that only creates a link to a new location in your history. Even worse, the information in that variable can be plain wrong. Some browsers incorrectly send the variable when you use a bookmark or type in an URL manually, and some don't send that variable at all. This would result in an empty link.

A JavaScript could use "history.back()" to do this, but this only works in Netscape 2 or higher and MSIE 3 or higher, and even then only if the user has not disabled JavaScript.

For a more detailed explanation, please see Abigail's "Simulating the back button" at <URL:http://www.foad.org/%7Eabigail/HTML/Misc/back_button.html>.

[Table of Contents]

4.8. How do I create a link that sends me email?

Use a mailto: link, for example

Send me email at
<A HREF="mailto:me@mydomain.com">me@mydomain.com</A>.

[Table of Contents]

4.9. How do I specify a subject for a mailto: link?

You can't, not in any reliable way. The methods that are frequently posted don't do the job on all browsers (or even all popular browsers), and many of them have an important drawback: if your visitors are using an older browser such as Netscape 1.22, their mail will be lost.

If you really need a subject, you can do it by providing a form on your page, which submits data to a CGI program that emails the form data to you with your desired subject line. However, the form must have an input field for the visitor's email address, and you must hope that the visitor enters it correctly.

Here are some other ways to transmit subject-type information:

[Table of Contents]

4.10. How do I link an image to something?

Just use the image as the link content, like this:

<A HREF=...><IMG ...></A>

[Table of Contents]

4.11. How do I eliminate the blue border around linked images?

Use the BORDER="0" attribute in the <IMG> element. For example:

<A HREF="doc.html"><IMG SRC="doc.gif" ALT="View document." BORDER="0"></A>

[Table of Contents]

4.12. How do I link different parts of an image to different things?

Use an image map. Client-side image maps don't require server-side processing, so response time is faster. Server-side image maps hide the link definitions from the browser, and can act as a backup for client-side image maps for the few very old browsers that support server-side image maps but not client-side image maps.

The configuration details of server-side image maps vary from server to server. Refer to your server documentation for details.

Client-side image maps are implemented with HTML. The MAP element defines an individual image map and the AREA element defines specific linked areas within that image map. The USEMAP attribute of the IMG element associates an image map with a specific image. A detailed explanation (with examples) is available at <http://www.htmlhelp.com/reference/html40/special/map.html>. A tutorial is available at <http://ppewww.ph.gla.ac.uk/~flavell/www/imgmaptut.html>.

[Table of Contents]

4.13. How do I turn off underlining on my links?

If you want to turn off link underlining when you're looking at pages in your browser, check your browser's configuration options. In Netscape 3, for example, see Options | General Preferences | Appearance; in Netscape 4 it's Edit | Preferences | Appearance | Colors; in Internet Explorer see View | Options | General.

If you want to prevent links on your page being underlined when your visitors see them, there's no way in HTML to accomplish this. You can suggest this presentation using style sheets by defining

a:link, a:visited, a:active {text-decoration: none}

[Table of Contents]

4.14. How can I have two sets of links with different colors?

You can suggest this presentation using style sheets. In your style sheet, define something like this:


a:link        {color: blue;   background: white}
a:visited     {color: purple; background: white}
a:active      {color: red;    background: white}
a.foo:link    {color: yellow; background: black}
a.foo:visited {color: white;  background: black}
a.foo:active  {color: red;    background: black}

Then use CLASS="foo" to identify the links of the second color in your HTML, like this:

<A CLASS="foo" HREF=...>...</A>

[Table of Contents]

4.15. How can I make links change when the cursor is over them?

In your style sheet, use the hover pseudo-class to specify a different appearance for links when the cursor is over them. Specify the hover pseudo-class after the link and visited pseudo-classes. For example:

A:link { color: blue ; background: white }
A:visited { color: purple ; background: white }
A:hover { color: red ; background: white }

[Table of Contents]

4.16. Why are my hyperlinks coming out all wrong or not loading?

Most likely you forgot to close a quote at the end of the HREF attribute. Alternatively, perhaps you used a ">" character somewhere else inside a tag. Although this is legal, several older browsers will think the tag ends there, so the rest is displayed as normal text.

This especially happens if you use comment tags to "comment out" text with HTML tags. (See the answer to "How can I include comments in HTML?") Although the correct syntax is <!-- --> (without "--" occurring anywhere inside the comment), some browsers will think the comment ends at the first ">" they see.

Validators will show you any syntax errors in your markup, but checkers such as Weblint and HTMLchek can show you where you are liable to provoke known browser bugs. See also the answer to "How can I check for errors?"

[Table of Contents]

4.17. Why does my link work in Internet Explorer but not in Netscape?

Is there a space, #, ?, or other special character in the path or filename? Spaces are not legal in URLs. If you encode the space by replacing it with %20, your link will work.

You can encode any character in a URL as % plus the two-digit hex value of the character. (Hex digits A-F can be in upper or lower case.) According to the spec, only alphanumerics and the special characters $-_.,+!*'() need not be encoded.

You should encode all other characters when they occur in a URL, except when they're used for their reserved purposes. For example, if you wanted to pass the value "Jack&Jill" to a CGI script, you would need to encode the "&" character as "%26", which might give you a URL like the following: http://www.foo.com/foo.cgi?rhyme=Jack%26Jill&audience=child. Note that the "?" and other "&" character in this URL are not encoded since they're used for their reserved purposes.

See section 2.2 of RFC 1738 at <URL:http://www.w3.org/Addressing/rfc1738.txt> for the full story.

[Table of Contents]


For additions or omissions to this FAQ, please contact <darin@htmlhelp.com>.

All information contained herein was originally compiled by members of the Web Design Group, principally Arnoud "Galactus" Engelfriet, John Pozadzides, and Darin McGrew.

Additional input has been provided by Boris Ammerlaan, Lori Atwater, Alex Bell, Stan Brown, Roger Carbol, Alex Chapman, Jan Roland Eriksson, Jon Erlandson, Mark Evans, Alan Flavell, Lucie Gelinas, Bjoern Hoehrmann, Tina Marie Holmboe, Peter Jones, Nick Kew, Jukka Korpela, Simon Lee, Nick Lilavois, Neal McBurnett, Glen McDonald, Dan McGarry, Ken O'Brien, Timothy Prodin, Steve Pugh, Liam Quinn, Colin Reynolds, Kai Schätzl, Doug Sheppard, Sue Sims, Toby Speight, Warren Steel, Ian Storms, Peter Thomson, Daniel Tobias, and Diane Wilson.

Thanks everyone!


Home, Reference, FAQs, Tools, Design, Feature Article, BBS, Links

Copyright © 1996-1999. Web Design Group All rights reserved.