HTML Link Code: How to Create Hyperlinks on Your Site

HTML links (also called hyperlinks) are one of the most important parts of the Internet.

Search engines like Google use them to find, read, and rank web pages. Links help both users and search engines move from one page to another. So, it’s important to know how to make proper HTML links if we want our website to do well.

Table of Contents

1. The Parts of an HTML <a> Tag
2. Common Types of HTML Links
   • • Text Links
     • Image Links
   • Email Links (mailto:)
   • Phone Links (tel:)
   • Jump Links (Anchor Links)
   • Button Links
   • Download Links
3. Special <link> Tags for SEO
   • Canonical Tags
   • Hreflang Tags
4. HTML Link Best Practices
   • Correct Syntax
   • Anchor Text
   • Title vs. Aria Labels
   • Target Attribute (_blank)
   • Link Relationships (rel attribute)
5. Absolute vs. Relative URLs
6. How to Check Your Site’s HTML Links

The Parts of an HTML Link

We create a link in HTML using the anchor tag: <a>. This tag can use different attributes to change how the link works.

Here’s what a simple HTML link looks like:

Now let’s break it down:

• <a> is the anchor tag. It tells the browser that this is a link.
• href shows where the link will go. This could be another website, a file, or a part of the same page.
• target=”_blank” makes the link open in a new tab or window.
• rel=”noopener” explains how the linked page is related to our page. This helps with safety and SEO.
• The words between the tags are what people click on.
• closes the link. It shows where the link ends.

How to Add Links with HTML Code

The basic way to add a link is to use the <a> tag and put the web address inside the href part.

We place this tag around the words or image we want to make clickable.

Here are some common ways to use links in HTML.

Text Links

Text links are the most common type of link. They let people visit other pages on our site or go to other websites.

Example of a simple text link:

Visit Example.com

We can add extra options to change how the link works.

To open the link in a new tab:

Visit Example.com

If we are linking to a product or special offer, we might add:

Buy Now

Image Links: Make an Image Clickable

We can also use an image as a link. This makes the image clickable and can get more attention than plain text.

To do this, we put the <img> tag inside the <a> tag:

<a href=”https://www.example.com”>

  <img src=”image.jpg” alt=”Description of image”>

</a>

• src tells where the image is stored.
• alt gives a short description of the image.

Alt text is helpful because:

• It lets screen readers describe the image for people who can’t see it.
• It helps search engines understand the image for better results.

We should only use image links when clicking the image takes the person to something useful.

Sometimes we also use CSS styles to change how links look or work, like we do with some images on our site.

Email Links

Email links help users send emails with just one click.

They open the user’s email app with the address already filled in.

To make an email link, we use the mailto: method.

Example:When someone clicks the link, their email program opens, and they can start writing the message right away.

Phone Links

Phone links are made using the tel: method.

They let users call a number by simply tapping the link.

Example: For numbers outside the country, we should always add the country code with a plus sign. Also, the link text should clearly say what will happen when the person taps it.

Jump Links (Anchor Links) for Moving Around a Page

Jump links help users move to a specific part of the same page. They’re very useful for long pages with many sections.

We use jump links in things like a table of contents. There are two things needed to make jump links work:

• A part of the page must have an id that acts as the target.
• A link should point to that id using #.

When someone clicks the link, the page will scroll to Step 3. It will also show #add-keywords in the web address.

We can use jump links for:

• Moving between sections on long pages.
• “Back to top” buttons.
• Jumping to answers in FAQ pages.
• Jumping to product info on shop pages.

Button Links for Action Steps

Button links look like buttons but work like normal links. They are great for actions like “Sign Up” or “Buy Now.” We use HTML and add styles with CSS to make a link look like a button.

The CSS can make this look like a button with:

• A background color.
• Rounded corners.
• Extra space around the text.
• A hover effect occurs when users move their mouse over it.

For mobile users, the button should be big enough to tap easily. If we use WordPress or other tools, we might not need to write this code ourselves. Often, developers use ready-made button styles with CSS classes.

Download Links

Download links let users save a file from our site to their device.

We use the download attribute to make this happen.

This is helpful when the file (like a PDF) would normally open in the browser. With the download tag, it will save the file instead.

For other files like Excel or Word, most browsers download them automatically. So we may not always need the download attribute.

Other Important HTML Link Code for SEO

There are some special HTML link settings that are helpful for SEO. These do not make normal clickable links, but they go inside the <head> part of your page’s code. They use the <link> tag instead of the <a> tag.

Canonical Tags

Canonical tags help search engines know which page is the main one. This is useful when we have the same or very similar content on more than one page. It stops search engines from thinking we are repeating content.

It’s a good idea to add a canonical tag on every page. We do this using a tag inside thesection of the HTML.

Example:

This tells search engines:

“This page is the same as the main page at the URL above. Please give credit to that page.”

Canonical tags are useful when we have extra parts added to the URL, like:

• ?source=email
• ?sort=price

These make different versions of the same page. Canonical tags fix that problem.

Hreflang

The hreflang tag helps search engines know what language our page is in. It also tells them which region the page is meant for. This helps show the right version of our page to users in search results. Just like canonical tags, hreflang uses the tag in thesection.

Example:

<link rel=”alternate” hreflang=”en-us” href=”https://example.com/en-us” />

<link rel=”alternate” hreflang=”es” href=”https://example.com/es” />

<link rel=”alternate” hreflang=”fr” href=”https://example.com/fr” />

These lines say:

• The page is in English for the U.S.
• It’s also in Spanish and French.
• The right version should be shown depending on the user’s language.

Hreflang uses short codes like:

• en for English
• es for Spanish
• fr for French
• And region codes like the United States

We only need hreflang tags if our site has more than one language version. If we don’t serve different countries or languages, we don’t need to use it.

HTML Link Code Best Practices

Following simple link tips helps make our links easy to use, safe, and helpful for everyone. It also helps improve our website’s SEO.

Syntax

Here’s the correct way to write an HTML link:

Keep these basic rules in mind:

• Always add both opening <a> and closing </a> tags
• Use the href attribute with the URL as the value.
• Put the value inside quotation marks.
• Don’t put spaces between the attribute, equals sign, and value.

Anchor Text

Anchor text is the part of the link that people click on. It’s what users see on the page. Good anchor text tells users what they’ll get when they click the link. It also helps search engines understand the page.

When writing anchor text, try to:

• Use words that match the page you’re linking to
• Keep it short (about 2–5 words)
• Don’t use words like “click here” or “read more”
• Use keywords in a natural way

Title Attributes

The title attribute gives extra info about a link. But if our anchor text already explains the link well, we don’t need to use it.

In many cases, the title makes things harder. It may not be read by screen readers and won’t show up on phones. Sometimes it just repeats what the anchor text says.

So, unless it adds something useful, we should skip the title attribute. It’s better to write good anchor text instead.

Aria Labels

ARIA stands for Accessible Rich Internet Applications. We use aria-label to help screen readers when the link text isn’t clear. It’s helpful when a link is shown only as an icon (like a gear or a heart).

Target

The target attribute controls how a link opens. By default, links open in the same tab. This is called _self, and we don’t need to add it. If we want the link to open in a new tab, we use _blank:

Before, we also had to use rel=”noopener” with _blank, but that’s not always needed now.

Opening a link in a new tab is helpful when:

• Linking to other websites
• Showing extra info without moving away from the current page
• Letting users download files or open tools

But some people think opening new tabs can confuse users, especially on mobile or for screen reader users.

So, for links inside our own site, it’s usually better to open in the same tab.

Relationships (rel=)

The rel attribute shows how our page is connected to the page we are linking to. It is important for both safety and SEO. By default, we don’t need to add any rel value. But sometimes, we should use it.

Here are the most common types:

Sponsored Links

We use rel=”sponsored” when another company pays to place a link on our site.

For example, if we have an affiliate link to a product we promote, it’s a paid link.

That means we might earn money if users buy through it.

In this case, we should use rel=”sponsored” as Google recommends.

UGC Links

UGC means user-generated content.

Use rel=”ugc” for links in comments or forum posts.

These are links that come from users, not from us.

It tells Google we don’t support or vouch for these links.

Nofollow Links

Use rel=”nofollow” when we don’t want Google to follow or give credit to a link.

It’s useful when we don’t fully control or trust the link.

Let’s say we accept guest posts or have many writers.

If the links are not sponsored or from users, but we’re still unsure, we should use nofollow.

What About “noopener” and “noreferrer”?

The rel=”noopener” value tells the browser to open the link without giving the new page access to our current page. When we use target=”_blank” to open a link in a new tab, most modern browsers add noopener automatically. Still, we can add it ourselves if we’re linking to pages we don’t fully trust. The rel=”noreferrer” value hides where the traffic is coming from. That means the site we’re linking to won’t see that users came from our page.

Absolute vs. Relative URLs

When we write a link in HTML, we choose between absolute and relative URLs.

Absolute URLs include the full web address:

These are best in most cases. They are clear and work well no matter where the link appears.

Relative URLs look like this:

They are shorter and useful when we build many pages quickly. They are also helpful if we move our site to a new domain but keep the same structure.

For example, if we’re working on a test (staging) site that’s different from the live site, using relative URLs can save us time. We won’t have to update every link when we move the site live.

But unless we’re planning a big move or rebuild, absolute URLs are usually better and easier to manage.

How to Check Your Site’s HTML Links

We can check an HTML link by using the inspect tool in our browser. Just right-click on the link we want to check and click “Inspect”. This will open the developer console so we can see the link’s code. It’s a quick way to check if our link has the right attributes and rel values.

FAQs

1. Why are HTML links important for SEO?

HTML links help search engines crawl your site and pass authority, making them essential for ranking.

2. Can I add a link to an email address in HTML?

Yes. Use a mailto: link like: Email Us to open the user’s email app.

3. What is the difference between a hyperlink and a URL?

A URL is the web address, while a hyperlink is the clickable element that takes you to that URL.

4. Can I link to a specific part of a webpage?

Yes. Add an ID to the section, then link to it using a hash (#) to create an anchor/jump link.

5. Do HTML links help with SEO?

Yes. Both internal and external links help search engines discover your pages and understand their importance.

6. What does “nofollow” mean in HTML links?

It tells search engines not to pass ranking value to the linked page, often used for untrusted or user-generated links.

7. What happens if I use a broken link?

Broken links hurt user experience and can signal poor site maintenance, which may affect SEO negatively.

8. Can I add links to a button instead of text?

Yes. Style an <a> tag with CSS to look like a button—this is the best and most SEO-friendly method.

9. Why is the canonical tag important?

It prevents duplicate content issues by telling search engines which page is the main, authoritative version.

10. What is the best practice for writing link text?

Use clear, descriptive anchor text that tells users what to expect—avoid vague terms like “click here.”