The HTML anchor tag is used to create a hyperlink to other web resources. It’s created with the
<a> tag, and uses the
href attribute to point to a URL.
When you’re creating a web page in HTML, you may decide that you want to add in a link to another page, an email address, an address, or a file on your page.
For instance, if you’re creating a contact page for a local tailor store, you may want to include a link to an email address and a link to a page with directions to the store. That’s where the HTML anchor tag, or
<a> tag, comes in.
<a> tag is used to create a hyperlink to other web resources. This tutorial will discuss, with reference to a few examples, how to create links in HTML using the anchor tag. By the end of reading this tutorial, you’ll be an expert at using the HTML anchor tag.
Links, or hyperlinks, are connections between one web resource and another. Links allow users to navigate to any other web page on your site, or to another server entirely. When you hover over a link on a website, the cursor will turn into a hand.
In HTML, links have two ends, which are referred to as anchors. These anchors are defined using the
<a> tag. An HTML anchor can be pointed toward any web resource, such as an image, a PDF file, an email address, or another web page.
Here’s the syntax for the
<a> tag in HTML:
The href attribute is used to specify the destination of the link.
Let’s walk through an example to illustrate how the
<a> tag works in action. Suppose we wanted to create a link that points to the Career Karma homepage. We could do so using this code:
<a href="https://careerkarma.com/">Career Karma homepage</a>
In this example, we have created a link to the web resource “https://careerkarma.com/”. This link can be activated when we click on the link text enclosed within the
<a> tag, which in this case is
Career Karma homepage. So, when we click on our text, we will be sent to the Career Karma homepage.
Here’s the result of our code:
HTML Anchor Examples
As we discussed earlier, an HTML anchor can point to any one of a wide range of web resources. Let’s walk through how the
<a> tag can be used to point to a few of the most common web resource types you may want to link to in your code.
An absolute URL is an anchor link that uses every part of the URL format.
This means that the URL includes a protocol (i.e.
https://), host name (i.e.
careerkarma.com), and file path (i.e.
Absolute URLs are usually used if you are pointing to a resource that is outside of your website. So, suppose we wanted to create a link to the Google homepage. We could do so using this code:
When we click on the word
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.
<a> 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 and will ask them 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:email@example.com">Send an email to us!</a>
When we click our link, our email program opens up and asks us to send an email to “firstname.lastname@example.org”.
Link to an Element
The anchor tag can be used to link to an element on a web page 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>
Our code returns:
When we click on our link, our web page scrolls down to the element with the id
HTML Anchor Target
The target attribute is used with the
<a> tag to specify where to open the linked document. The target attribute can have one of five potential values, which are as follows:
- _self opens the web document in the same window or tab as it was clicked (this is the default value for the target attribute).
- _blank opens the web document in a new window or tab.
- _parent opens the web document in the parent frame.
- _top opens the web document in the full window body.
- any other value opens the linked document in a named frame.
Suppose we are creating a link to the Career Karma home page. We want this link to be opened in a new tab. We could create this link using the following code:
<a href="https://careerkarma.com/" target="_blank">Career Karma homepage</a>
When this link is clicked, the user will be presented with the Career Karma homepage in a new tab.
HTML Image Link
Any element can be enclosed within an
<a> tag. In our previous examples, we have only used an
<a> tag to create anchored text, but we could also link an image, or another HTML element to another web resource using an anchor.
Suppose we have an image that we want to link to the Career Karma homepage. We could do so using this code:
<a href="https://careerkarma.com/"> <img src="logo.png"> </a>
In this example, our web page will load an image called
logo.png. Then, when this image is clicked, the user will be redirected to the Career Karma homepage.
<a> tag is used to create links between web resources on a web page. HTML anchor tags can be used to add a link to any web element, such as text or an image. Anchor tags can point to any type of web resource such as a phone number, an email address, or another website.
This tutorial discussed, with reference to a few examples, how to use the HTML anchor tag. Now you have the knowledge you need to start using the HTML anchor tag like an expert!