Link opens in new window html

: The Anchor element

The HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.

Try it

Attributes

This element’s attributes include the global attributes.

Causes the browser to treat the linked URL as a download. Can be used with or without a filename value:

• Without a value, the browser will suggest a filename/extension, generated from various sources:
  • The Content-Disposition HTTP header
  • The final segment in the URL path
  • The media type (from the Content-Type header, the start of a data: URL, or Blob.type for a blob: URL)
  • download only works for same-origin URLs, or the blob: and data: schemes.
  • How browsers treat downloads varies by browser, user settings, and other factors. The user may be prompted before a download starts, or the file may be saved automatically, or it may open automatically, either in an external application or in the browser itself.
  • If the Content-Disposition header has different information from the download attribute, resulting behavior may differ:
    • If the header specifies a filename , it takes priority over a filename specified in the download attribute.
    • If the header specifies a disposition of inline , Chrome and Firefox prioritize the attribute and treat it as a download. Old Firefox versions (before 82) prioritize the header and will display the content inline.

    The URL that the hyperlink points to. Links are not restricted to HTTP-based URLs — they can use any URL scheme supported by browsers:

    • Sections of a page with document fragments
    • Specific text portions with text fragments
    • Pieces of media files with media fragments
    • Telephone numbers with tel: URLs
    • Email addresses with mailto: URLs
    • While web browsers may not support other URL schemes, websites can with registerProtocolHandler()

    Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as the global lang attribute.

    A space-separated list of URLs. When the link is followed, the browser will send POST requests with the body PING to the URLs. Typically for tracking.

    How much of the referrer to send when following the link.

    • no-referrer : The Referer header will not be sent.
    • no-referrer-when-downgrade : The Referer header will not be sent to origins without TLS (HTTPS).
    • origin : The sent referrer will be limited to the origin of the referring page: its scheme, host, and port.
    • origin-when-cross-origin : The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.
    • same-origin : A referrer will be sent for same origin, but cross-origin requests will contain no referrer information.
    • strict-origin : Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don’t send it to a less secure destination (HTTPS→HTTP).
    • strict-origin-when-cross-origin (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).
    • unsafe-url : The referrer will include the origin and the path (but not the fragment, password, or username). This value is unsafe, because it leaks origins and paths from TLS-protected resources to insecure origins.

    The relationship of the linked URL as space-separated link types.

    Where to display the linked URL, as the name for a browsing context (a tab, window, or ). The following keywords have special meanings for where to load the URL:

    • _self : the current browsing context. (Default)
    • _blank : usually a new tab, but users can configure browsers to open a new window instead.
    • _parent : the parent browsing context of the current one. If no parent, behaves as _self .
    • _top : the topmost browsing context (the «highest» context that’s an ancestor of the current one). If no ancestors, behaves as _self .

    Note: Setting target=»_blank» on elements implicitly provides the same rel behavior as setting rel=»noopener» which does not set window.opener .

    Hints at the linked URL’s format with a MIME type. No built-in functionality.

    Deprecated attributes

    Hinted at the character encoding of the linked URL.

    Note: This attribute is deprecated and should not be used by authors. Use the HTTP Content-Type header on the linked URL.

    Used with the shape attribute. A comma-separated list of coordinates.

    Was required to define a possible target location in a page. In HTML 4.01, id and name could both be used on , as long as they had identical values.

    Note: Use the global attribute id instead.

    Specified a reverse link; the opposite of the rel attribute. Deprecated for being very confusing.

    The shape of the hyperlink’s region in an image map.

    Источник

    How to Open Hyperlink in a New Window

    Hyperlinks are used to jump from one page to another. A hyperlink commonly opens in the same page by default. But it is possible to open hyperlinks in a separate window.

    Opening external links in a new tab or window will make people leave your website. In this way, you prevent your visitors from returning to your website. Remember that visitors can open a new tab themselves and are irritated when a link opens in a new tab or window without their consent. That’s why it’s recommended to avoid opening links in a new tab or window. However, there can be specific situations when this is needed, and in this snippet, we’ll demonstrate how it can be done.

    When it is needed to tell the browser where to open the document, the target attribute is used.

    How to Add target=»_blank» Attribute to Anchor Link

    The target attribute determines where the linked document will open when the link is clicked. It opens the current window by default. To open a link in a new window, you need to add the target=»_blank» attribute to your anchor link, like the following.

    Example of opening a hyperlink in a new window with the target attribute:

    html> html> head> title>Title of the document title> head> body> h1>Hyperlink Example h1> p> This a href="https://www.w3docs.com/" target="_blank">hyperlink a> will open in a new tab. p> body> html>

    Result

    In the given example, when the visitor clicks on the hyperlink, it opens in a new window or tab.

    There is another way of opening a hyperlink in a new tab by using the JavaScript window.open function with the onclick event attribute like this:

    Example of opening a hyperlink in a new window with the onclick event:

    html> html> head> title>Title of the document title> style> .link:hover < text-decoration: underline; color: blue; cursor: pointer; > style> head> body> h1>Hyperlink Example with JavaScript h1> p>Visit our website p> a href="https://w3docs.com" onclick="window.open(this.href, '_blank', 'width=500,height=500'); return false;" class="link">W3docs a> body> html>

    Let’s see one more example, where besides the target attribute, we also add a rel attribute with the “noopener noreferrer” value. The rel attribute is not mandatory, but it’s recommended as a security measure.

    Example of opening a link in a new tab with the target and rel attributes:

    html> html> head> title>Title of the document title> head> body> a target="_blank" rel="noopener noreferrer" href="https://www.lipsum.com/">Lorem Ipsum a> p>This link will open in a new browser tab or a new window. p> body> html>

    Источник

    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 tag
    • HTML redirect code
    • Timed redirect (using JavaScript)
    • CSS links (remove underline, hover over effect, etc)

    Источник

    Читайте также:  Hyperlinks in html code