HTML Link Codes & What They are For

SEO

By Chris Barnhart Last updated Oct 4, 2021

0

Share

Hyperlinks are a fundamental part of the Internet; you likely clicked on a few to land on this page. While they’re mostly used to navigate websites and applications, they can also boost your SEO campaigns. 

What Is a Hyperlink?

A hyperlink connects one online location to another. You click on hyperlinks to “jump” to different web pages on the Internet or other parts of the same web page. 

In HTML code, hyperlinks are usually added to an element that describes the link (anchor text.) You can add hyperlinks to text, images, videos, and more. 

When embedded into text, hyperlinks are underlined and appear blue until they’re visited for the first time. Once visited, they appear purple. 

Hyperlinks work differently from links. Links are the direct address of a webpage or document. They specify your resource’s location on a server. When you click on a hyperlink, you’re following a link.

Here is a hyperlink to the Semrush tool suite. Our hyperlink follows a link:

https://www.semrush.com/projects

The hyperlink’s anchor text is “the Semrush tool suite.”

How to Create a Hyperlink (Different Types)

There are plenty of ways to insert a hyperlink into a webpage. In most CMS or text editing applications, the keyboard shortcut Command/CTRL + K will create a link. 

Highlight the text or images you want to hyperlink, hit Command + K (Mac) or CTRL + K (Windows), and you’ll be prompted to insert a URL. Add the URL and hit enter. 

Here’s an example of WordPress hyperlinking feature. When we use the keyboard shortcut, the CMS platform prompts for a link: 

The same function applies to Shopify websites, but the interface looks a little different:

How to Add Hyperlinks with HTML Code

If you’re handy with HTML programming, you can add a hyperlink to your document using the anchor (“a”) tag and the href attribute. 

In the examples below, we created the orange hyperlink seen in the first screenshot with the HTML code in the second. 

The anchor “<a>” tag indicates that you’re inserting a hyperlink. You’ll need to use the opening “<a>” and closing “</a>” tags so your browser knows which elements to display as a hyperlink. 

The href tag is the link’s destination. Href is short for hypertext reference. You’ll use this attribute to point to a URL. 

Target Link Attribute

When a user clicks or taps on a hyperlink, it opens in the same browser window or tab by default. You can use the target attribute to specify where your link should open. There are different attribute values, including:

• _self (opens the link in the same window or tab)
• _blank (opens the link in a new window or tab)
• _parent (opens the link in the parent frame) 
• _top (opens the link in a full body of window)

The example below uses the “_blank” target attribute to open the URL “ www.semrush.com” in a new tab:

How to Create a Download Link (HTML)

Say you want your users to download free resources through a sign-up link or an online course. You can link directly to files with hyperlinks.

In the example below, we’re linking directly to a .zip file. This hyperlink triggers an automatic download of our logo once clicked.

Add the “download” attribute to your <a> tag to trigger a download of the resource you link. You can only use this attribute if the href attribute is set. 

How to Create an Email Link (HTML)

For easier access, hyperlink your email address on a contact page or in your website’s header. When a user selects this link, their browser prompts their email client to compose a new email and direct it to the linked email address.

Add mailto: to the href attribute to link to an email address. Enter the email address, then close the quotes and <a> tag. 

When selected, our hyperlink opens our email client and addresses a new email to “[email protected]:”

How to Add a Hyperlink to an Image (HTML)

In some cases, hyperlinking images instead of text can result in a better user experience. Ecommerce sites owners can use linked product images to entice users to click through to other pages on their sites, like product pages or menus. 

To add a hyperlink in a picture, wrap the image’s code in an <a> tag. 

In the example above, we inserted our img tag within an opening <a> tag and a closing </a> tag. When the user hovers over the GIF, their browser will indicate there’s a hyperlink present. Once clicked, the hyperlink opens “semrush.com/blog:”

Hyperlinks are how your visitors navigate your website. If one breaks or isn’t implemented properly, it can affect the user experience and result in visitors “bouncing” off your website altogether. Additionally, a healthy link architecture makes it easier for web crawlers to explore and index your site. 

You can use a site auditing tool to keep track of your hyperlinks. If a page you linked to is no longer available, your audit tool can warn you, so you can update or remove the hyperlink.