For my webpage I wanted to create some outgoing links in the footer. A friend of mine noted that the user experience was not perfect. When clicked, the links did not open in a new tab. In the standard settings, people would leave my site and be directed e.g. to my social media links. This bears the risk that users will leave the page and not return. In the SEO ranking of websites, for example, user time plays a role, so outgoing links should always open in a new window or tab.
In the following, an example of a hyperlink that displays “1984” and leads to the Wikipedia article.
<p><a href="https://en.wikipedia.org/wiki/Nineteen_Eighty-Four">1984</a></p>
The problem is, that the used HTML code caused the Wikipedia article to open in the same tab.
Solution: target=”_blank”
However, I found an easy way to use HTML code to create a hyperlink that “forces” the link to open in a new tab or window with a “new page” HTML-attribut. I used the following HTML code:
<p><a href="https://en.wikipedia.org/wiki/Nineteen_Eighty-Four" target="_blank">1984</a></p>
Therefore, the target attribute “_blank” tells the browser to open the link in a new tab or window. Thus, to prevent tabnapping, it is recommended to add rel=”noreferrer noopener” to the code.
<p><a href="https://en.wikipedia.org/wiki/Nineteen_Eighty-Four" target="_blank" rel="noopener noreferrer">1984</a></p>
Picture: https://pixabay.com/de/vectors/broken-link-link-rot-2367103/