Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Web Dev Best Practices: Implicit target=''_blank''

DZone 's Guide to

Web Dev Best Practices: Implicit target=''_blank''

A dev looks at HTML and JavaScript behavior often used in site development and proposes a different method.

· Web Dev Zone ·
Free Resource

The target="_blank" href attributes has been been the subject of many discussions. When is it right to use it? Should we use it at all? Is it actually deprecated? Is it good user experience? Does it break user expectations? Etc.

And I have a strange proposal for improving the standard behavior in browsers — implicit target=_blank" in certain contexts. But let's try to list when target="_blank" is a good idea:

  • On pages with forms when the user may need additional information in order to fill the form but you don't want them to leave the form and lose their input.
  • On homepage-like websites, e.g. Twitter and Facebook, where your behavior is "browsing" and opening a link here and there. It may be applied to things like Reddit or Hacker News, though it's currently not implemented that way there.
  • In comment/review sections where links are user-provided — this is similar to the previous one, as the default behavior is browsing through multiple comments and possibly following some of them.

The typical argument here is that if a user wants to open a new page, they can do that with either the context manu or ctrl+click. Not many users know that feature, and even fewer are using it. And so many of these pages are confusing, and combined with a sometimes broken back-button it becomes a nightmare.

In some of these cases, JavaScript is used to make things better (and more complicated). In the case of forms, JavaScript is added to warn people against leaving the page with an unfinished form. JavaScript is used to turn certain links to target="_blank" ones. Some people try to open new tabs with JavaScript.

So my proposal is to introduce a with the following values for open-links and on-form:

  • open-links="new-tab" - open a link tab for each link on the page or in the current div/section/...
  • open-links="new-window" - same as above, but open a new window (almost never a good idea).
  • open-links="new-tab-on-form" - only open a new tab if there a form on the page (possibly another requirement can be that the form is being partially filled).
  • open-links="new-window-on-form" - same as above, but with a new window.
  • open-links="warn-on-form" - open the link in the same tab, but if there's a partially filled form, warn the user they will lose their input.

The default value, I think, should be new-tab-on-form. Security has to be considered, as malicious pages may affect the page that used target="_blank".

It might introduce new complexities and may confuse users further. But I think it's worth trying to fix this important part of the web rather than leaving each website handle it on their own (or forgetting to handle it).

Topics:
web dev ,front-end development ,best practices ,javascript ,html tutorial

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}