Have you ever clicked a link on a website, and it’s opened on a new tab in the browser? If you’ve been wondering how you can do that with your links, this article will act as your guide.
Prerequisites
To follow and completely understand this guide, you will need to have:
- A web browser (I’m using Google Chrome).
- Basic understanding of HTML tags and attributes.
- A text editor (I'm using Visual Studio Code).
Introduction
What is the <a> tag?
The <a> tag (also known as the anchor element or the <a> element) is an HTML tag that defines a hyperlink, which is used to point from one webpage to another. The anchor element has several attributes, but we will focus specifically on the href and target attributes in this article and a little of the rel attribute.
What are attributes?
Attributes in HTML are special words used inside the opening tag of an element to control the element's behavior. HTML attributes are a modifier of an HTML element type.
What do the href and target attributes do?
- href - Specifies the URL of the page the link goes to
- target - Specifies where to open the linked document
Using the “href” attribute
The href attribute specifies the URL of the page the link goes to when it’s clicked. Below is an example of how to use the href attribute within the <a> element:
<a href="https://www.dev.to/devwraithe">My profile</a>
The above code consists of the <a> element which specifies the element as a hyperlink, the href attribute, which wraps the URL to point to and the line of text between the opening and closing tags which is the clickable link of the hyperlink.
- Page 1:
- Page 2, opened in the current tab:
Using the “target” attribute
The target attribute specifies where to open the linked document. If the link is clicked while the target attribute is present, the value of the target attribute will instruct the browser on where it will open the link.
<a href="https://www.dev.to/devwraithe" target="_blank">My Profile</a>
The target attribute and the value “_blank” included in the <a> element above basically states that “when this link is clicked, open the URL in a new tab”. However, this attribute has some drawbacks, but we’ll discuss how you can prevent these drawbacks in the next section.
- Page 1:
- Page 2, opened in a new tab:
Security concerns and the target=”_blank” attribute
It is recommended that whenever the target="blank" attribute is present in an anchor element, you should include the rel="noopener noreferrer" attribute to prevent a type of phishing known as Tabnabbing. The rel attribute helps to specify the relationship between the current document and the linked document.
Conclusion
It’s straightforward to use the HTML anchor element to open links in a new browser tab. As you have learnt in this article, all you need are three simple, easy-to-remember attributes:
- The href attribute sets the URL of the page you want to link to.
- The target attribute is set to “_blank” to tell the browser to open the link in a new tab (or window, depending on the browser settings).
- The rel attribute is set to “noreferrer noopener” to prevent malicious attacks from the pages you link to.
If you have any questions concerning this article or other frontend-related topics, do not hesitate to contact me either on Twitter or LinkedIn.
Top comments (0)