How to Create a Hyperlink in HTML

A HTML hyperlink lets you navigate to a different page. An <a> tag defines an anchor. The “href” attribute specifies the location a user will be taken to when they click the link. Between the <a> and closing </> tags is the anchor text which will be shown to the user.

When you’re building a web page, you may want to reference another web page or website. For example, you may be creating a blog and want to link to an article that you think is relevant.

Hyperlinks, or links, are used to connect one web page to another and allow users to move between multiple web pages quickly. Hyperlinks can be used to link to other pages on your own site or pages on different websites.

In this guide, we are going to break down the basics of hyperlinking in HTML. We’ll talk about how to set targets for links, how to create anchors for bookmarks, and linking to email addresses and web elements.

HTML Hyperlink

A HTML hyperlink points to another web resource. A hyperlink is defined between an <a> tag and a closing </a> tag. The text between these two tags takes a user to the linked web resource when the link is clicked.

Hyperlinks are created using the <a> tag. Here’s the syntax for a hyperlink in an HTML file:

<a href="your_url">This text will go to a URL.</a>

The text between our tags will link to the URL that we specify in our opening tag. We use the href attribute to choose the target of the URL. This could be an absolute URL or absolute link such as https://www.careerkarma.com or a URL relative to somewhere on our site.

Here is an example of a link that points to the Career Karma home page’s web address:

<a href="https://www.careerkarma.com">Career Karma</a>

HTML Hyperlink Tag Types

There are three types of links that may appear in a browser. These are as follows:

• Unvisited links, which appear in blue
• Visited links, which appear in purple
• Active links, which appear in red

Some websites overwrite these colors, which means they appear differently, but those are the main types of links that you can style in HTML.

Hyperlink HTML: Targets

You can change how a link is opened. For example, say you want a link to open in a new tab in the user’s web browser. This will make sure the user does not lose their place on the web page they’re currently viewing.

That’s where the link targetHTML attribute comes in. By using the link target attribute, you can specify where the browser should open the resource to which you have linked.

There are four types of targets you can use, which are as follows:

• _self: Visits the web resource in the same window and tab. This is the default target used in HTML hyperlinks.
• _parent: Visits the web resource in the parent window.
• _blank: Visits the web resource in a new window or tab.
• _top: Visits the web resource in a full browser window.

Here’s an example of a few of these links in action:

<a href="https://www.careerkarma.com" target="_self">This link will open in this tab.</a>
<a href="https://www.careerkarma.com" target="_parent">This link will open a parent window.</a>
<a href="https://www.careerkarma.com" target="_blank">This link will open in a new tab.</a>
<a href="https://www.careerkarma.com" target="_top">This link will open in a full browser window.</a>

Hyperlink HTML: Bookmark Anchors

Hyperlinks in HTML can also reference a specific part of an HTML document. This is useful if you have a long web page and want to direct a user to a particular place in the text.

Before you start using bookmark anchors, you first need to define an ID attribute on the element where you want the user to go. Here’s an example of declaring an ID attribute on a title in a web page:

<h3 id="subtitle3">Subtitle 3</h3>

We have given the HTML heading tag the id subtitle3, which we can then use to reference it in a hyperlink.

Here’s an example of a hyperlink that references this heading:

<a href="#subtitle3">Go to Subtitle 3</a>

Instead of specifying a URL in our href tag, we specify the ID of the element we want to link to. We add a hash sign before that id (#) so the browser knows the linked document is on our web page.

HTML Anchor Tag

A HTML anchor tag refers to the tag. This tag links a user to another web resource. The “href” attribute defines the resource to which a user will be taken when they click the link.

HTML Anchor Tag Examples

Let’s walk through a few examples of using the HTML <a> tag.

Relative URLs

If you are linking to a resource on the same HTML document as you are developing, you can use a relative URL. Relative URLs are also referred to as local links and do not use the “https://www.sitename.com” syntax. Instead, relative URLs point to the file path of a specific web resource on the local server.

Suppose we were creating a link on the Career Karma website which should point to our blog. Instead of using an absolute URL, we could use a local URL, because our site is the Career Karma site. Here’s the code we would use to create this link:

<a href="/blog">Career Karma blog</a>

When we click on the text Career Karma blog, we are sent to the /blog resource on our site.

Email Address

The anchor tag can also be used to link to an email address. When a link to an email address is clicked, the user’s default email program will be opened. The user will be asked if they want to send a message to the email address you have specified.

To link to an email address, we need to start our link with the mailto: protocol. Here’s an example of linking to an email address in HTML:

<a href="mailto:nothing@google.com">Send an email to us!</a>

When we click our link, our email program opens up and asks us to email “nothing@google.com”.

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

Find Your Bootcamp Match

Link to an Element

The anchor tag can link to an element on a web page. You can create this link by specifying the id of the element to which the anchor should point. Suppose we wanted a link to take our user to the heading Test Heading on a web page. We could create this link using the following code:

<a href="#test_heading">Jump to Test Heading</a>

<h2 id="test_heading">Test Heading</h2>

When we click on our link, our web page will scroll down to the element with the id test_heading.

Conclusion

Hyperlinks can be used in HTML to link one web page or resource to another. You can use hyperlinks to connect to resources on your site, or on any other website. In this guide, we have broken down how to use hyperlinks in an HTML document.

With all of this information, you’re ready to create hyperlinks in HTML like a master!

To learn more about coding in HTML, read our How to Learn HTML guide.