How To Make a Link Clickable

Online links lay the foundation for simple interactivity online, whether it’s sending users to webpages, downloadable documents, or other applications.

What’s great is that you can make clickable links in many applications, including as content management systems, website builders, word processors, and email clients.

This guide illustrates everything you need to know about how to make a link clickable, while also explaining the basics behind a link and the terminology you may encounter while creating one

Hyperlink Basics

There are various terms for a piece of content—like text or an image—that offers clickability, or the interactive option to place your cursor over the content and navigate elsewhere.

Some of those terms include:

• Link
• Hyperlink
• Clickable link

Nothing's more frustrating than a link that won't click. Make sure yours work! Click to Tweet

Technically, all of these have their own definitions, but nowadays they’re used interchangeably.

A user’s ability to interact with content online relies on these hyperlinks, where users can scroll over a bit of text, an image, or a button and click on it, thus sending them to another piece of content (like an external webpage) or to perform an action (like calling a phone number from your smartphone).

A simple HTML-coded version of a hyperlink looks like this:

<a href="https://example.com/">the hyperlink text</a>

But it gets more complex when factoring in optional items like targets and nofollow elements:

 <a href="https://example.com/" target="_blank" rel="noreferrer noopener">the hyperlink text</a>

Here are the elements that make up a hyperlink:

1. The Content
2. The URL or permalink
3. Target
4. Nofollow, noreferrer, and noopener

Keep reading to learn about each of these elements and how they work.

The Content

You can create clickable links with two types of content:

1. Text
2. Graphics

This means that as long as the app you’re using supports hyperlinks, you can find any line of written text or image within your content and turn it into a clickable link.

Hyperlinked Text

Text is one of the content options when making clickable links.

If you’re using an editor like WordPress, you can highlight whatever text you want in the editor screen, then select the Link button.

That renders a link on the frontend, usually with colored, underlined text.

A text hyperlink sometimes changes when a user hovers over it with their mouse, often changing colors or hiding the underline to specify that it’s a clickable link.

Furthermore, upon moving the mouse over a text link, browsers typically show a preview of the linked URL for you to see where it leads.

Hyperlinked Images

Many programs—including WordPress—let you generate hyperlinks using online media, like images.

This works by selecting an image on the backend (instead of text) and adding the desired URL via the Link function.

Once published, the standard cursor arrow turns to a hand cursor when hovering over the image, and visitors will see the browser present a preview of the linked URL.

Whether it’s an image link or a text link, clicking on it will activate an action, like sending the user to a different URL.

How the Coding Looks

The text or image content in a hyperlink is represented by “The Link Text” in the example below:

<a href="https://example.com/" target="_blank" rel="noreferrer noopener">The Link Text</a>

However, learning how to make a clickable link means that you’ll replace that text with your own content.

For a text link, the clickable text goes right before the </a> closing bracket.

Image links are a little different since they must include the URL of the image (best if uploaded to your website media database).

That media URL goes between the quotes in the img src=“” section.

There are other elements to add with image links, like:

• An alt tag (alt=“”): Text describing the image for search engine crawlers and visually impaired users.
• A class (class=“”): A coded name for using the image elsewhere in your code or website files.

The URL

As part of a hyperlink, the URL serves as the destination or action that occurs when someone clicks on the link.

But not all URLs feature webpage URLs. You may find that some hyperlinks have “click to call” functionality, allowing users to call a phone number right from their smartphone with one click.

Another option is to reveal a map that opens the user’s map app on their phone.

How the Coding Looks

URLs in clickable links get placed between the quotes in the <a href=“” part of the hyperlink.

For instance, the https://www.example.com part of the following hyperlink code is the URL:

<a href="https://www.example.com" target="_blank" rel="noreferrer noopener">View the entire menu.</a> 

Some URLs lead to downloadable documents, while others require special coding. For example, a “click to call” link requires you to place tel: and a phone number within the href=“” quotes.

Target Window

The target window is an optional part of a hyperlink. It specifies whether the content opens in the same browser tab or a new browser tab.

On WordPress and many other apps, you can add a target window without touching any code by using the visual editor.

Simply switch off the “Open in a new tab” toggle if you’d like the link to open in the same tab currently viewed by the user.

Alternatively, you can activate the “Open in new tab” switch, which automatically adds a _blank attribute to the hyperlink coding and opens the URL in a new tab when clicked.

How the Coding Looks

These options get triggered by adding and editing the target=“” element in a hyperlink.

Although the target attribute has several values, such as _blank, _parent, _self, and _top, we generally only use the _blank value.

A hyperlink without the _blank target looks like this:

You’ll notice that it’s not different from a regular hyperlink. That’s because hyperlinks, by default, don’t open in a new tab. So, you don’t have to do anything to the link unless you’d prefer it open in a separate browser tab.

A hyperlink with the _blank target, which that triggers the URL to open in a separate tab, looks something like this:

<a href="https://www.example.com" target="_blank">View the entire menu.</a>

nofollow, noreferrer, and noopener

You’re also able to add additional elements to a clickable link, most of which add security or cloaking from search engines:

• nofollow: An attribute that blocks “SEO link juice” from going to the linked website. This helps protect your website and can hide the link from search engines.
• noopener: This is an HTML attribute that automatically gets added to WordPress links marked as “Open in a new tab.” It’s paired with noreferrer to minimize certain security issues while opening links in new tabs.
• noreferrer: Often paired with noopener, the noreferrer attribute blocks all referral information from being passed to the target site, adding extra security and potentially blocking data from tracking sites and affiliate earnings sites.

You can’t identify any of these link attributes by looking at a link on the live site. Instead, you must tap into the HTML code.

How the Coding Looks

All of these link attributes go between the quotation marks in the rel=“” part of the clickable link.

It’s possible to have all of them included in one link.

Alternatively, you may see that some hyperlinks only include a noreferrer noopener attribute, or a nofollow without the other two. It all depends on what the link creator wants to achieve.

Reasons You Might Want To Make a Link Clickable

When learning how to make a link clickable, it’s important to understand all the reasons behind hyperlinking. This way, you’re aware of the features and can take advantage of them in the future.

Here are the main reasons you might want to make a link clickable:

1. General internal/external hyperlinking to URLs: You can make text links that lead away from your website (like for citing sources or strengthening an argument with a third-party study), or to other pages on your site (particularly useful for sending readers to relevant content and keeping them on your site for a longer period of time).
2. Linking images: You can add hyperlinks to URLs, media files, or attachment pages to any image on WordPress, and many other website builders.
3. Linking buttons: CSS buttons offer options for adding hyperlinks, adding a more appealing, visual experience to your clickable link when compared to plain text.
4. Phone numbers: Often called a “click to call” feature, hyperlinks that lead to phone numbers open up apps with calling capabilities, like the actual phone app on your device, or Skype.
5. Addresses: Hyperlinking to specific coordinates on Google or Apple Maps means that the user who clicks the link will have that information automatically placed into their GPS/map app for navigation.
6. Email addresses: This is similar to “click to call” links, but with email addresses. It triggers the email app on a phone or computer, along with a new email composition with a specific email address added in the To field.
7. To create anchor links: You can link to content on the same page by using anchor links; these are very popular for creating a table of contents at the beginning of a long blog post. They are sometimes called “bookmark hyperlinks.”
8. To offer a downloadable file: WordPress—and other website builders—offer tools to upload SVG files, PDFs, HTML files, and much more; you can even bulk upload items. After that, it’s possible to create hyperlinks within posts/pages for users to download the files directly to their devices.

Now that we’ve covered the types of hyperlinks and the reasons you may want to generate one, keep reading to learn all about how to make it happen.

How To Make a Link Clickable

The method you choose for creating a link depends on your experience. You can opt for an easier visual method or consider using HTML code.

There are four primary methods for how to make a link clickable:

1. Using the WordPress Classic Editor
2. Using the WordPress Block Editor (Gutenberg)
3. Using HTML
4. Using any Graphical User Interface (GUI)

Keep in mind that all of these methods work similarly for WordPress posts and pages. These guides (particularly Method 4) are helpful for other apps/website builders as well, but some terminology/functionality may vary.

Method 1: Using the WordPress Classic Editor

If you’re working with the WordPress Classic Editor, the easiest way to make a clickable link on a post or page is through the Visual editor tab.

To do so, go to the Posts or Pages section of your WordPress dashboard, and select an individual page or post you’d like to edit, using the Visual tab.

Step 1: Highlight the Text You’d Like to Make Clickable

For a text link, it’s best to already have the text typed into the Visual editor. Thereafter, use your cursor to highlight the string of text.

If You’re Turning an Image into a Clickable Link:

Select the image so that you can see an editor toolbar and an outline around the image.

Step 2: Click the Insert/Edit Link Button

With the text still highlighted, scroll over the Insert/Edit Link button in the Visual Editor toolbar. The button’s icon looks like a chainlink.

If You’re Turning an Image into a Clickable Link:

With the image still selected, click the Insert/Edit Link button (the one that looks like a chainlink).

Step 3: Paste in a URL

This reveals an empty URL field. Copy (Command + C, or Ctrl + C) the desired link URL to your device’s clipboard. This link can be an external URL you found elsewhere on the internet or a URL from your own website.

Once copied, paste it (Command + V, or Ctrl +V) into the field.

If You’re Turning an Image into a Clickable Link:

Paste the desired URL into the revealed field, then click the Apply button to activate the link.

Step 4: Apply the Link

Click the Apply button to activate the link and make the text clickable.

You should now see the hyperlink portion of your text underlined, and potentially in a different color.

If you click the hyperlink in your editor, it reveals a live link to test, along with editing tools in case you want to change the hyperlink.

Additional Options

We’ll cover more advanced clickable links in the following sections, but it’s worth noting that every link you create in the Classic WordPress editor has a Link Options button for additional settings.

Here, you can:

• Adjust the URL
• Change the Link Text
• Open the link in a new tab
• Search for and link to existing content on your site

If You’re Turning an Image into a Clickable Link:

The Classic WordPress editor provides a secondary way to make images clickable. That’s by selecting the image, then choosing the Edit button (looks like a pencil) in the popup toolbar.

Scroll to the Link To field, which allows you to link to a Custom URL. Simply paste the desired URL into the field below that, and click Update.

You can also select the Link To dropdown menu to make a hyperlink to:

• Media files
• Attachment pages
• Custom URLs
• None

Method 2: Using the WordPress Block Editor (Gutenberg)

Hyperlinks work the same in both posts and pages in the WordPress Block Editor.

To start, go to the Posts or Pages section of your WordPress dashboard. Select an individual post or page you’d like to edit, then dive into the steps below.

Step 1: Highlight Some Text

Type some text into the editor. With your cursor, highlight the portion of that text you want to make clickable. In the popup toolbar, click the Link button.

If You’re Turning an Image into a Clickable Link:

Making an image clickable in the WordPress Block editor starts by actually adding an image to the editor.

To do so, click the Add Block button, then select the Image block. Upload whatever image you’d like to link.

Click on the image so that it’s highlighted/selected, then choose the Insert Link button in the toolbar popup window.

Step 2: Paste in the URL and Submit the Link

You’ll see a popup with a blank field. Paste in whatever URL you would like to link to, then click Enter on your keyboard, or the Submit button to activate the clickable link.

As a result, the hyperlinked text shows in a different color, and you can click on the link to review a preview of the content and add more advanced linking settings.

If You’re Turning an Image into a Clickable Link:

There are options to hyperlink media files and attachment pages if you’d like.

Otherwise, paste a URL to the empty link field. Click the Apply button to activate the link. After publishing, anyone who clicks on the image gets brought to the link you specified.

For more options, click the down carrot (v) button to:

• Open the link in a new tab
• Add Link Rel
• Add Link CSS Class

Additional Options

We’ll go more in-depth on advanced hyperlink structures in the following sections, but you should know that an Edit button is available if you click your cursor on the newly created link.

That Edit page reveals fields to:

• Change the link text
• Modify the URL
• Open the link in a new tab

Other Clickable Links You Can Make in the Block Editor

The WordPress Block editor expands upon the usual linking options available. In fact, dozens of built-in blocks allow for some sort of clickable link structure, including:

• Buttons: A stylish way to link content when compared to simple text links.
• Files: Quickly upload files and include a button for users to click and download.
• Social Icons: Insert social icons with clickable links.
• Navigation: Place navigational buttons anywhere on your site with the use of clickable links.
• Read More: Can be used to shorten your content and provide a link to the more extended version.
• Login/out: Add a quick link for users to log into your site.
• Next Post: Add a clickable link/button to the next blog post on your site.
• Previous Post: Add a clickable link/button that goes to the previous blog post on your site.

Method 3: Using HTML

Make a link clickable with HTML functions the same way regardless of your editor’s interface.

You can edit HTML with:

The Text panel in the WordPress Classic Editor

The Code Editor in the WordPress Block Editor

An HTML/Text Editor on Your Device

Text editors like Atom, Sublime Text, and Coda provide the interface needed to write and edit HTML, especially for clickable links. It’s also possible to use markdown editors.

After working with the text editor, you can:

• Upload your files for publishing on the internet, via FTP or SFTP. We recommend using FileZilla for the most seamless process.
• Bulk upload HTML files to the WordPress file directory.
• Use one of the many other FTP clients for uploading HTML files to WordPress.

After you find a text editor—and you know how you’ll upload the HTML to WordPress—move to the steps below to make a link clickable with HTML.

This format is used for basic hyperlinks in HTML:

<a href="https://www.example.com">Link Text</a>

Notes:

1. Replace “https://www.example.com” with your desired URL.
2. Replace “Link Text” with the desired link text.

Once you have the link ready, you can publish the post/page, or upload the HTML to your site. It’s also possible to get a visual preview of the link by switching to the Visual tab on WordPress.

A published version of that HTML link shows the link underlined and sometimes in a different color. Moving the mouse over that link reveals its target at the bottom of the browser.

Method 4: Using any Graphical User Interface (GUI)

Although we can’t cover every imaginable GUI in existence, learning how to make a link clickable in something besides WordPress or HTML usually looks similar to what we just covered.

Overall, each GUI may use a slightly different button name or icon for creating a hyperlink.

Your general process should go like this:

1. Highlight whatever text you want to link.
2. Click on the Link icon (may have a different name) in the editor.
3. Paste in the desired URL.
4. Click on the Add Link button (also might have a different name).

As a basic example, an online store builder like Shopify lets you make a link clickable in any page or post, by highlighting text and clicking the Insert Link button.

You would then paste in the target URL and click the Insert Link button.

That produces a clickable link.

How To Make Links Open in a New Tab

As we discussed earlier, WordPress and other GUIs offer additional customization options for clickable links, such as forcing a link to open in a different tab.

How do you go about doing that? Let’s take a look.

Open Link in a New Tab Using WordPress Classic Editor

Once you have a clickable link in the WordPress Classic Editor, choose the Link Options button.

Check off the box to Open Link In A New Tab.

Then, click on the Update button.

Open Link in New Tab Using WordPress Block Editor

Assuming you already added a link in the WordPress Block Editor, clicking on the link opens a popup preview of the target content.

The Edit button provides access to more settings (including the Open In New Tab option), but it’s easier to flip the Open In New Tab> switch right at the bottom of the popup window.

Open Link in New Tab Using HTML

In the WordPress Text editor, WordPress Code editor, or a general HTML editor, you can use the following code to make it so that your clickable link opens in a new tab:

<a href="https://www.example.com" target="_blank" rel="noreferrer noopener">Link Text</a>

1. Replace “https://www.example.com” with your desired target URL
2. Replace “Link Text” with whatever text you want to link.
3. The target=“_blank” attribute is the segment of code that actually opens the link in the new tab. It’s the only part that’s truly necessary for that simple function.
4. We highly recommend adding the rel=”noreferrer noopener” attributes and values for blocking common security issues when opening links in new tabs. However, it’s entirely possible to leave them out of the code and still have the link open in a new tab.

After publication, the link looks exactly the same; but, when clicked, the target URL opens in a new tab.

How To Add Nofollow to a Hyperlink

The nofollow HTML value tells search engines to ignore a clickable link, and it stops search engine credit (link juice) from being passed to the target website. The main purpose of nofollow is to reduce spam links, but content creators use it for paid links, comments, user-generated content, embeds, or anytime you would rather not be seen as endorsing a site you link to.

WordPress doesn’t have a built-in way to add a nofollow link, but it’s possible by tapping into the HTML.

The following code reflects a basic link with a nofollow value:

<a href="https://www.example.com" rel="nofollow">The Link Text.</a>

What you’re seeing:

1. Replace the “https://www.example.com” text with your desired target URL.
2. Replace “The Link Text” part with whatever link text you want.
3. Use the rel=“nofollow” attribute and value within the link HTML.

When published, or in the Visual view, a nofollow link looks no different from a standard hyperlink; yet the nofollow functionality gets saved in the backend code.

How To Link to Existing Content

Linking to existing content is a feature exclusive to WordPress, where you can search for previously created blog posts and pages right in the WordPress editor. This removes the need to bring up their URLs in another browser window to copy and paste them into a clickable link.

Link to Existing Content in the WordPress Classic Editor

Create a link by highlighting the desired text and clicking the Insert/Edit Link (chainlink) button in the editor. This reveals a popup field, where you can click the Link Options (gear icon) button.

1. Go to the section called “Or link to existing content.”
2. Type a keyword into the Search bar, then pick an existing page or post from the results.
3. Watch as the link for the existing content automatically gets placed into the URL field.

Make sure you click on the Add Link button when you’re done.

That produces an immediate link to other content (also known as an internal link) in the editor.

Link to Existing Content in the WordPress Block Editor

Highlight whatever text/image you want to link, then click on the Link button in the popup toolbar.

The field provided has two functions: you can paste in a URL, or use it as a Search bar. Therefore, type in whatever keyword relates to some of your existing content to reveal related results.

Once you see the page or post you want, click on it.

That automatically creates a link to the existing content in the WordPress Block Editor.

How To Make Clickable Telephone, SMS, and Email Links

There are a few ways to add special actions to clickable links by swapping out the standard URL structure and linking to something different, like:

• A telephone number that opens the Phone app.
• A phone number that opens the texting app.
• An email address that automatically opens the user’s email app.

How To Make a Clickable Telephone Link

A “click to call,” or telephone link automatically adds a specific phone number into the user’s phone app, or even an app that supports telephone numbers, like Skype.

Instead of using a URL, you would insert the tel: code into the HTML, followed by a phone number, like this:

<a href="tel:555-555-5555">Click To Call</a>

Notes:

1. Replace the phone number with the number you want users to call.
2. Replace the “Click To Call” text with whatever you want the link text to show.

In visual editors like WordPress Block and WordPress Classic, simply type tel:555-555-5555 (with the desired phone number) into the URL field for a link. Click Enter for it to automatically generate the phone link for you.

When someone clicks that link, they either get sent right to the most relevant app (the phone app on a smartphone) or they see a prompt to open an app like Skype.

How To Make a Clickable SMS Link

Clickable SMS links function much like phone links, but they opt to automatically open messaging apps instead of calling apps.

To add an SMS link, use sms:555-555-5555 instead of a URL.

<a href="sms:555-555-5555">Click To Text</a>

Notes:

1. Replace “555-555-5555” with a different phone number.
2. Replace “Click To Text” with whatever you text you want for the link.

Both Classic and Block WordPress editors support SMS links when you put the sms:555-555-5555 value within the URL field for links.

As promised, users see messaging apps when clicking these types of links.

How To Make a Clickable Email Link

When clicked, email hyperlinks automatically prompt the user’s device to open their most relevant email app, along with a Compose section going to a specific email address.

For this one, add the mailto: code, followed by an email address, where you would usually put a target URL.

<a href="mailto:[email protected]">Click To Email</a>

Notes:

1. Replace the “[email protected]” email address with your desired target email address.
2. Replace the “Click To Email” text with whatever you want the link text to show.

If using the WordPress Classic or Block Editors, simply type the mailto:[email protected] value into the URL field when making a link.

After you publish the link, users who click on it get redirected to their mailing app, with the email address you specified included in the To: field.

 

Clickable links may seem like a small detail, but they sure do a lot for your site! Do it right with this guide Click to Tweet

Summary

Adding clickable links (also known as hyperlinks, or just links) can improve the interactivity on your website, lead people to more of your content, and reference important information from elsewhere on the internet. As such, learning how to make a clickable link is one of the foundational lessons of website design and content creation.

After reading this article, you should be able to identify the appearance of a clickable link and know exactly how to make one, whether it’s for adding a link to text or images. It’s also nice to know that there are various methods to make a link clickable, like through the WordPress Classic Editor, Block Editor, HTML, or any graphical user interface available.

And, of course, we encourage you to explore more advanced clickable link options like links for phone numbers, email addresses, and those with nofollow tags.

If you still have any questions on how to make a link clickable, share your questions and concerns in the comments below.

The post How To Make a Link Clickable appeared first on Kinsta®.