WWW FAQs: How do I link to another web page or file?

2004-08-25: if you are using a word processor or similar tool to make your page, linking features are built-in. If you are writing your own HTML, the syntax to link to another page is very easy to learn. Links are made using the <a> element; the URL of the page you wish to link to should be placed in the HREF attribute of that element. Don't worry, simple examples follow.

If the page is in the same folder on your website, you can use a simple "relative link" to point to it:

<a href="otherpage.html">
This is a link to otherpage.html, in the same folder
</a>

If the page you are linking to is in a sub-folder within the folder containing the page you are writing, you can still use a relative link:

<a href="subfoldername/otherpage.html">
This is a link to otherpage.html, in a sub-folder called subfoldername
</a>

If the page is not in the same folder, but is on the same website, you can use a path that begins with / to refer to it. If the page is in a folder called foldername inside the main website folder, you can write:

<a href="/foldername/otherpage.html">
This is a link to otherpage.html, in the
folder called foldername
</a>

The leading / means "start at the top and go down."

There is one more type of relative link you may wish to use. If the page you are now writing is in folder A, and the page you wish to link to is in the parent folder that contains folder A, you can write:

<a href="../otherpage.html">
This is a link to otherpage.html, in the
parent folder of this folder
</a>

That is, "../" in a relative URL means "go up one level in the folder hierarchy."

Using relative links is recommended, where possible, because it allows you to move pages from site to site or folder to folder as long as they maintain the same relative relationship to one another.

If the page is on another website, you must use an "absolute" link. You can make these easily by browsing to the page you wish to link to, then selecting the URL in the "address bar" at the top of the browser window and selecting "copy" from your web browser's edit menu. Here is an example:

<a href="http://www.boutell.com/newfaq/">
For more information, follow this link to
Boutell.Com's WWW FAQ.
</a>

Linking to a file that is not a web page is accomplished in the same way; no special technique is necessary. For example:

<a href="myfile.doc">
This is a link to myfile.doc, a Word document
</a>

You can link to images in this way, if you wish. If your real goal is to make the image part of your page, you will want to use the <img> element instead. Note that you should never embed an image on someone else's website into your page without their express permission. In most cases, the src attribute of an <img> element will be a file on your own site:

<p>
This page has an image in it. myimage.jpg is a file
in the same folder as this web page. </p>
<p>
<img src="myimage.jpg">
</p>

Notice that the src attribute of the img element works exactly like the href attribute of the a element.

See also is it legal to link to other websites?

Share |

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!


Follow us on Twitter | Contact Us

Copyright 1994-2014 Boutell.Com, Inc. All Rights Reserved.