To create a hyperlink in HTML use the
<a href> tag around the text you would like to link. The
href attribute will point to the desired address.
When you’re building a webpage, 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 to the topic you have covered.
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, how to set targets for links, and how to create anchors for bookmarks.
Hyperlink in HTML
HTML, links have two ends, which are referred to as anchors. All text between the ends of a link will point to the destination of the link, which could be any web item, such as a web page, a PDF, or another part of the webpage a user is currently visiting.
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
Hyperlinks are created using the
<a> tag. Here’s the syntax for a
hyperlink in an
<a href="your_url">This text will go to a URL.</a>
The text between our
<a> tags will link to the URL that we specify in our opening
<a> tag. We use the
href attribute to choose the target of the URL, which may 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>
If we wanted to reference an object on our own sites, such as an image or a download file, you could use relative URLs. These URLs only include the file path names for a file, like so:
<a href="downloads/logo.png">Logo download.</a>
hyperlink would refer to the web resource at
downloads/logo.png on your website. So, if you wanted to allow a user to download an image, you could use that syntax.
Often, when you’re creating a link, you’ll want it to open in a specific way. For example, you may want a link to open in a new tab in the user’s web browser so that the user does not lose their place on the web page they’re currently viewing.
That’s where the link
HTML 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
_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>
HTML can also reference a specific part of an
HTML document, which can be 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 webpage:
<h3 id="subtitle3">Subtitle 3</h3>
We have given the
<h3> 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>
As you can see, instead of specifying a URL in our
href tag, we specify the ID of the element we want to link to and add a hash sign before that id (#).
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, how to create
hyperlink targets, and how to create bookmark anchors.
With all of this information, you’re ready to create
HTML like a master!