Using the anchor tag to create links

There are two types of links to pages you can create. There is the “Internal Link” and the “External Link“. An “Internal Link” is a link in your site that navigates the visitor to another page in your website. The “External Link” navigates the visitor away from your site to another website in the internet (like http://google.com). Below are examples of an external and internal link. The <a> in an HTML tag called an “anchor“. The anchor can have different attributes inside. The “href” attribute is the location the link takes you when clicked.

Note! If you are using a Content Management System like Drupal, Joomla, WordPress or the Premium Web Builder, you will use their WYSIWYG editor to create links. For more information see the following links.

Creating an Internal link in your website

This first link is the “Internal Link“. Internal links reference to a file location on your server. The path to the file location is placed in the “href” attribute. To link a page in your own site you reference the location of the file in the “href” attribute. For Example, if you place a file called nextpage.html in your public_html for your main domain, you simply put the file name like below.

<a href="nextpage.html">This text will now be a link</a>

To reference a file in a subfolder, you include the subfolder name in the “href” attribute For example, if you have nextpage.html in a folder called subfolder, you will create the link like the following:

<a href="subfolder/nextpage.html">This text will now be a link</a>

Important! Don’t forget to close out the tag with the proper closing tag which is </a>. If you don’t close the tag the entire page below the tag will become a hyperlink as well.

Creating an External link to another site

Creating an “External Link” only requires you to have the link to the page. If you want to link your site to inmotionhosting.com for example, you would copy the url in the address bar when you are at inmotionhosting.com, and paste the url in the “href” of your anchor / link like the following:

<a href="http://inmotionhosting.com">Text that will be a link</a>

This will make the link go to inmostionhosting.com when clicked.

Basic list of necessary Anchor attributes

Below is a table on basic anchor tag attributes. There are many more attributes available to use in anchor tags; however we will only cover the basic 4 attributes most commonly used.

<a href="nextpage.html">This text will now be a link</a>

_blank (Opens in a new tab)
 _parent (Opens in the parent frame.)
 _self (Opens in the same window.)
 _top (Opens the same as self except works with frames.)

<a href="nextpage.html" target="_blank">This text will now be a link</a>

<a href="nextpage.html" title="Click here to see this link">This text will now be a link</a>

<a name="bottom">bottom</a>

http://example.com/#bottom

<a href="nextpage.html" name="location_of_page">This text will now be a link</a>

Please check the next article on Creating an Email Link in your Web page. For more information on this course please visit Inserting Links into a Website.