Text linking

To create a link to a file or folder, you need to use an <a href > tag.

<a href="">Your text</a>

Add your file name to the first part of the tag and include the words you want to link between the tags. In the example below, we link the sentence This is my homepage to a file called index.html.

<a href="index.html">This is my homepage.</a>

If you'd like to link to a file that's in a subdirectory, just include the subdirectory with the file name. The series of subdirectories before the file name is called the file's path. In the example below, we link our sentence to a file on our site called index.html that is stored in a subdirectory called subdirectory1.

<a href="subdirectory1/index.html">This is my home page.</a>

To open a link in a new browser window, you just need to include where the page should open.

<a href="subdirectory1/index.html" target="_blank">This is my homepage.</a>

If you'd like to link to a page outside of your own website, you will need to include the entire web address of the page. In the example below, we link our sentence to Turbify's homepage.

<a href="https://www.turbify.com">This is Turbify's homepage.</a>

You can link to other kinds of files in the same way. For example, you might have uploaded an audio clip to your File Manager. You can link to this clip with an <a href > tag. In the example below, clicking the word Listen would open the audio file mysong.mp3.

<a href="mysong.mp3">Listen</a>

Image linking

Creating a link to an image is just as easy. For this task, you need to use an <img> tag. Add your image file name to the tag; then, when you add this link to your page, you will be able to display the image. In the example below, we create a link to the image called logo.jpg.

<img src="logo.jpg">

You can link an image to a destination the same way you link words. In the example below, we'll link our image to our homepage, index.html. When a visitor clicks on our image, they will go to the homepage.

<a href="index.html"><img src="logo.jpg"></a>

Anchor links

Anchor links have two parts, the link code and the anchor code.

<a href="#myLink">This is link code</a>
<a name="myLink">This is anchor code</a>

The link code is the call to action, and the anchor code is the result of the action taken. If This is a link code was clicked, it would automatically direct your site visitors to This is an anchor code.

Important notes

Remember that file and subdirectory names are case sensitive; in other words, subdirectory_1 is not the same as Subdirectory_1, and logo.jpg is not the same as logo.JPG.

Also, pay close attention to the file extension. In the examples above, our page file names end with .html. If we had used .htm instead, our links would break.

Find more HTML tips in our list of recommended HTML resources.