How to Open Links in New Windows or Tabs with HTML5

By Ed Tittel, Chris Minnick

The web works because you can link pages on your website to pages on other people’s websites by using a simple anchor element. When you link to someone else’s site, though, you send users away from your own site.

To keep users on your site, HTML can open the linked page in a new window or in a new tab inside the same browser window. (Internet Explorer, Firefox, Chrome, and other browsers open new tabs. You can set Internet Explorer and other browser preferences to open in a new window instead of a new tab if you prefer.)

The simple addition of the target attribute to an anchor element opens that link in a new browser window (or tab) instead of opening it in the current window:

<p>The <a href="http://www.w3.org" target="_blank">World Wide Web Consortium</a>
is the standards body that oversees the ongoing development of the XHTML
specification.</p>

When you give a target attribute a _blank value, this tells the browser to do the following:

  1. Keep the linking page open in the current window.

  2. Open the linked page in a new window or tab.

The result of using the target=”_blank” attribute is shown in the figure, which depicts a new tab open for the W3C site.

image0.jpg

Pop-up windows irritate some users. Use them with care — and sparingly. You can use JavaScript to control the size, location, and appearance of pop-up windows as well as to put buttons on them to help users close them quickly. Check out Dr. Dobb’s article “Introduction to JavaScript Pop-up Windows” for all the details on how to manage window appearance, size, and position on the screen when it appears.