Grow your CSS skills. Land your dream job.

Last updated on:

Open Link in a New Window

HTML attribute (valid in HTML5 now):

<a href="http://chriscoyier.net" target="_blank">This link will open in new window/tab</a>

Inline JavaScript way:

<a href="http://chriscoyier.net" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;">This link will open in new window/tab</a>

With jQuery:

See here

Comments

    • I think some code might have gotten stripped there. Feel free to email me at chriscoyier@gmail.com to fix.

    • Driews
      Permalink to comment#

      <a href="http://google.es&quot; onclick="window.open(this.href); return false;">This link will open in new window/tab</a>

    • ks
      Permalink to comment#

      Hi,

      Using the second approach opens the href in my current (parent) window too. i.e. my current window and new window both points to href value. I don’t want my parent window to be changed

    • Ini
      Permalink to comment#

      My purpose was to open a link in new window,

      i tried this, but my parent window(which has link) becomes blank when i click on the link.

    • It doesn’t work because it should be:

      onclick=”window.open(this.href,’_blank’); return false;”

  1. helen
    Permalink to comment#

    Target-blank is not strict xhtml (it might be considered as behaviour that should not be placed in the mark-up) and it can make people angry when used on every link, especially the internal ones. But sometimes it can be useful, if there’s an external link among many internal links.
    Personally I prefer to use CSS-Content to set a “(ext)” behind those links via auto-detection (attr).

  2. Ant

    I’d say it’s a bad practice. Because if I want to open link in new window, jsut press shift+mouse key. Or middle button (to open in new tab).

    • phoenix
      Permalink to comment#

      I’d say it’s the best practice to use target=”_blank”, because it simply works.
      There are people who don’t know that you can press the middle mouse button or other shortcuts. Nobody will see it at the end. Why should I not break the rule on this point?

    • How with auto open in new windows?

      sorry, i’m newbie in CSS :D

  3. Thanks! PDFs don’t seem to honor _blank.

  4. This snippet was very useful, thank you!

  5. I think this article is misleading, it clearly states that target=”_blank” is invalid which isn’t true. It’s perfectly valid in both HTML5 and XHTML 1.0 Transitional. It’s only invalid in the strict DTD, but who uses that?
    There’s no real reason not to use the target attribute, every browser supports it and will support it for the foreseeable future. And besides, why use JavaScript for something that the browser can do natively?

  6. r

    any benefit/downside to using html instead of JS or vice versa?

  7. David
    Permalink to comment#

    This sort of thing should br strongly discouraged. Only ever should a website had a teeny tiny sprinkle of target="_blank" atop its icing. It is entirely the user’s choice as to whether they want another tab/window opened or not. It doesn’t matter if some users don’t know how to click with the middle-button; who are we to force new tabs upon those who do know how to open links in new tabs for the sake of the few ignorant users out there.

    I’ve come across quite a few websites where links open in new tabs when they just shouldn’t and it’s frustrating, because I wanted the link to open in the current tab.

    Leave target="blank" alone unless you absolutely need it.

  8. Vamsi
    Permalink to comment#

    Perfect! exactly what i’m looking for. thanks :)

  9. Cassandra
    Permalink to comment#

    There actually IS a need for links to open in a new windows… sometimes. I am designing and coding a site which collects data from users which requires them to upload files (images and pdf documents). The overall process involves employees filling out a form and then uploading receipt scans/images for reimbursement. This needs to be viewed by an admin intranet site within the office. I have a nice page displaying the claim in a cute form, easily printable if required, and links to the relevant file uploads.

    I don’t want those links to take over the parent window. They are additional info to the data displayed in the parent window, so they are required to open in a new window or tab (based on browser preference settings) while leaving the parent windows alone. Frequently both windows will be examined and compared together. Hard to do if only one is open at a time!

    And no, our accounts team are not IT knowledgeable enough to recognise how/when to choose to open a link in a new windows. They expect it done for them. And quite rightly so too.

    Having said that, this is a rare case and I would not normally utilise this in any other way or for any other reason. It bothers me that using target=”_blank” is not acceptable in strict html5 mode. I always code my html/css/php to perfect strict acceptance levels. Well…. I did until now. This is the exception. :/

  10. Jason
    Permalink to comment#

    Add this to the href

    rel=”external” onclick=”this.target=’_blank';”

    Works with strick

  11. Permalink to comment#

    Considering the title of this site, wouldn’t it be good to have used a CSS trick? Like a[href^="http"] to style the links differently, perhaps with an icon in the background-image?

  12. Mikhail

    onclick=”return !window.open(this.href);”

  13. Permalink to comment#

    This also works: target=”new”

  14. Permalink to comment#

    This also works: target=”new” :)

  15. frank
    Permalink to comment#

    I’ve tried all of these and it’s unpredictable . Sometimes target=_blank will work but some browsers choose to ignore this attr. Here’s more people with the same issue stackoverflow link

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".