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

    • User Avatar
      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.

    • User Avatar
      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>

    • User Avatar
      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

    • User Avatar
      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.

    • User Avatar
      Alex Westergaard
      Permalink to comment#

      It doesn’t work because it should be:

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

    • User Avatar
      FUQR

      it doesnt though

  1. User Avatar
    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. User Avatar
    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).

    • User Avatar
      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?

    • User Avatar
      Much007
      Permalink to comment#

      How with auto open in new windows?

      sorry, i’m newbie in CSS :D

  3. User Avatar
    Jason

    Thanks! PDFs don’t seem to honor _blank.

  4. User Avatar
    Aleksandra
    Permalink to comment#

    This snippet was very useful, thank you!

  5. User Avatar
    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. User Avatar
    r

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

  7. User Avatar
    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. User Avatar
    Vamsi
    Permalink to comment#

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

  9. User Avatar
    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. User Avatar
    Jason
    Permalink to comment#

    Add this to the href

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

    Works with strick

  11. User Avatar
    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. User Avatar
    Mikhail

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

  13. User Avatar
    Ruud
    Permalink to comment#

    This also works: target=”new”

    • User Avatar
      Indeep
      Permalink to comment#

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

  14. User Avatar
    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. User Avatar
    Sanjib Saha
    Permalink to comment#

    We have this option target=”_blank”

  16. User Avatar
    Bladeshatter
    Permalink to comment#

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

  17. User Avatar
    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.

    • User Avatar
      HarBeK
      Permalink to comment#

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

    • User Avatar
      Gopal
      Permalink to comment#

      Hello HarBek…
      You can use target=”_anything” ….This is not complusory to use “new” after underscore….because this is not a keyword..Any browser can take it as command to open new window.. :)

  18. User Avatar
    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?

    • User Avatar
      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.

  19. User Avatar
    Philip
    Permalink to comment#

    Hi This will not open a new tab

    all other links on the page work with the the Target-blank attribute, just not this one. I have one other https: on the page other wise they are all http: any help would be much appreciated. and housekeeping questions about if you should use this or not is not relevant. the page is built with the Target attribute, sorry No insults intended

  20. User Avatar
    Adrian
    Permalink to comment#

    This page is called “CSS-TRICKS” but I can’t find the CSS.

    target=”_blank” is not CSS.

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag