How to create a HTML link to another webpage?

There are often times when composing a blog post, we would like to refer to other web pages of related topics with a link to them but don't know how-to create one. This is especially true for newbies to blogging, so I thought it appropriate to include a tutorial here.

A link is the 'address' to a document (or a resource) on the web, and in layman's term, can be known as hyperlink, hypertext link, clickable link, or just simply, link.

Learn how to create an HTML link to another web page
in these simple steps below:
(this will link to a web document that opens in the same tab or window)

1. First, you need to know that the HTML format for a basic link looks like this:
   
   <a href="URL">Text</a>
   
   where only the URL and Link Text are to be changed accordingly as you wish, while the anchor tags <a> and </a> that starts and ends the link, including the href attribute and the rest should remain intact.
   So, basically, a HTML link has two parts as seen in the following two steps, that is, the URL or destination site/page/resource, and the clickable part which is the link text.
   
   
2. For the first part, you just need to specify the URL (uniform resource locator) or webpage address that you want linked to in the start tag, <a href=" ">, which is to be enclosed in double quotes. The URL can be found at the top white box of the browser's address bar.
   
   
   
3. The second part is to add the Text that you want to be displayed on your blog post to work as the link created. Since this text will be the clickable link that is shown up in your post, do write something that denotes the link. Just adding 'Click here' is not advisable as it's not user-friendly for disabled readers.

That's all! Simple and easy, right?

Here's an example below that would create a link to the Jacq's Blogger Tips homepage :

<a href="http://jacqsbloggertips.blogspot.com/">Click here to go to Jacq's Blogger Tips</a>

and it will appear in the post as

Click here to go to Jacq's Blogger Tips
and open it in the same window as the current web page when clicked.

Now that you know how easy the link format is, you can then proceed to learn one more simple additional step which is :

How to create a HTML link that opens the linked webpage in a new tab or window :
(some people prefer this variation, so that their visitors do not have to leave the currently opened webpage)

1. Follow the same steps as the previous tutorial above, except that you've to add to the HTML link, the target attribute to define where the linked document will be opened. Setting the target attribute to "_blank" will lead it to open in a new tab or window as shown in the blue-coloured text below :
   
   <a href="URL" target="_blank">Text</a>
   

Here's an example below that would create a link to the Jacq's Blogger Tips homepage :

<a href="http://jacqsbloggertips.blogspot.com/" target="_blank">Click here to go to Jacq's Blogger Tips</a>

and displayed in the post as

Click here to go to Jacq's Blogger Tips
which will open the webpage in a new tab or window when clicked.

Try it! It's fun learning!

Just sharing an image to illustrate the two different HTML links in brief to round it up!



You may want to browse these related links:

• HTML Goodies - the ultimate html resource
• w3schools.com - html links

P/S: For Blogspot bloggers who'd prefer an alternative way, visit my next article at Create a hypertext link in Blogspot blog.

Keep learning~~keep smiling~~keep sharing!!

Last edited: May 3 2011