How to Make a Clickable Link

Michael Kwan
Reviewed by Vikki Olds
clickable link

Whether you have your own blog and you want to link to one of your older posts or you're participating in a conversation in a forum and you want to provide a reference link to back up your argument, using anchor text with a clickable link is of tremendous value to site users. It's far easier and more convenient to simply click on a link than to copy and paste the exact web address in another browser window.

Clickable Links in Different Contexts

The way you make clickable links depends on the type of system you are working in.

HTML Code

The default language for much of the Internet is HTML or HyperText Markup Language. This is likely the kind of code that you would use if you were creating or editing a website from scratch, or if you were in another web tool that requests HTML.

To create a clickable link in HTML that opens in the same window, follow these steps:

  1. Determine the URL where you would like the link to go, including the http:// leading text. This example will use http://www.lovetoknow.com.
  2. Determine the "anchor text" that you would like to use. Anchor text is the visible, clickable text that other users will see. This example will use "LoveToKnow trusted advice" without the quotes.
  3. Format the HTML code as follows:
    • <a href="http://www.lovetoknow.com">LoveToKnow trusted advice</a>
  4. Insert that code where you would like the link to appear.

This would create a clickable link that looks like this: LoveToKnow trusted advice

The "a" in "a href" stands for anchor and is an HTML tag, while the "href" portion is an attribute of "a" that stands for hypertext reference. To specify where and how the link should open, the target attribute can be added.

  • target="_blank" opens the link in a new window or new tab
  • target="_self" opens the link in the same window or tab

Following this example, to create the same link as above but to cause it to open in a new window instead of the existing one, the HTML code would be formatted as follows:

  • <a href="http://www.lovetoknow.com" target="_blank">LoveToKnow trusted advice</a>.

WordPress CMS

Creating a clickable link in Wordpress
Clickable link in Wordpress

WordPress is one of the most popular content management systems. It is used for blogs and other websites. It is a free platform that provides users with two post and page editors: the visual editor, which displays what the site visitor would see; and the HTML editor, which displays the plain HTML code.

With the HTML editor, raw HTML code like that described above can be used to create a clickable link. With both the visual editor and the HTML editor, there is an alternative.

  1. Write the content for the post or page using the editor of your choice.
  2. Highlight the text that you would like to use as the anchor text.
  3. Click on the "link" button above the content editor, just below where the post or page title text goes. This brings up a pop-over window.
  4. Type or copy in the destination URL (where you would like the link to go) in the URL field.
  5. Optionally tick the box marked "Open link in a new window/tab" to cause the link to open in a new window or tab.
  6. Click the "Add Link" button.

Web Forum BBCode

Screenshot of phpBB Forum
Clickable link in BBCode

Bulletin Board Code, or BBCode for short, is the markup language used in many popular discussion forums on the Internet. Some forums offer a WYSIWYG (what you see is what you get) editor with various buttons to format the text of your posts, including a button to add links. Where this type of editor is not available, a clickable link can be created with properly formatted code.

  1. Decide on the destination URL and the anchor text for the link.
  2. To create a link where the URL itself is the anchor text, use this format:
    • [url]http://web-design.lovetoknow.com/[/url]
    • This creates a link that looks like this: http://web-design.lovetoknow.com/
  3. To create a link with custom anchor text, use this format instead:
    • [url=http://web-design.lovetoknow.com/]LoveToKnow Web Design[/url]
    • That results in a link like this: LoveToKnow Web Design

Wiki Markup Language

While the wiki markup language is often associated with the Wikipedia website, it is also used on a number of other wiki sites around the Internet. Unlike HTML, WordPress and BBCode, wiki markup language differentiates between internal links (links to other pages on the same website) and external links (links to pages on other websites).

To create an internal link (also known as a wikilink):

  1. Determine the name of the internal page where you would like the link to go. Exact spelling, including spacing and capitalization, can matter. This example will use a hypothetical page with "Example Page" as its title.
  2. Format the wikilink as follows so that the name of the page also acts as the anchor text:
    • [[Example Page]]
  3. To create a wikilink with different anchor text, use the vertical bar (or "pipe" symbol) to separate the two portions of text within the double square brackets. The first portion text is the target page, while the second portion of text is the anchor page. To link to "Example Page" using the anchor text "Click Here," the wiki code would be as follows:
    • [[Example Page|Click Here]]

To create an external link:

  1. Get the exact URL, including the http://, where the link should go.
  2. Format the external link using single square brackets as thus:
    • [http://cellphones.lovetoknow.com]
    • This results in a link that looks like this: [1]
    • All external links referenced in a wiki page are typically also automatically listed at the end of the page.
  3. Including custom anchor text is helpful. Insert a space after the URL, enter the anchor text, and close with a single square bracket as follows:
    • [http://cellphones.lovetoknow.com Cell phone information]
    • This results in a link like this: Cell phone information

Via Email

Formatting a clickable link in an email message depends on both the sender and the recipient. Some email clients and email software will only display plain text, while the majority are capable of displaying HTML, including links, tables and images.

If the recipient of the message is using an email client that supports HTML, as is the case with virtually all web-based email providers like Outlook.com and Gmail, then the full URL on its own is all that is required. The URL is typically clickable in this case.

If the sender of the message has an email client that supports the creation of HTML messages, then it will likely also include formatting tools similar to Microsoft Office or other visual editors to insert a link.

  1. Highlight the desired anchor text.
  2. Click on the "link" or "URL" button.
  3. Enter the destination URL.

Mastering Clickable Links

Creating a link that is clickable by other readers may seem like a daunting or intimidating prospect at first, but understanding the basics of the relevant markup language or "code" can make the process far more manageable and easy to understand.

How to Make a Clickable Link