The Anchor Element
To create a link on a web page, you need to wrap an anchor (<a>) element around text, then set its href attribute to the URL you want to link to.
<p>Check out <a href=”https://www.jj.org/”>jj</a>.</p>
If you click on the link above, the browser will open the link in the current window or tab. This is the default behavior in every browser.
To open a link in a new tab, we’ll need to look at some of the other attributes of the anchor element’s other attributes.
The Target Attribute
This attribute tells the browser how to open the link.
To open a link in a new tab, just set the target attribute to _blank:
<p>Check out <a href=”https://www.jj.org/” target=”_blank”>jj</a>.</p>
Now when someone clicks on the link, it will open up in a new tab, or possibly a new window depending on the person’s browser settings.
Security concerns with target=”_blank”
I strongly recommend that you always add rel=”noreferrer noopener” to the anchor element whenever you use the target attribute:
<p>Check out <a href=”https://www.jj.org/” target=”_blank” rel=”noopener noreferrer”>jj</a>.</p>
This results in the following output:
The rel attribute sets the relationship between your page and the linked URL. Setting it to noopener noreferrer is to prevent a type of phishing known as tabnabbing.