What's the difference between <a target="_new"> and <a target="_blank"> and which should I use if I just want to open a link in a new tab/window?
Use "_blank"
According to the HTML5 Spec:
A valid browsing context name is any string with at least one character that does not start with a U+005F LOW LINE character. (Names starting with an underscore are reserved for special keywords.)
A valid browsing context name or keyword is any string that is either a valid browsing context name or that is an ASCII case-insensitive match for one of: _blank, _self, _parent, or _top." - Source
That means that there is no such keyword as _new in HTML5, and not in HTML4 (and consequently XHTML) either. That means, that there will be no consistent behavior whatsoever if you use this as a value for the target attribute.
Security recommendation
As Daniel and Michael have pointed out in the comments, when using target _blank pointing to an untrusted website, you should, in addition, set rel="noopener". This prevents the opening site to mess with the opener via JavaScript. See this post for more information.
Using target="_blank" will instruct the browser to create a new browser tab or window when the user clicks on the link.
Using target="_new" is technically invalid according to the specifications, but as far as I know every browser will behave the same way:
it will search for a tab or window with the context name "_new"
if a "_new" tab/window is found, then the URL is loaded into it
if it's not found, a new tab/window is created with the context name "_new", and the URL loaded into it
Note target="_new" will behave exactly the same as target="new", and the latter is valid HTML while the former is invalid HTML.
Adding some confusion to this, in HTML4 the target attribute was deprecated. In HTML5 this decision was reversed, and it is an official part of the spec once again. All browsers support target no matter what version of HTML you are using, but some validators will flag the use as deprecated if your doctype is HTML4.
TL;DR
USE _blank
The target attribute specifies where to open the linked document.
USAGE: target="xyz" [don't forget double quotes]
_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
SINCE "_new" is not any of these IT WILL COME UNDER "framename" so if a user re-clicks on that hyperlink it will not open a new tab instead update the existing tab. Whereas in _blank if user clicks twice then 2 new tabs open.
I know this is an old question and the correct answer, use _blank, has been mentioned several times, but using <a target="somesite.com" target="_blank">Link</a> is a security risk.
It is recommended (performance benefits) to use:
Link
This may have been asked before but:
"every link that specifies target="_new" looks for and finds that window by name, and opens in it.
If you use target="_blank," a brand new window will be created each time, on top of the current window."
from here: http://thedesignspace.net/MT2archives/000316.html
target="_blank" opens a new tab in most browsers.
it's my understanding that target = whatever will look for a frame/window with that name. If not found, it will open up a new window with that name. If whatever == "_new", it will appear just as if you used _blank except.....
Using one of the reserved target names will bypass the "looking" phase. So, target = "_blank" on a dozen links will open up a dozen blank windows, but target = whatever on a dozen links will only open up one window. target = "_new" on a dozen links may give inconstant behavior. I haven't tried it on several browsers, but should only open up one window.
At least this is how I interpret the rules.
Caution - remember to always include the "quotes" - at least on Chrome, target=_blank (no quotes) is NOT THE SAME as target="_blank" (with quotes).
The latter opens each link in a new tab/window. The former (missing quotes) opens the first link you click in one new tab/window, then overwrites that same tab/window with each subsequent link you click (that's named also with the missing quotes).
_blank as a target value will spawn a new window every time,
_new will only spawn one new window.
Also, every link clicked with a target value of _new will replace the page loaded in the previously spawned window.
You can click here When to use _blank or _new to try it out for yourself.
The target attribute of a link forces the browser to open the destination page in a new browser window. Using _blank as a target value will spawn a new window every time while using _new will only spawn one new window and every link clicked with a target value of _new will replace the page loaded in the previously spawned window
In order to open a link in a new tab/window you'll use <a target="_blank">.
value _blank = targeted browsing context: a new one: tab or window depending on your browsing settings
value _new = not valid; no such value in HTML5 for target attribute on a element
target attribute with all its values on a element: video demo
The use of _New is useful when working on pages that are Iframed. Since target="_blank" doesn't do the trick and opens the page on the same iframe... target new is the best solution for Iframe Pages. Just my five cents.
Related
I'm having hard time to find information related to target="_help" on the Internet. So, when I have an HTMLAnchorElement like this:
I can see that this thing is actually behaving like target="_blank", but anything else?
Could not find anything on MDN. Also no mention on the HTML5 Spec and detailed W3C Browsing Context page.
According to the MDN:
This attribute specifies where to display the linked resource. In
HTML4, this is the name of, or a keyword for, a frame. In HTML5, it is
a name of, or keyword for, a browsing context (for example, tab,
window, or inline frame).
That means that click on a
instructs iframe named _help to set src value to the value of href. The example below loads youtube video:
Help
<iframe name="_help"></iframe>
JSBin.
On a side note, this feature looks pretty obscure, I did not know about it before your question.
As mdn says:
target
This attribute specifies where to display the linked resource. In HTML4, this is the name of, or a keyword for, a frame. In HTML5, it is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). The following keywords have special meanings:
_self:
Load the response into the same HTML4 frame (or HTML5 browsing context) as the current one. This value is the default if the attribute is not specified.
_blank:
Load the response into a new unnamed HTML4 window or HTML5 browsing context.
_parent:
Load the response into the HTML4 frameset parent of the current frame or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
_top:
In HTML4: Load the response into the full, original window, canceling all other frames. In HTML5: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.
So, if you use any other key except these 4 keys (_self, _parent, _top, _blank), it opens a blank window, and gives a name with the key you wrote on the target attibute to that window.
You can check:
https://developer.mozilla.org/en/docs/Web/HTML/Element/a#attr-target
What is "_newtab" value for target attribute in HTML "a" tag? I can't find information about the compatibility for browsers.
Does it will work in all modern browsers?
How it will work if in browser option users set to open links in new window and not in new tab?
Does this value is described anywhere in HTML standards?
Are you sure, whether it is _new or _newtab?
There is no value called _newtab for target attribute.
May this SO answer gives us a better information,
Using target="_new" is technically invalid according to the
specifications, but as far as I know every browser will behave the
same way:
it will search for a tab or window with the context name "_new" *
if a "_new" tab/window is found, then the URL is loaded into it * if
it's not found, a new tab/window is created with the context name
"_new", and the URL loaded into it
Note target="_new" will behave exactly the same as target="new",
and the latter is valid HTML while the former is invalid HTML.
These are possible values for target attribute: _blank, _self, _parent, or _top
I think what you're trying to refer is target-new, a CSS3 property.
The target-new property specifies whether new destination links should
open in a new window or in a new tab of an existing window.
target-new:window; //Opens a link in new window
target-new:tab; //Open a link in new tab
Note: The target-new property is not supported in any of the major browsers.
I was looking into a solution for opening a page in new tab and then i landed on the CSS-3 property target-new
It states that: "If a user wanted to have new windows open in new tabs instead, she could use the following user style sheet to do so:
*{ target-new: tab ! important }"
I have couple of questions on it:
How it functions internally?
Why we don't have a property like target="_tab" in html5 specification but had this property as opening a link in new tab doesn't have any direct relation with Presentation?
How it functions internally?
No browser has implemented this yet.
Why we don't have a property like target="_tab" in html5 specification but had this property as opening a link in new tab doesn't have any direct relation with Presentation?
target=_blank is still allowed because of backwards compatibility. Introducing new reserved target values, like _tab, wouldn’t work the same across browsers.
IMHO, the decision should be left to the user, and web authors shouldn’t force target=_blank or target-new: tab|window.
There is a legitimate reason for using Target=_blank that everybody has completely overlooked, and that is when a website is written as a BOOK with chapters/pages and the Table of Contents must remain intact without using the BACK button to reload the previous page (Table of Contents). This way all a surfer needs to do is close the Target Page when finished reading and they will be back to the Table of Contents.
Lucky for us that HTML5 has reinstated the Target="_blank" code, but unfortunately the "Block Popups" must be unchecked for it to work.
Is there a way to bookmark or link to an HTML page (which I am not author of) without having an anchor in the HTML code?
I want the page to get scrolled down to a particular section when accessed from a bookmark or hyperlink even if there is no anchor tag in the destination page.
Note: the destination page has an anchor tag as "foo" then bookmarking like http:/...hello.html#foo will not only take the user to hello.html, but also automatically scroll down to the section of the page so that the anchor tag "foo" is at the top of the screen.
It's the year 2020, there is a draft by WICG for Text Fragments, and now you can link to text on a page as if you were searching for it by adding the following to the hash
#:~:text=<Text To Link to>
Working example on Chrome Version 81.0.4044.138:
Click on this link Should take you to another answer page and highlight the link there
You only need to have the appropriate id attribute on an element to use it like a bookmark...
Test
...
<p id="test">Hello world</p>
See the W3C specification: Anchors with the id attribute
Older specifications also allowed navigation based on the name attribute, but this attribute has been removed from the latest HTML specifications (but if there is a name attribute it may be used in the same way as an id attribute).
If there is no id or name attribute where you wish to navigate to, there is no way of navigating to the specific point within the page, only to the page itself. In this case you may want to quote the pertinent information and supply a citation with a link or perhaps ask the author if they would add an id.
This is a copy of #AbderrahmaneTAHRIJOUTI's answer but updated with some extra info.
It's the year 2020, and now there is a draft by WICG for Text Fragments, and now you can link to text on a page as if you were searching for it by adding the percent-encoded quote to the URL like this:
#:~:text=<percent-encoded-text-quoted-from-site>
For example, this link highlights the syntax from the spec.
One can also highlight multiple sections as well by chaining query parameters with ampersand (&):
#:~:text=<quote-1>&text=<quote-2>
For example, see these highlights to the spec.
Even ranges can be set in case of a longer quote (at least in Chrome):
#:~:text=<begin-text>,<end-text>
For example, highlighting an entire paragraph in the spec.
For some reason, in Chrome 89.0.4389.90 the above links may only work if one (1) clicks on them, (2) goes to the address bar by clicking in it or by F6, and (3) hits Enter. Not sure why this is when Google search constantly offers links like this in the results which work out of the box (e.g., a link to Azure Vault)
Support
It's still spotty, but most major browsers support it (except for Firefox...). To check the current status of adoption, check out https://caniuse.com/?search=%3A~%3A
There is a relatively recent W3C Working Group Note on Selectors and States which would allow linking to selected text.
Here is a Firefox webextension partially implementing the link format (allowing you to "create" a link, based on the selection, as well as, obviously, open such a link, highlighting the correct selection):
https://addons.mozilla.org/en-US/firefox/addon/precise-links/
As of 2019 it seems to work fine.
Its source code is available here.
The Firefox extension "Web Marker" does exactly what you want.
https://addons.mozilla.org/en-US/firefox/addon/web-marker/
You can find its source code and documentation here:
http://liveurls.mozdev.org/tech.html
If the page supports being embedded as an iframe, you can link to a document that embedds it and then autoscrolls the document. The issue is that we can't get the height of the page, so instead we just hijack the scrolling event to make the page taller once we approach the bottom:
data:text/html,<html><body style="margin:0; padding:0;"><iframe id='i' src='http://forecast.weather.gov/MapClick.php?CityName=Las+Vegas&state=NV&site=VEF&textField1=36.175&textField2=-115.136&e=0' width=100% frameborder=0 margin=0 scrolling=no style="height: calc(100vh + 170px + 200px);"></iframe></body><script>window.scrollTo(0, 170);window.onscroll = function(e) {if((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 200) {document.getElementById('i').style.height = window.innerHeight + window.scrollY + 200;}};</script></html>
Modern browsers will try to scroll to an element with an ID that matches the hash part of the URL (i.e. if you have <h1 id="foo">, then #foo would get you there).
If everything else fails, you can use jQuery. Get the hash part from the document URL with window.location.hash. You can then interpret that in JavaScript to determine an element in the page.
Use scrollTop to move there (see Scroll to an element with jQuery).
See also: https://api.jquery.com/scrolltop/
I must be not getting something, but sadly your solution is not working for me... The attached document's jargon confuses me a bit as the dilettant I am. :-(
Though, it gave a nice clue... Hence, I found this link with a simpler way to do this (in my case, link to a specific part of a text in some other author's blog post without ID tags):
Share or link to quotes and text in Chrome
https://support.google.com/chrome/answer/10256233?hl=en-GB&co=GENIE.Platform%3DDesktop
To create a link that opens directly to highlighted text:
On your computer, open Chrome.
Go to a page with text that you want to share.
To highlight the text that you want to share, click and hold, then drag your mouse.
To open the context menu, right-click on the highlighted text.
Select Copy link to highlight.
If you can’t select this option, this feature may not work for the selected content.
Paste the link anywhere; for example, into an email or message thread.
Tip: To remove the highlight from the text in the linked content, right-click the highlighted text and select Remove highlight.
If you want to link to a specific part of a PDF file online, this solution also worked for me:
https://helpx.adobe.com/acrobat/kb/link-html-pdf-page-acrobat.html#:~:text=Open%20a%20PDF%20file%20to,end%20of%20the%20link's%20URL.
Just posting this in case someone is still lost as I was.
Cheers!
The AnchorMe addon from Firefox just solved this for me. Ctrl + double click on your desired destination and voilà.
We are using web.show_document built-in in Oracle forms (web.show_document('file:///file_name','_blank') ) to open outlook msg files stored at a location.
While opening msg files, a new IE browser gets open along with msg file. User need to close this additional browser.
I infer that you do not wish the separate IE browser to be opened in the first place? If that is the case, then there is another option than what I present below. Read on.
Option 1:
From the Forms documentation, the target ("_blank") parameter has a few different possible values.
target Datatype is VARCHAR2. Specifies one of the following targets:
'_self' Causes the document to load
into the same frame or window as the
source document.
'_parent' Causes the target document
to load into the parent window or
frameset containing the hypertext
reference. If the reference is in a
window or top-level frame, it is
equivalent to the target _self.
'_top' Causes the document to load
into the window containing the
hypertext link, replacing any frames
currently displayed in the window.
'_blank' (default) Causes the
document to load into a new, unnamed
top-level window.
Note that these targets are lowercase and enclosed in single quotation marks.
Option 2:
If you would rather not have an IE window open up at all, there is a package in WEBUTIL.PLL called WEBUTIL_HOST. It would allow you to open a file from the perspective of the client. I am going out on a limb here an making an assumption that the URI you mentioning as 'file:///file_name' is a file path that is likely accessible from the client already.
Hope this helps, I made a few assumptions here. If you provide some more info on the specific situation, that would be helpful.