Use HTML to Open a Link in a New Window

Don't you hate it when you click a link on a page and up pops a new window. Even worse, you leave a site and up pops a window reminding you to come back soon, or visit their sponsor or whatever.

Why do they do that? If it's so irritating, then why am I going to show you how to do it?

In fact it's a very useful technique and, used sparingly, can be helpful to your visitors. One of its main uses it to avoid 'losing' a visitor. For example, in the middle of one of your pages you have a link to another site. Your visitor follows the link... and doesn't come back. You've lost them!

Web designers overcome this problem in all sorts of ways. They sometimes put all their external links on a separate page - not very helpful for the visitor but they are less likely to go until they have finished with you. Another technique is to use frames - the visitor clicks a link which then opens in a separate frame on the same page so that they view the other site from within yours. But lots of people don't like frames - it might make it difficult for them to 'escape' from your site, and they might not know how to 'bookmark' the new site. Perhaps frames just don't suit the design of your page.

The answer is of course... a new window!

New Windows with HTML

Forcing a link to open in a new window is simply a matter of adding an additional attribute to the link's code. Suppose you have a straightforward link to a page. The visitor sees something like...

Visit Fontstuff today!

Here's the code...

<p>Visit <a href="http://www.fontstuff.com">Fontstuff</a> today!</p>

Now let's modify the link to force it to open the linked page in a new window. What the visitor sees is no different...

Visit Fontstuff today!

...but when they click the link a new browser window opens displaying the linked page inside. Here's the code...

<p>
Visit <a href="http://www.fontstuff.com" target="_blank">Fontstuff</a> today!
</p>

The addition of the TARGET attribute to a hyperlink lets you dictate where the linked page opens. To open a new page I have used target="_blank" but there are others...

target="_blank"	Opens the linked page in a new window.
target="_self"	Opens the linked page in the same window. This is the default for ordinary pages and doesn't need to be specified. It has a use when working with frames.
target="_parent"	Opens the linked page in the parent frame in a frames page.
target="_top"	Opens the linked page in a full (i.e. top level) window when used in frames pages. This one is useful for letting a linked page 'break out' of a frame.

In fact, you can insert any window name that you might have defined elsewhere. Using the JavaScript technique outlined below you could create a new window with a particular name, then use this method to cause all subsequent linked pages to open in it. (Find out how to do this and check out the demo!)

Setting a Default

If you want all the links on your page to open in a new window you don't have to modify every one. It's a simple matter to apply a default setting for the page so that all the links behave the same way. Here's how...

Insert the following code...

<base target="_blank">

...into the header of your document's HTML (i.e. anywhere between the <head> and </head> tags but not inside any other pairs of tags already there). You can substitute "_blank" with one of the other names if appropriate.

How FrontPage Does It...

FrontPage 2002, FrontPage 2000 and FrontPage 98

Select the text you want to hyperlink (or the link you want to edit) and choose Insert > Hyperlink. In the Edit Hyperlink dialog box find Target Frame: and click the Change Target Frame button. The Target Frame dialog box offers a list of common targets, or you can enter your own. For a new window select New Window and you'll see _blank appear in the Target Setting box. Click OK twice and it's done.

To set a default, check the Set as page default box and all links on that page will work the same way.

If you have already made your hyperlinks, you can quickly set the default from the Page Properties dialog box. Choose File > Properties (or right-click on the page and choose Page Properties...) and on the General tab find Default Target Frame. Click the Change Target Frame button and proceed as described above.

FrontPage Express

Select the text you want to hyperlink (or the link you want to edit) and choose Insert > Hyperlink. In the Edit Hyperlink dialog box click in the Target Frame: box and type "_blank" (without the quotes). Click OK.

To set a default target for all the links on the current page choose File > Page Properties (or right-click on the page and choose Page Properties...). Find Default Target Frame and enter the target name as above.

For complete control over how and where your new window appears you can use JavaScript. Take a look at the article on Opening New Windows with JavaScript.

^ top

Hit Counter