Hyperlink - what it is, how to make a link and insert code into the HTML (href, target blank and other attributes of the a tag). Target = "_blank" and other values ​​of the target attribute How anchors and link hashes are created

Most web developers don't even realize:

The page we link to using target="_blank" accesses the source page through the window.opener object.

For example, in this way just now open tab can change window.opener.location, i.e. Instead of the previous tab, silently load a completely different page.

The worst thing is that this vulnerability is present on many popular domestic and foreign sites: while it was fixed on Facebook a few days ago, it still works, for example, in Yandex.Mail.

Example attack

Based on this behavior of browsers, you can come up with many scenarios, here is the simplest one:

1. An email is sent to the victim, possibly from a fake address. The content of the letter is completely unimportant: the main thing is to force the victim to follow a link with malicious code. For example, this could be a request to check out cute cats like the one below. Yandex adds Target="_blank" to all emails automatically.

2. The victim opens a letter in Yandex.Mail, clicks on a link, which opens a covert site in a new tab that executes malicious code, which instead of Yandex.Mail loads a phishing site that is very similar to the original one, but, for example, asks you to re-enter your login and the password, and also, to remove suspicions, actually redirects to cats.

An example of this code:

// Replacing the original Yandex.Mail with a fake one window.opener.location = "http://e-m-a.il/yandex.ru"; // Redirect to cats to remove suspicion window.location = "https://imgur.com/0A5ZGBN";

3. The victim, who trusts Yandex and looks at the cats, returns to the previous tab with mail. Since she did not open anything in it, and also did not change the address, then, most likely, she will fall for the fake and enter her username and password, which will actually be sent to the attacker.

The only thing that might raise suspicion is a different address for the page, but it can be made very similar to the original one, and mobile devices it is often hidden by default.

Treatment

Fortunately, you can fix everything quite easily: you need to additionally add the rel="noopener noreferrer" attribute to all links with target="_blank" .

If you are not going to wait for this to be fixed on websites and browsers, we recommend adding the following User Script to your TamperMonkey/GreaseMonkey:

// ==UserScript== // @name NULL Opener object // @namespace nullopenerobjectns // @description Clears the window.openeer object. // @version 1 // @grant none // @run-at document-start // ==/UserScript== (function() ( "use strict"; window.opener = null; ))();

Good day, dear readers. The issue of Answers to Questions has not been published for a long time, I think many have already been waiting for answers to their questions. Some of you have already found the answer to your question without my help, I apologize that I did not give you the answer. I will improve. Unfortunately, today I will also not answer all questions, but only one.

I found this question quite interesting and useful, so I decided to pay special attention to it. So here's the question.

Is it possible to use the target="_blank" tag to force the link to open in a new browser window? Isn't this harmful? Does this affect anything?

Very interest Ask, the point is that the tag attribute , which opens the link in a new window or browser tab, target="_blank", one of the most controversial in HTML. Although I myself only use it and use it more than once for my readers, it’s still worth understanding this issue and trying to come to some kind of opinion.

Here it is worth considering the situation from two sides: using target from the point of view of validation and opening the link in a new window or browser tab from the point of view of usability. I'll start with the first one.

The target="_blank" attribute is an invalid attribute and its use is only allowed in Transitional documents:

For comparison, in Blogger it is like this:

contains information about the document type, a required element of a web page that tells the browser how to interpret the page. I will not go into the history of the creation of HTML, XML, XHTML - all this is material for more than one article. But I will try to convey the essence.

If we are talking about Blogger, then our template is a mixture of two languages ​​- HTML and XML, in such cases it is necessary to specify - XHTML 1.0 Strict. Documents of this type must have a clear syntax, and the specification for documents of this type does not have the target="_blank" attribute. That is why for us this attribute is invalid and, in fact, it is forbidden to use it.

If we are talking about other sites, is it possible to use the target="_blank" attribute there, then you need to look at the source code of the page, namely the entry .

The document type is set by the developer of a particular site, depending on what language or its version is used when laying out the site.

What to do in such a situation?
I know only two solutions to this situation. And both options are far from ideal.

The first option is that in order for the document to be valid, you can use special JavaScript or JQuery scripts that will open pages in a new browser fold.

The downside of this method: if JavaScript is disabled in the browser settings, the page will not open in a new window.

The second option is to use target="_blank" and no longer suffer from this issue. Even though this attribute is invalid, it is still supported by all browsers. And its use does not in any way affect the indexing of the site by search engines.

We have discussed the first part of the question, but as I already said, there is another side to the issue - usability, convenience for the visitor. Is it convenient for our readers to open links in a new tab?

A certain part (I can’t say how many) of developers consider it bad form to deprive the user of the opportunity to decide for himself how to open a page, in the same tab or in a new one. And also, more A I am part of the advanced (experienced) users, they believe that they themselves are able to decide how to open the link, because this is provided, at least in the same mouse. On the other hand, there are a lot of users on the Internet with a below-average level, and many do not know that using the same mouse you can open any link in a new window.

If you don't know how to do this yet, I'll tell you. Every mouse must have a wheel, so if you hover your mouse over a link and click on the wheel, the link will open in a new window. Or, there are mice with three buttons, and this function is performed by the middle key. But as I said, not all Internet users know about such a pleasant little thing.

Also, from the point of view of many users, it is convenient for the internal link to open in the same browser window (tab), and external links to open in a new tab; for many this is simple and logical.

It is precisely because of such opposing opinions and because of the different levels of knowledge of users that the target="_blank" attribute and, in general, the issue of opening links in a new window, are the most hotly debated topic.

What is my opinion on this matter? I myself was a beginner, I know a lot of people who all they know about the Internet is Yandex and Odnoklassniki, and they simply have no idea what a monitor is, why there are so many buttons on the keyboard, and why a mouse wheel is needed at all ( Of course, such gaps are quickly filled). I myself think that opening a new site in the same tab where I am now is extremely inconvenient. Even if I'm really planning to leave the site, I won't worry too much if I close the previous tab. I want the link inside the site to open in the same tab, and the external link in a new one. This is my personal opinion and I do not claim to be the truth.

If you have seriously thought about this issue and decided to use a special script, I tried to find a solution for you. This script is suitable for any website, CMS and for the Blogger platform; I’ll show you using Blogger as an example.

Go to Design – Edit HTML, find the code and insert the code in front of it:


If you want to warn your users that the link will be opened in a new tab, you can apply a style to the link, as I did. To do this, add the following style to the template before the line ]]>:

External (
padding: 0 10px 2px 0;
background: url(http://lh6.googleusercontent.com/_G92voTj-yF0/TcFG68RdfLI/AAAAAAAABfA/QJM25G6lInk/externallink.gif) no-repeat right center;
}

I posted my padding field values. Depending on the font you use and text display settings, you will need to adjust these numbers to suit you. You can also upload a picture to your album or use a different one altogether.

I want to say that I tested three different scripts, and the one proposed above does not work everywhere. If the script suggested above does not work for you, you can try the following options:

http://sites.google.com/site/seobiblioteka/extlinks.js
http://sites.google.com/site/seobiblioteka/external.js

But the last two scripts do not support automatic loading of styles, so if you want to use a style for an external link that is different from the internal one, then do not forget to assign the class class="external" to the link.

That's all about using target="_blank" and opening the link in a new tab. I hope I answered the reader’s question and this information will also be useful to everyone else.

Dear bloggers, if your question is related to Blogger, I highly recommend asking it on the forum. Answers are published on the blog not so often, and not quite regularly, and you have to wait several weeks for an answer to a fairly basic question. By asking a question on the forum, you will receive an answer from me or other users within a couple of hours.
Have a good weekend.

I am glad to welcome you to the blog site! In today's article we will start talking about the hypertext markup language html. This publication will be the first of its kind (and far from the last), since I have never written anything like this before.

Post plan:

But now that I have gained the necessary knowledge and tested it in practice, I will be happy to share it with my readers. It’s not without reason how much effort and time was spent at the initial stage, for example, in order to know how to insert a link into html. Naturally, after reading my post you will also know and be able to do this.

In general, it is worth noting that link tags are simply necessary in the work of optimizers, because their bread is just search engine optimization and, and of course, gurus in the field of SEO most likely cannot do without links, let alone ordinary bloggers :).

Perhaps the html link tag A is one of my most used, along with the img tag, which is necessary for displaying images in the text. On average, each article I publish contains about five links, both to internal pages and external ones.

Do not forget that tags for an html website are used not only when writing posts. Also, they will be needed when changing the code of the template you installed on CMS WordPress or any other content management system.

Therefore, you need to study at least the most basic html tags in order not to have problems in the future when working with links. For example, if you use the “Visual Editor” when writing your articles, then this is not very good, because if this editor does not work, you will not even know the basic code to add a link.

In general, knowing the basic concepts in the HTML markup language, I believe, will greatly help you and make your life easier. Still, the time you spend now studying material that may be new to you will not be wasted.

There are also many more nuances that will make your work easier, and which you will read about below in my article - these are rel=”nofollow”, and target=“_blank”, and many other interesting things related to links.

Link tag A – create a hyperlink in html document with and without anchor


As I already noted above, the link is one of the most used html tags by me. They are needed so that users can easily move from one document to another with one click.

However, to specify the path of a hyperlink, you must use the href attribute. Thanks to it, you can and should specify the URL of the page you want to link to. These can be either internal pages of your website or pages of any other resource on the World Wide Web.

Anchor html tag links This is a significant factor that search robots take into account, so you need to pay special attention to it. I recommend using it in anchor keywords, for which you want your article to get to the first positions in the search results.

Having understood a little about the theory of hyperlinks in an html document, we can proceed to illustrative examples. This is the code the link will have:

Here should be the text of your hyperlink, that is, anchor

As you can see, the link begins with an opening bracket "