The Web Design Group

Web Authoring FAQ: Hyperlinks


English - Nederlands - Français
Table of Contents - Entire FAQ (HTML) - Entire FAQ (Text)
Previous Section - Next Section

This document answers questions asked frequently by web authors. While its focus is on HTML-related questions, this FAQ also answers some questions related to CSS, HTTP, JavaScript, server configuration, etc.

This document is maintained by Darin McGrew <darin@htmlhelp.com> of the Web Design Group, and is posted regularly to the newsgroup comp.infosystems.www.authoring.html. It was last updated on April 26, 2007.

Section 6: Hyperlinks

  1. How do I create a link?
  2. How do I link to a location in the middle of an HTML document?
  3. How do I create a link that opens a new window?
  4. How do I create a link that opens a new window of a specific size?
  5. How do I let people download a file from my page?
  6. How do I force the browser to download a file? How do I force the browser to show/play a file itself? How do I force a file to be opened by a particular program?
  7. How do I create a button which acts like a link?
  8. How do I create a back button on my page?
  9. How do I create a button that automatically bookmarks my site?
  10. How do I create a button that prints my page?
  11. How can I make a button that closes the window?
  12. How do I create a link that sends me email?
  13. How do I specify a subject for a mailto link?
  14. How do I turn off underlining on my links?
  15. How can I have two sets of links with different colors?
  16. How can I make links change when the cursor is over them?
  17. Why are my hyperlinks coming out all wrong or not loading?
  18. Why does my link work in one browser but not in another?
  19. Why did my link to a ... file download a bunch of characters instead?

The following questions have moved to other sections of the FAQ.

6.1. How do I create a link?

Use an anchor element. The HREF attribute specifies the URL of the document that you want to link to. The following example links the text "Web Authoring FAQ" to <URL:http://www.htmlhelp.com/faq/html/>:

<A HREF="http://www.htmlhelp.com/faq/html/">Web Authoring FAQ</A>

See also

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

First, label the destination of the link. The old way to label the destination of the link was with an anchor using the NAME attribute. For example:
<h2><a name="section2">Section 2: Beyond Introductions</a></h2>

The modern way to label the destination of the link is with an ID attribute. For example:
<h2 id="section2">Section 2: Beyond Introductions</h2>

Second, link to the labeled destination. The URL is the URL of the document, with "#" and the value of the NAME or ID attribute appended. Continuing the above examples, 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>

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

<a target="_blank" href=...> opens a new, unnamed window.

<a target="example" href=...> opens a new window named "example", provided that a window or frame by that name does not already exist.

Note that the TARGET attribute is not part of HTML 4 Strict. In HTML 4 Strict, new windows can be created only with JavaScript. (See next Q&A.) Also, 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.

6.4. 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="example.html" target="popup" onclick="window.open('example.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.

In addition to the parameters height and width (which take a pixel count as a value), the third argument to the window.open() can include the following booloean parameters (which take "yes" or "no" as a value): directories, location, menubar, resizable, scrollbars, status, and toolbar. These boolean parameters control the presence of the corresponding window decorations in the resulting window.

See also

6.5. How do I let people download a file from my page?

Once the file is uploaded to the server, you need only use an anchor reference tag to link to it. An example would be:

<a href="../files/foo.zip">Download Foo Now! (100kb ZIP)</a>

It is possible that the server might need to be configured for some different file types. (See the next Q&A.)

See also

6.6. How do I force the browser to download a file? How do I force the browser to show/play a file itself? How do I force a file to be opened by a particular program?

You can't do any of these things reliably, because the Web doesn't work that way.

When the browser requests a document (hypertext, image, audio, multimedia, etc.), the server tells the browser what type of file it is. The server should be configured to identify a document's media type properly.

The browser then decides what to do with it. Different browsers are able to and are configured to display different types of documents themselves. Browsers are usually configured to handle other file types by using appropriate helper applications or by offering to save the document to the filesystem.

RFC 2183 describes the Content-disposition header, which can be used to suggest how the browser should handle documents. The value "inline" suggests that the document should be displayed automatically, and the value "attachment" suggests that the user should be prompted before the document is displayed (or saved). Note that this mechanism has significant security implications, which are described in the RFC.

Most browsers allow users to download to disk if they want to. If the file must be saved to disk, if there is absolutely no other way to handle it, then the MIME type could be "application/octet-stream". However, this essentially says, "I can't or won't tell you what this is." Furthermore, the MIME type "application/octet-stream" provokes incorrect behavior in MSIE's HTTP implementation. A better alternative would be a custom MIME type like "application/x-some-explanation", which avoids these problems.

See also

6.7. How do I create a button which acts like a link?

This is best done with a small form:

<FORM ACTION="[URL]" METHOD=GET>
<INPUT TYPE=submit VALUE="Text on button">
</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.

6.8. How do I create a back button on my page?

You cannot do this with HTML. Going "back" means going to the previous location in your history. You could create a link to the URL specifed in the HTTP Referer header (available in the HTTP_REFERER environment variable in CGI programs), but that creates a link forward to a new location in your history. Even then, the information in the Referer header can be wrong. Some browsers incorrectly send the Referer header when the user enters a URL manually or uses a bookmark. Some never send the Referer header (which is optional).

You could use JavaScript's history.back() to create a back button (or link). Naturally, this only works when JavaScript is supported and enabled.

Also, it is worth noting that the only navigation tool used more frequently than the "back" function is the hyperlink. Your readers almost certainly know how to use their browsers' "back" function. Users who don't know how to use basic functions of their browsers will only be confused when various pages imitate those functions in different ways.

See also

6.9. How do I create a button that automatically bookmarks my site?

You cannot do this with HTML. However, Internet Explorer 4+ supports the window.external.AddFavorite() method, a proprietary extension to JavaScript that opens an "Add to Favorites" dialog. The following example avoids creating a non-functional button for those with other browsers, or for those with JavaScript disabled:

<script type="text/javascript">
function addf() {
    window.external.AddFavorite('http://www.htmlhelp.com/',
                                'Web Design Group'); }
if (window.external &&
    typeof window.external.AddFavorite != 'undefined'){
        document.write('<input type="button" ' +
            'onclick="addf()" value="Bookmark WDG">'); }
</script>

It is worth noting that readers who know how to use bookmarks almost certainly know how to bookmark your site independently. Likewise, the few readers who don't know how to bookmark your site probably won't know how to use bookmarks that you create for them. Users who don't know how to use basic functions of their browsers will only be confused when various pages imitate those functions in different ways.

6.10. How do I create a button that prints my page?

You cannot do this with HTML. However, some browsers support the JavaScript window.print() method, which opens a "Print" dialog. The following example avoids creating a non-functional button for those with other browsers, or for those with JavaScript disabled:

<script type="text/javascript">
if (window.print) {
    document.write('<input type="button" onclick="window.print()"'+
                   ' value="Print This Page">'); }
</script>

It is worth noting that readers who have printers almost certainly know how to use their browsers' print function. Users who don't know how to use basic functions of their browsers will only be confused when various pages imitate those functions in different ways.

See also

6.11. How can I make a button that closes the window?

You cannot do this with HTML. However, the JavaScript method window.close() will close a window. The following example avoids creating a non-functional button for those with JavaScript disabled:

<script type="text/javascript">
if(self.close) {
    document.write('<input type="button" onclick="self.close()"'+
                   ' value="Close This Window">'); }
</script>

It is worth noting that your readers are probably familiar with their systems' standard mechanisms for closing windows. Users who don't know how to use basic functions of their browsers will only be confused when various pages imitate those functions in different ways.

6.12. 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>.

Note that any email address that you publish on the WWW like this will probably start receiving unsolicited commercial email (UCE, junk email). It's a good idea to protect your real email address (e.g., by filtering incoming email, or by using a separate address only for mailto links).

6.13. How do I specify a subject for a mailto link?

You can't, not in any reliable way. The methods that are frequently posted are not effective on all combinations of browser and email software (not even on all common combinations), and many of them have an important drawback: when they fail, the email 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:

See also

6.14. 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. For example, in Mozilla Firefox see Tools > Options... > Fonts & Colors... for the Underline links option, in Opera see Tools > Preferences... > Web pages for the Underline normal links and Underline visited links options, and in MSIE 6 see Tools > Internet Options > Advanced > Browsing for the Underline links option.

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}

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

You can suggest this presentation in a style sheet. First, specify colors for normal links, like this:

a:link              {color: blue;   background: white}
a:visited           {color: purple; background: white}
a:active            {color: red;    background: white}

Next, identify the links that you want to have different colors. You can use the CLASS attribute in your HTML, like this:

<a class="example1" href="[URL]">[link text]</a>

Then, in your style sheet, use a selector for links with this CLASS attribute, like this:

a.example1:link     {color: yellow; background: black}
a.example1:visited  {color: white;  background: black}
a.example1:active   {color: red;    background: black}

Alternatively, you can identify an element that contains the links that you want to have different colors, like this:

<div class="example2">...
<a href="[URL]">[link text]</a>...
<a href="[URL]">[link text]</a>...
<a href="[URL]">[link text]</a>...
</div>

Then, in your style sheet, use a selector for links in this containing element, like this:

.example2 a:link    {color: yellow; background: black}
.example2 a:visited {color: white;  background: black}
.example2 a:active  {color: red;    background: black}

See also

6.16. 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 }

See also

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

Your markup may include HTML syntax errors that affect links. For example, there may not be quotes around attribute values that require quotes, or there may be a missing closing quote at the end of the HREF attribute value.

Perfectly valid markup may trigger common browser bugs. For example, even though a ">" character is valid inside (quoted) attribute values, several older browsers will think the tag ends there, so the rest of the tag's attributes are displayed as normal text. Likewise, ">" characters inside comments can trigger similar browser bugs.

As another example, older versions of Netscape Navigator are known to have problems with links to named anchors when the anchors are within a table that uses the ALIGN attribute.

It is also possible that your URLs are incorrect. For example, your web authoring software may have used file URLs (e.g., file:C:\path\file.html). If so, then you should replace them with relative URLs (e.g., file.html) or http URLs (e.g., http://example.com/path/file.html).

HTML validators will find syntax errors in your markup. HTML checkers/linters can find some syntax errors and valid markup that is known to trigger some common browser bugs. Link checkers can find links to incorrect URLs.

See also

6.18. Why does my link work in one browser but not in another?

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 specification, only alphanumerics and the special characters -_.!*'() never need to 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. However, when this URL is used as an attribute value in an HTML document, the "&" character must be encoded as "&amp;", like the following: <a href="http://www.foo.com/foo.cgi?rhyme=Jack%26Jill&amp;audience=child">

See also

6.19. Why did my link to a ... file download a bunch of characters instead?

If you are trying to link to a particular type of file and it is not returning your desired response, chances are that the server needs to have the type configured. Talk to your system administrator about getting them to add the content type. Here is a list of common types that may need configuring:

Content Type Description
application/msword Microsoft Word Document
application/octet-stream Unclassified binary data (often used for compressed file or executable)
application/pdf PDF Document
application/vnd.ms-excel Microsoft Excel spreadsheet
application/zip ZIP archive
audio/x-wav WAV audio format
audio/midi MIDI audio format
audio/x-pn-realaudio RealAudio
image/gif GIF image format
image/jpeg JPEG image format
image/png PNG image format
text/css CSS style sheet
text/html HTML document
text/plain Plain text
video/mpeg MPEG video format
video/quicktime QuickTime video format
video/x-msvideo AVI video format

Another method of ensuring that your file is properly sent to the client is to compress it into a standard compression format. Virtually all servers are set to handle the .zip extension and it is widely recognized by users.

Some servers (NCSA, Apache, and others) can be configured to support user-configured content types. Details are server dependent, so consult your server admin or documentation.

Note that Internet Explorer incorrectly ignores server-provided MIME types, so it sometimes "does the right thing" when the server is misconfigured. Other browsers correctly heed the server-provided MIME types, so they will reveal server misconfigurations.

See also

Table of Contents - Entire FAQ (HTML) - Entire FAQ (Text)
Previous Section - Next Section