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 https://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="https://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.

Basic Anchor Attributes
hrefThis attribute specifies where the link will navigate to.

<a href="nextpage.html">This text will now be a link</a>
targetYou can have your links open in a new tab or open in the same window with the target.

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

The below is an example of the _blanktarget.

<a href="nextpage.html" target="_blank">This text will now be a link</a>
titleShows information about the link. When you hover your mouse over a link with a title tag, a little pop up will display the text in this attribute.

<a href="nextpage.html" title="Click here to see this link">This text will now be a link</a>
nameThis is the name of the anchor, This is used for linking to a specific spot in a page. For example, if you want to navigate to the bottom of your web page, you can add a name attribute like:

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

When you create this name you can reference your site like:

https://example.com/#bottom

Visiting this will send the web surfer to the bottom of your main page.

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

5 thoughts on “Using the anchor tag to create links

  1. Glad you liked it 😊 I’m a big fan of your blog.

    By the way, I’m still new to this whole blogging world so getting some exposure to my tiny blog would be awesome.
    I was wondering if i could contribute a guest post for your blog.

    1. Hello Anjani,

      Thank you for your comment. Unfortunately, as our blog is currently managed internally, we will not able to offer such an option at this time. That being said, we have made note of your request and may reach out to you for future opportunities to contribute.

      Please let us know if you have any further questions, we are happy to help.

      Best Regards,
      Alyssa K

  2. One of your techs sent me a link to the above information, but I need more basic instruction. I am trying to create a link in Premium Web Builder from a specific word or phrase on one webpage to further information about that word, like a definition, on another webpage (on the same website).

    It looks like the info above is what I need, but it is too advanced for me. Can you give me more step-by-step basic instruction? How do I fix the location of the anchor – do I highlite it? And where am I entering all of this information?

    Sorry, I wish I could be more specific. I pretty much understand the instructions above, but need a little more before and after instructions.

    Thanks – hope you can help.

    Sally

Was this article helpful? Join the conversation!

Server Madness Sale
Score Big with Savings up to 99% Off

X