Hyperlinks
How do I create a link?
How do I link to a location in the middle of an HTML document?
How do I create a link that opens a new window?
How do I create a link that opens a new window of a specific size?
How do I create a button which acts like a link?
How do I create a back button on my page?
How do I create a button that automatically bookmarks my site?
How do I create a button that prints my page?
How do I create a link that sends me email?
How do I specify a subject for a mailto link?
How do I link an image to something?
How do I eliminate the blue border around linked images?
How do I link different parts of an image to different things?
How do I turn off underlining on my links?
How can I have two sets of links with different colors?
How can I make links change when the cursor is over them?
Why are my hyperlinks coming out all wrong or not loading?
Why does my link work in Internet Explorer but not in Netscape?

Section 4: Hyperlinks

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

For more information on links and the anchor element, see: http://www.htmlhelp.com/reference/html40/special/a.html

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>

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

4.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="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.

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.

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

This is best done with a small form:

<FORM ACTION="<var>[URL]</var>" 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.

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

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.

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.

4.7. 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.org/',
                                'Web Design Group'); }
if(document.all) {
    document.write('<input type="button" onclick="addf()"'+
                   ' value="Bookmark WDG Site">'); }
//--></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.

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

4.9. 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).

4.10. 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:

  • Create email aliases that are used only for certain mailto links, so you'll know that anything sent to a given alias is in response to the corresponding Web page(s).
  • The mail handlers for many Web browsers include an "X-Url" header that specifies the URL of the Web page that contained the mailto link. If you configure your mail reader to display this header, you'll see which Web page the sender is responding to much of the time.
  • Use <A HREF="mailto:user@site" TITLE="Your Subject">. Most browsers will ignore the TITLE attribute, but some minor browsers will use it as a subject for the email message. All browsers will send the mail.
  • Use <A HREF="mailto:user@site?subject=Your%20Subject">, which puts "Your Subject" (the space is encoded as "%20") in the "Subject" header field of the email message in most current browsers. The details of this RFC can be found at URL: http://info.internet.isi.edu/in-notes/rfc/files/rfc2368.txt. Note however that you will lose mail from users of older browsers, so you should consider whether the pre-filled subject is worth lost mail.

4.11. How do I link an image to something?

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

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

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

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

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

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

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

4.17. 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. For example, some 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. See also the answer to "How can I check for errors?"

Another possibility is that your web authoring software used file URLs (e.g., file:C:pathfile.html). If so, then you should replace them with relative URLs (e.g., file.html) or http URLs (e.g., http://server/path/file.html).

4.18. 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 -_.!*'() 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">

For the technical details, see URL: http://www.w3.org/Addressing/