Treehouse: 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

    • Chris Coyier
      Permalink to comment#

      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.

    • Alex Westergaard
      Permalink to comment#

      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?

    • Much007
      Permalink to comment#

      How with auto open in new windows?

      sorry, i’m newbie in CSS :D

  3. Jason

    Thanks! PDFs don’t seem to honor _blank.

  4. Aleksandra
    Permalink to comment#

    This snippet was very useful, thank you!

  5. Valentin

    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. Lee Gee
    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. Ruud
    Permalink to comment#

    This also works: target=”new”

    • Indeep
      Permalink to comment#

      This is not a valid code target=”new” better use target=”_blank”

  14. 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

  15. Sanjib Saha
    Permalink to comment#

    We have this option target=”_blank”

  16. Bladeshatter
    Permalink to comment#

    Best option so far and easiest i found is target=”_blank”

  17. HarBeK
    Permalink to comment#

    So far… my use of say whatever here

    has usually always worked on every browser. target=”new” not so much however but target=”_new” usually does.

    • HarBeK
      Permalink to comment#

      for the _new to not be working here is something to do with their coding snippets.

  18. Mark

    This topic is missing something important. Is there a way using CSS and HTML to open internal links in same window and external links in new window? No or yes, and if yes, how?

    • Mark

      I should add that attributes are as far as I have got.

      a[href^=”http”]… but I feel kinda dumb about how next to set the content property, and/or whatever else is required.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```