The Fast & Easy Guide to HTML Link Codes
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.
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:
To get started with the Site Audit tool:
- 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.)
- 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.
- When the audit is complete, open the Internal Linking thematic report in the Overview tab:
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:
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:
Find and Fix Sitemap Errors
with the Site Audit Tool
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.
Source link : Semrush.com