How to open link (a href) in new tab instead of loading url on same page?

Hello, I was working on HTML and would like to know how can I open anchor link ( HTML ) in a new tab instead of loading URL on the same page? Suppose this is my anchor tag HTML

<a href="URL">Open in new tabs</a>

Thanks.

Asked by:- jon

: 9500 At:- 8/1/2018 1:23:39 PM

HTML open link in new tab html

add comment to question

3 Answers

Answered by:- Vinnu

You can simply use target="_blank" to open new tab and your link it, here is the sample HTML

<a href="URL" target="_blank">Open in new tabs</a>

<a href="http://www.example.com/" target="_blank" rel="nofollow noopener noreferrer">Click Here to open new window</a>

In the above HTML target attribute specifies where to open the linked document, other values of target attribute is as below

Value	Description
_blank	Opens the linked document in a new window or tab
_self	Opens the linked document in the same frame as it was clicked (this is default)
_parent	Opens the linked document in the parent frame
_top	Opens the linked document in the full body of the window
framename	Opens the linked document in a named frame

To prevent tabnabbing, add the rel="noopener no referrer" attribute to the links opening in a new tab

If you want to open a button in new window you can use code below

<button class="btn btn-primary" onClick="window.open('http://www.example.com');">
     Open
</button>

Thanks.

At:- 8/2/2018 6:54:54 AM Updated at:- 9/27/2022 7:39:08 AM

excellent answer with proper details, thanks 0

By : jon - at :- 8/20/2018 3:30:13 PM

comment to above answer

Answered by:- vikas_jk

Above answer is correct, but here are multiple version of opening a link in new tab

Using HTML

<a href="example.com" target="_blank">This link will open in new window/tab</a>

Using jQuery

By Selecting all anchor tags which has rel="external", set attribute

<script type="text/javascript">
    $('a[rel="external"]').attr('target', '_blank');
</script>

If you want to create anchor dynamically and open in new tab using Javascript, check https://qawithexperts.com/questions/142/how-to-open-new-tab-using-javascript-or-jquery-and-open-href

Open all href links in tab

If you want to open all links in new tab for entire website, you can use the below code in <head> HTML tag

<head>
  <title>Some Text</title>
  <base href="https://www.exampleBaseURL.com/" target="_blank" rel="noopener noreferrer">
</head>

Instead of adding "target='_blank'" for each link, you can use base tag in HTML head.

At:- 6/23/2020 2:45:16 PM

Good solution but I think we should open href without jQuery using HTML only. 0

By : Vinnu - at :- 6/22/2022 3:32:52 PM

comment to above answer

Answered by:- bhanu

Above answers work, but if you want you can use "base" tag in HTML head to open all links in new tab

here is an example

<head>
  <title>your text</title>
  <base target="_blank">
</head>

<body>
  <a href="qawithexperts.com">Links open in new tab using base Tag</a>
</body>

But base tag doesn't support "rel='noopener noreferrer'", so you need to use in your anchor tag, if needed.

At:- 5/29/2021 2:47:18 PM