HTML Link Codes & What They are For

HTML Link Codes & What They are For



Source link

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. 

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

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: 

html link code

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

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

html link code

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. 

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:

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. 

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]:”

html link code

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. 

html link code

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:”

html link code

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. 

The Site Audit tool can check all of your internal links to ensure they’re still working and linked to live pages. Use the Internal Linking report to spot internal linking issues, monitor your site’s internal link distribution, and more:

html link code

To get started with the Site Audit tool:

  1. Launch the Site Audit tool from your project’s dashboard. (If you don’t have a project set up, you’ll need to create a project for your website to use the Site Audit tool.)
html link code
  1. Configure the audit’s settings with the tool’s setting panels. You can set the audit’s crawl scope and include any disallowed pages. Select Start Site Audit.
html link code
  1. When the audit is complete, open the Internal Linking thematic report in the Overview tab:
html link code

Use the report to find and fix any internal linking issues affecting your site’s SEO. The tool explains each issue and how to fix it: 

html link code

Discover which pages are passing along the most LinkRank, so you can place links to your underperforming pages on them. These pages can help boost page authority:

html link code

Find and Fix Sitemap Errors

with the Site Audit Tool

ADS illustration

Key Takeaways

  • Hyperlinks are an integral website element. They can guide users to different web pages or parts of a web page.
  • You can use link attributes to specify how your hyperlinks behave in the browser.
  • Good link architecture can support your SEO strategy by sharing page authority and improving user experience. 
  • Site auditing tools can help you find and fix broken internal links. 

Leave a Comment

Your email address will not be published. Required fields are marked *