Dear Ms. FEWD,
I have two questions around the anchor tag’s target attribute.
1. When should a link open in a new browser tab, versus opening in the same browser window?
2. I know target=”_blank” and target=”_self”. Are there any other types, and do you have pointers on when they should be used?
Dear Target Practice,
These are fantastic questions. I typically like to stick to the following rule:
If it’s an internal link (same site/domain), I open the link in the same browser window. This keeps the flow of your site moving forward as your user views your site. For any reader that may be new to HTML, this just means to use a standard anchor link:
<a href=”url”>My link copy, same browser window</a>
If it’s an external link (different site/domain), however, I open it in a new browser tab. This way, your site doesn’t send any of your traffic to another domain. The tab for your site is still there, so that the user can go back to it and view more of your content. To open it in a new browser tab, you use the target attribute with a _blank value.
<a href=”url” target=”_blank”>My link copy, new browser tab</a>.
A full list of target attribute values are as follows, with older HTML4 frame examples from TAG Index linked:
_blank – opens in a new tab. If the browser used doesn’t have the tabbed layout, it will open in a new window. Examples of this can be found by just clicking on the next four example links – note that the domain is another site, so we have them coded as target=”_blank”, so you can come back to this tab, and read more (neat how that works, right?).
_self – default. Opens the href in the same frame
_top – Opens the linked document in the full body of the window
A good thing to have in mind when dealing with the target attribute is that it’s a hangover from the old days of HTML, when we did web layouts in frames. <frame> was finally deprecated in HTML5, even though it was considered “bad practice” by the early ‘00s. However, in the specs, we still see the terminology for the target attribute calling out frames. So, unless you’re unfortunate enough to inherit an extremely old layout that you still need to maintain, odds are you’ll only use the target attribute with the “_blank” value when it is an external link and a basic anchor tag when it’s an internal link.
Do you have a front end development question? Ms. FEWD has answers. Email her at MsFEWD@tahzoo.com.