Adding Page Links

Different types of HTML page links

Pinned Note Adding Links
You can use any plain text editor like Notepad in Windows or TextEdit on Mac to add links into the body of your webpages. Links can be to internal pages on your website, to any file type, or to external sites like or or they can be email links.

See Also…

Adding a normal link:
To add a normal link to a page, use the following code:

Then you can make a copy of one of your existing pages and name it "newpage.htm".

TIP: To be sure you are linking the exact file name: In Windows Explorer find and highlight the file you want to create a link for. For example, you have made a copy of the "about.htm" and you have named it "company.htm". Or perhaps you have a PDF file named "July-28th-2005-Quarterly-Commitment-Report.pdf". Highlight this file, then on your keyboard select the "F2" key. Now hit "copy" on the menu and the ESC (so you don't rename the file). Now you can paste the exact link name into your HTML page or .js file rather than having to re-type the name for the link. On some Microsoft keyboards you will need to click the "F Lock" key first to use the rename function.

Adding a link to another website:
To add a link to another website like "Visit Yahoo!" for example, use the following code:

Adding a hidden email link:
If you add your e-mail to one of the pages, search engines can see it and you may receive more spam mail. The following code uses Javascript so your e-mail is not seen on the page and will be less likely to be harvested by spam bots. See more email link options.

This is how the above will appear on your webpage:

Contact Us

Hidden email link option #2
Or you can optionally use the following code. This code does not work in jQuery includes. See more email link options.

This is how the above will appear on your webpage:

Hiding the form email:
The following code will replace the "recipient" hidden field if you are using the formmail script. If you are using another script you will need to modify the code below for the line in the form that includes your email.

Replace the following code in your "contact.htm" or "quotes.htm" to hide the email used in your form:

<input type="hidden" name="recipient" value="">

Replace the above with the following code and edit with your email variables:

Adding links to other file types:
You can also add links to other file types like .pdf, .wav, .wmv, .rm, .ram, .jpg or any other file type you normally see on the web. You will use the same basic code as the "normal link" seen above. Below are a couple of examples:

<a href="yourfile.pdf">PDF file name goes here</a><br>

<a href="yourvideo.mp4">MP4 movie file name goes here</a><br>

<a href="yourvideo.wmv">WMV movie file name goes here</a><br>

<a href="yoursound.mp3">MP3 song name goes here</a><br>

<a href="yourpicture.jpg">JPG image name goes here</a><br>

Place the file you are linking to in your website folder. When one of these file types, other than an HTML page, are opened by one of your users, the appropriate application will open on the users computer. Keep in mind that for example, if you click on a .wmv movie file it may open windows media player on your computer, but it might open quicktime on another computer. It all depends on what application is associated with which file type on the given computer.

Clickable phone links:
All templates include a file to add your phone number in. This will be in the "contact.htm" or the "contact.js" or the "phone.js". The phone number is already clickable on Apple mobile devices, however, to make this clickable on more devices edit the phone link as follows:

The phone link will appear as follows:

<span class="phonetitle">(555) 555-5555<br></span>

Edit the above like the following to make the phone link clickable to allow your users to add your number to their address book or automatically call by clicking the link:

<a href="tel:18475555555" class="phonetitle">(847) 555-5555</a><br>

Adding images with links:
If you want to add an image that links to another webpage or website, see the adding images support page.

Troubleshooting: Links not working:
If you have added links and they do not seem to work when testing, see the links not working support page.

Notes: When testing your webpages on your hard drive with Internet Explorer, the links to ".pdf", and other document types may not work in some cases. This will be resolved once the site is uploaded. Try testing your site in another browser, such as Google Chrome or Firefox, to ensure the links are functioning properly.

Related Topics:
New Window Target Links
Links Not Working After an Edit
Editing the Menus

Mobile Responsive Designs