How to make HTML open a hyperlink in another window or tab?
<a href="http://www.starfall.com/" target="_blank">Starfall</a>
Whether it opens in a tab or another window though is up to how a user has configured her browser.
How to open link in a new tab in HTML?
Set the target
attribute of the link to _blank
:
<a href="#" target="_blank" rel="noopener noreferrer">Link</a>
For other examples, see here: http://www.w3schools.com/tags/att_a_target.asp
Note
I previously suggested blank
instead of _blank
because, if used, it'll open a new tab and then use the same tab if the link is clicked again. However, this is only because, as GolezTrol pointed out, it refers to the name a of a frame/window, which would be set and used when the link is pressed again to open it in the same tab.
Security Consideration!
The rel="noopener noreferrer"
is to prevent the newly opened tab from being able to modify the original tab maliciously. For more information about this vulnerability read the following articles:
- The target="_blank" vulnerability by example
- External Links using target='_blank'
Open link in new tab or window
You should add the target="_blank"
and rel="noopener noreferrer"
in the anchor tag.
For example:
<a target="_blank" rel="noopener noreferrer" href="http://your_url_here.html">Link</a>
Adding rel="noopener noreferrer"
is not mandatory, but it's a recommended security measure. More information can be found in the links below.
Source:
- MDN | HTML element
<a>
| attributetarget
- About rel=noopener
- Opens External Anchors Using rel="noopener"
Make a link open a new window (not tab)
With pure HTML you can't influence this - every modern browser (= the user) has complete control over this behavior because it has been misused a lot in the past...
HTML option
You can open a new window (HTML4) or a new browsing context (HTML5). Browsing context in modern browsers is mostly "new tab" instead of "new window". You have no influence on that, and you can't "force" modern browsers to open a new window.
In order to do this, use the anchor element's attribute target
[1]. The value you are looking for is _blank
[2].
<a href="www.example.com/example.html" target="_blank">link text</a>
JavaScript option
Forcing a new window is possible via javascript - see Ievgen's excellent answer below for a javascript solution.
(!) However, be aware, that opening windows via javascript (if not done in the onclick event from an anchor element) are subject to getting blocked by popup blockers!
[1] This attribute dates back to the times when browsers did not have tabs and using framesets was state of the art. In the meantime, the functionality of this attribute has slightly changed (see MDN Docu)
[2] There are some other values which do not make much sense anymore (because they were designed with framesets in mind) like _parent
, _self
or _top
.
Opening a link in the same tab with html
<a target="_self" href="https://www.youtube.com" >YT player</a>
Related Topics
Number Input - Always Show Spin Buttons
What Client-Side Web Scripting Languages Are There Other Than JavaScript and Vbscript
CSS Making Two Divs Equal Height with Display Table
Background-Image CSS Inside an HTML Email - Gmail Does Not Support
Always Show Vertical Scrollbar in <Select>
Degrading -Webkit-Text-Security
Hide Element, But Show CSS Generated Content
When Multiple Instances of Same Images Are Embedded in an HTML, Does That Load The Image Once
Multiple Select in Safari iOS 7
CSS: Align Two Element, to The Left and Right in The Same Line Whithout Floats
Chrome Auto Formats Input=Number
Ordered List Showing All Zeros in Ie9
Reset Particular Input Element in a HTML Form