Recently, I was browsing for stories on theringer.com, and I noticed that I was continuously being bothered by something rarely bugs me when I’m on other sites — when clicked, links that they include in their stories take you away from the story that I’m on, rather than opening up in a new tab. It’s really not much more than a minor annoyance since I can always right click the link, and select to have it open up in a new tab, but it got me thinking about how links on others of my commonly trafficked sites are set up.
On Reddit, clicking a link to a post takes you to the post on the same tab, but fortunately it always remembers your location in the feed when you’re finished looking at the post. Clicking an article on Google News causes the selected article to be opened up in a new tab. On this site, Medium, I’ve noticed that some links cause a new tab to open, while others do not. However, whenever I click a link, I always have an expectation as to whether a new tab will open, or not, when I click a link. Because of this, I am rarely surprised, except for when I click a link on The Ringer that takes me away from the article I was reading, causing me to lose my place. These design choices made by the developers were done for a reason, but it’s often difficult to see those, as any one person could have different expectations when clicking a link. That said, in an attempt to educate myself on the usage of HTML anchor tag I found some general guidelines, which although are not hard rules, can at least be a starting point when making decisions about the behavior of a site’s anchor tags.
The first thing that we need to establish, is how to set up an anchor tag. Commonly, an anchor tag would look something like this:
<a href='https://www.theringer.com'>The Ringer</a>
If I wanted to have the link to open up in a new tab when clicked I could edit the code to the following:
<a href='https://www.theringer.com/' target='_blank'>The Ringer</a>
And really, if we want to follow best practices when having an anchor tag open in another tab, we should add another attribute to the tag:
<a href='https://www.theringer.com/' target='_blank' rel='noopener noreferrer'>The Ringer</a>
I won’t get into the specifics of the addition of the “rel” attribute, but in short, it resolves a security issue, and a detailed description can be found here: https://mathiasbynens.github.io/rel-noopener/.
Going back to the guidelines that I’ve found for making anchor tags open in new tabs. First, it’s best to use this functionality sparingly. It goes against the default behavior, and although it may go against your own personal preference (as it does mine), the majority will likely expect the link to open in the same tab. Second, having the link open a new tab may be preferred if there is any media like audio or a video playing on the page — doing so will allow the user to hold on to their progress with the media.
As stated earlier, a lot of this comes down to a matter of opinion, as either way the link will still function, but I know that I personally have been putting more thought into the behavior of my anchor tags, and despite my preference of having links open in a new tab, am trying to get more comfortable with not doing that. Also, if for whatever reason anyone from The Ringer is reading, please change your site to meet my personal preferences…
I’ve included some more resources below. Before clicking, consider your own expectations and preferences. Would you like the link to open in the same tab, or a new one?
When to use target="_blank" | CSS-Tricks
Anchor links 1 may have a target attribute which controls what happens when that link is clicked. One of the possible…
When should you use target="_blank" on your links?
Thanks for contributing an answer to Stack Overflow! Please be sure to answer the question. Provide details and share…