HTML Open Link in New Window
You can use the HTML code on this page to force a link to open in a new window.
Example
As the above example demonstrates, to open a link in a new window, you simply add target="_blank"
to the anchor tag. Everything else stays as a normal link.
If you have many links, and you add target="_blank"
to each one, they will all open in their own blank window. This could become quite annoying for the user—especially if you have many links that each open in their own tab or window. Users could avoid clicking on links if a blank window opens every time they click.
There is a way to overcome this issue. Read on…
Reloading the Blank Window/Tab
Instead of calling your window _blank
, you can give it a name of your choosing. Then all URLs will load in that same tab (as long as you use the same name).
For example, if you have a policy of loading all external links in a separate tab, you could call that tab, say, external
. Then each link that contains target="external"
will open in that window/tab. Doing this ensures that new windows aren't going to be popping up every time a user clicks on a link.
Here's an example of what happens when you use target="_blank"
for all links:
And here are the same links but with target="external"
(but this could be any name you choose):
There are other keywords that can be used with target
as well as various implications depending on the names of windows/tabs that are already open, whether they're sandboxed, etc. See the W3C website if you're interested.
Creating a "Popup Window"
You can also use JavaScript to open a new window. Using JavaScript, you can also specify what the window should look like. This is a common technique for creating a "popup window". For more info, see Popup Windows.
More Link Codes
You can do much more with HTML links. Here are more HTML link codes - each one catering for a specific purpose.
- HTML link code
- HTML image link
- HTML email links
- About HTML links (from the HTML tutorial)
- HTML
<a>
tag - HTML redirect code
- Timed redirect (using JavaScript)
- CSS links (remove underline, hover over effect, etc)
HTML Reference
-
HTML Tutorial
Free HTML tutorial that explains how to code in HTML.
This tutorial explains what HTML elements and attributes are, and how to use them.
I explain the basics, such as what you need in order to write HTML and how to create your first web page.
I then cover other HTML topics including tables, adding color, images, forms, image maps, iframes, meta tags, and more.
I also explain the difference between HTML and CSS (and when to use each one).
Go to HTML Tutorial -
HTML Tags
Full list of all HTML elements.
This is an alphabetical list of HTML elements, linking to a full page of details for each element.
All elements are based on the official HTML5 specification, and include usage notes, full attribute list, as well as links to the various specifications for each element (i.e. HTML4 spec, HTML5 spec, WHATWG spec).
Go to HTML Tags -
CSS Properties
Full list of CSS properties.
Alphabetical list of CSS properties as per the W3C specifications.
CSS stands for Cascading Style Sheets. CSS is the standard way to style web pages.
You can use CSS to set the style for a whole website in one place. CSS allows you to set colors, fonts, widths, heights, margins, padding, and much more.
Go to CSS Properties