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 target attribute values
Many sites use the practice of opening external links in a new window. Often, in this way, for example, links to the developers’ site or search results are opened. search engine. Typically, this is done using the tag attribute< >:
Generally speaking, telling the user how to open a link is not nice. Website usability gurus unanimously claim that the user himself is able to decide how to open the link. He will sort out his windows without our wishes on this matter. Moreover, we will also break the functionality of the standard browser “Back” button. Such a rude interference with habits is likely to cause hostility!
In addition, a bad impression is created: “The user is leaving the site! He may never return here! Ah-ah-ah! What to do? let's open new link in another window! Maybe, when he has seen everything he needs, then by closing this window, he will come to us again and then he will definitely become a regular visitor!”
The meaning, I hope, is clear - fill the site with high-quality useful and interesting content and then visitors will return consciously and independently.
However, in addition to the moral one, there is also a technical side to the issue - target attribute is not in the XHTML 1.0 Strict specification and therefore will not pass validation!
Valid solution: JavaScript
If, despite the previous paragraphs, you still decided (or were forced) to open the page in a new window, let's at least do it correctly.
This is where JavaScript comes to the rescue. Let's try to intercept onclick event links and force a new window to open using the window.open() function. Then we will prohibit following the link in the native window by specifying return false:
Link will open in a new window
We check the resulting solution: .
Everything is great. Browsers confidently open the link in a new window. The validator pleases us with a green success message. It would seem that you can calm down, but that’s not the case! Let's try setting a hard pop-up blocker in your browser and clicking on the link again!
A better solution
Pop-up blockers are primarily designed to combat annoying ads. This feature is available in all modern browsers. Some browsers even offer different levels blocking. For example, in Opera 9+ you can block either only “unwanted” windows or everything.
I don’t know what percentage of users struggle so radically with pop-ups, but only with these settings, instead of opening the window, a small prompt “pop-up window is blocked” will simply appear. Moreover, even this manifestation of the browser’s response to a click can be disabled in the settings. In this case, the link will simply lose functionality: “I click, but nothing happens!”
If, after reading this, someone said: “You can’t please everyone! Well, who is their doctor, that everything is turned off for them!”, then we are not on the same path with such people. For the rest we will continue.
Link will open in a new window
Here we took advantage of the fact that the window.open() function returns true if the window was opened successfully and false otherwise. That is, in the case when the link successfully opened in a new window, we block the opening of the link in its own window, because return will be!true=false. And vice versa, if the window could not be opened, return true will allow the link to work normally.
Hello, dear readers of the blog site. I decided to dedicate today's publication the most important aspect webmastering, where I will try to explain in detail what a hyperlink is, which is inextricably linked with, which, in turn, without exaggeration, is the basis of the Internet.
But in order to correctly create hyperlinks and insert them into the code of web pages (for example, your website), you need to study the relevant area of the language hypertext markup(), since these elements are formed using the HTML a tag, which has , allowing you to modernize the link to the desired form.
So, today we will look at what parts a hyperlink consists of, how using the target blank attribute makes it possible to open a page in a new window (tab), how to make any picture a link, and many other important details. Among other things, this information will advance you in learning the HTML language.
What is a hyperlink and can it be called a link?
Answering the question asked in the title, I will say that the term “link” has a wider semantic spectrum (link to Siberia, banking to identify the payer, text in a book, etc.), including the meaning inherent in the concept of “hyperlink” , which is associated only with hypertext, which makes it possible to nonlinearly perceive information.
Thus, hyperlink this special case links, therefore it is quite possible to use them in today’s topics on an equal basis. This is what I will use to my advantage throughout today's post, using both terms to avoid unnecessary keyword spam.
But there are also invisible service ones, created using and located within, whose task is to send numerous signals and commands to browsers to perform a particular function.
For example, using service hyperlinks it is possible to display an icon. They can only be seen as part of the HTML code (to do this, click on any page open in the browser):
For now, let’s leave service links alone and consider the general pattern of creating hyperlinks. What they have in common is that they all have required attribute href, the value of which is the document address (). HTML link can lead to both an internal page of the site and an external document.
Another important note. The use of the href attribute makes hyperlinks clickable, that is, it allows users to automatically go to the corresponding page of the website as a result of clicking on them.
How to make a hyperlink in HTML using href
So, we already know that to create a link you need mandatory an a tag and an href attribute whose parameters can be URLs various types. Because the a this, then between the opening and closing contains the content that will be displayed on the web page.
This the content is called anchor and can be presented in the form of text or image (we’ll talk more about how to make a picture a link below). As I already noted, the anchor will be clickable. Let's look at an example of a hyperlink with text content. This is what its design will look like in HTML code:
a little about anchors
In addition to HTTP, secure HTTP protocol S. The link does not have to lead to a web page. It all depends on the href value, which can be the path to some file:
//site/wp-content/uploads/2012/05/giperssylqi-v-html.jpg
download
On the web page this link will take the following form:
The browser “understands” that an object with the .zip extension can only be intended for downloading, which is what the user is prompted to do.
By the way, the path to any file is sometimes indicated via FTP(). Then in the URL that is used as the href attribute parameter, you should simply replace the HTTP protocol (HTTPS) with FTP. The file link will look like this:
download from server
But that's not all. In a similar way a link is created to email using the mailto pseudo-protocol For quick access to the letter writing tool:
write letters
After clicking on such a link, a window should appear with the default installed mail client, in which you can compose the text of the message and send it to already the specified address, taken, as you probably guessed, from href.
In practice, hyperlinks to mail were very often previously used by webmasters and owners of large resources to ensure the convenience of users and clients who could access the mail form in one click.
But this type of communication on web resources is no longer so popular (especially since you can install, for example), because open in this way postal addresses is actively intercepted by software and used by various types of spammers.
I gave as an example only the most common protocols that are part of the URL, which, in turn, is a parameter of the href attribute when forming a hyperlink. In addition to HTTP (HTTPS), FTP and mailto, there are others for solving more specialized problems. Perhaps we will look at them in more detail in other publications.
Types of hyperlinks
Now let’s try to classify links according to certain criteria.
According to their scope:
1. External— lead to pages located outside the site on which they are posted;
2. Domestic— connect web pages located within the same web resource.
By format:
2. Graphically e - in this case, the anchor of the hyperlink is an image (including a thumbnail), banner, button, etc.
By type of URL serving as the value of the href attribute:
1. Absolute, which contain an explicit indication of the data transfer protocol (for example, HTTP) and Domain name website (all about domains).
Such links are most often used when referring to pages of external resources. In this case, the href value will include the full path to the desired file or web pages. Here is an example of an absolute hyperlink:
Context - what is it?
2. Relative, one of the options for creating which will be the path specified relative to the root folder of the website (hence the name of this type of hyperlink). At the same time, from URL addresses The protocol (HTTP) and site domain will be withdrawn:
Context - what is it?
Relative hyperlinks on a web page can provide links to internal pages. In this form they are shorter, which makes the HTML code easier. Of course, everything is not so simple, and requires wider coverage, which you can see if you follow the link provided.
Attributes of the a tag
Now let's see what other attributes exist, besides the required href, and how they can affect the creation of a hyperlink. The most complete data in this regard, so to speak, “first hand,” you can find on the official website of the W3C International Consortium, where actual information appears the fastest.
They are completely identical and initiate the opening of a web page in the current tab. If you want pages to open in a new tab when following links, you should add when creating a link target attribute with blank parameter:
Context - what is it?
Although some webmasters and SEO specialists believe that it is better if the visitor is given the opportunity to choose (that is, not specify a target blank), because if necessary, the page can be opened in a new tab using context menu(move the cursor to the link, right-click and click on the corresponding item):
Moreover, as you can see, in this case the user has the advantage that it is possible to open the web page not only in a new tab, but also in a new window(this option cannot be implemented via HTML, only using scripts).
But I believe that not all novice users are fully familiar with the capabilities and settings popular browsers(). It is quite likely that a reader, having followed an external hyperlink and having lost sight of the source page (the recipient document will appear instead), will simply close the tab in frustration.
Thus, the owner of a web resource may well not only lose a promising visitor, but also get worse behavioral factors(), which will entail a loss of page position when ranking.
In addition, opening a page in an adjacent tab is very convenient from a usability point of view (). The user follows a hyperlink to a web page and receives Additional information and, as if nothing had happened, continues to study the main material.
To create an objective picture, it should be added that applying “target="_blank"” to any external links, it turns out, poses some kind of security risk. If anyone is interested, you can read, where recommendations are given for troubleshooting problems when using target blank, and also presented alternative options implementing the task of opening a web page in a new tab.
It seems that I noted all the pros and cons of using the blank value to open a hyperlink in a new tab. If you read articles on my blog, you probably already guessed my attitude towards this target attribute parameter.
On this moment For me, its pros outweigh its cons, and I am an unconditional supporter. Based on the above facts, you can form your own opinion on this issue. Although...taking into account the emergence of new circumstances, it may change.
How to create hash links, anchors and why are they needed?
Next, I would like to draw your attention to another type of hyperlinks, which can be useful if the material located on a web page is quite voluminous and should be structured to improve navigation.
You don’t have to look far for an example, just look at the table of contents of this publication at the very beginning. Do you see there is a list of sections of the article? Hyperlinks to these sections are just hash links. After clicking on any of them, the browser will scroll the page to the place where the corresponding part begins.
Such links are created quite simply. First you need to create anchor by placing a corresponding label in the required place on the page in the form of an ID, which is one of the global attributes applied to any HTML tag.
Thanks to the universality of ID, such anchor tags can be installed almost anywhere on a web page. Since text is usually divided into paragraphs, they can also be applied to. I mainly put anchors with which articles are divided into logical parts:
Having thus marked all the necessary places in the HTML code, we then create hyperlinks to them. To do this, at the end, after the last slash “/” in the URL (which, as you already know, is the value of the href attribute), we write sequentially the pound sign “#” and the label name (ID):
How to form hash links and anchors?
Moreover, if such an anchor link is placed on the same page as the anchors, then part of the URL up to and including the last slash before the hash can be omitted and only “#” plus the ID name are used as the href parameter (in fact, this is one of the options relative reference):
How to form hash links and anchors?
That is, when compiling a table of contents for a manual to optimize HTML code, you can easily use this lightweight option. If you put only one hash sign as the URL, without the name of the identifier, then from the place where such a link is located, the page will scroll all the way up:
Top
Actually, this simplest option, which again serves additional advantage usability of the resource, since it makes life easier for its visitors. You can use an attractive picture as an anchor to create a button.
How to remove underline and change link color
HTML developers have thought through almost all the nuances that can help in optimizing this or that aspect, the same applies to hyperlinks. For example, following a hyperlink to another web page and then returning back, the user will see that the hyperlink has changed color.
If he needs to repeat such actions repeatedly, he will be able to quickly determine which links he has already clicked and which ones he has not. This option is included in almost every browser. There is no need to explain how convenient this is and how much time it saves.
By default and without application CSS tools hyperlinks highlighted with underlining and three color options, each of which has its own attribute for:
- link - sets the color of the hyperlink on the web page (blue by default, which is designated #0000ff);
- alink — the color of the active hyperlink for the period of time while it is being processed by the web browser (red #ff0000);
- vlink — the color of the link visited by the user (purple, #800080).
How can you change the colors of links that browsers display for your site? Well, for a simple HTML site where pages are created manually (and I think there are practically no fully functional resources of this kind left in modern realities, except perhaps simple diaries and landing pages), you just need to find the opening tag
and register for him required parameters(by the way, you can use its name to indicate a color), for example:
If you have installed a content management system () to administer your web resource, then, regardless of the type of engine you use, you need to open for editing the file responsible for displaying the header (header), where there is an opening tag
.If your resource is running WordPress, then practical implementation You can use this idea as a tool for automatically inserting a picture inside a hyperlink, where you first select from the library or download desired image and paste it into the text:
Then select the resulting image code and press the editor’s “link” button, after which you paste the desired copied hyperlink in the window that appears:
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 pad site in a new tab that performs malicious code, which, instead of Yandex.Mail, loads a phishing site, very similar to the original one, but, for example, asking you to re-enter your login and password, and also, in order 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. A victim who trusts Yandex and looks at cats returns to 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" .
I am glad to welcome you to the blog site! In today's article we will start talking about 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, when I typed necessary knowledge and tested them in practice, I will be happy to share them with my readers. It’s not without reason that how much effort and time was spent at the initial stage, for example, in order to know how to insert a link intohtml. 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, html link tagA is one of my most used, along with img tag, which is necessary to display images in text. On average, in each article I publish, there are approximately five links, both to internal pages, and to external ones.
Don't forget that tags for the sitehtml are used not only when writing posts. Also, they will be needed when changing the code of the template you installed to CMS WordPress or any other content management system.
Therefore, you need to study at least the most basic html tags, so as not to have problems in the future when working with links. For example, if you use " Visual editor"When writing your articles, 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, knowledge of the basic concepts in the language html markup, I think it 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 an html document with and without an 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 special effort Move from one document to another with one click.
However, to specify the path to a hyperlink, you must use attributehref. 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 A significant factor that is taken into account search robots, so you need to pay attention to it Special attention. 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 html document, you can start clear examples. This is the code the link will have:
As you can see, the link begins with an opening bracket "<», затем идет html тег A, после него должен быть обязательный атрибут href и знак равенства. Далее, следуют две скобки следующего типа — «”», между ними нужно указать URL адрес ссылающегося ресурса, при использовании «http://». Затем, нужно указать анкор ссылки и в конце концов закрыть тег ссылки А при помощи «».
Also, I advise you to use non-anchor links, since if only hyperlinks with an anchor lead to your resource, this may raise questions among search engines and lead to bad consequences. Surely, you have heard about the sensational Google algorithm, which has the terrifying name Penguin :).
Opens the link in a new window. target_blank attribute
Well, we’ve sorted out the html tag A, but that’s not all. There are many more attributes that will be useful to you when working with links. One of them - attributetarget_blank.
It is needed so that the link you inserted into the html document opens in a new Internet browser window. This is very useful when you are writing one long article and refer to your past publications. Thus, the page the user is reading remains open, and links are opened in other tabs in the browser.
Target blank in html they are used very often because it helps in terms of the behavior of visitors on your site, that is, it affects its behavioral factors. Therefore, if you still do not use the target attribute with the _blank parameter, I recommend reading this section very carefully.
As you may have noticed, there is no particular difference where the required attribute will be placed, since their order does not matter inside the html tags.
The rel nofollow attribute and the noindex tag. Blocking the link from indexing
Let's start working with the rel link attribute in an HTML document. This attribute with the nofollow parameter is used to avoid transferring the weight of your page to any other.
As you know, any page, even one that is just created and does not have external links from other resources, has its own weight, which is above zero. Users cannot see this, but search engines take it all into account.
Therefore, so that the internal weight of your pages does not float away from you, some links need to be enclosed with the attribute rel nofollow. Links that include this attribute will not transfer weight to other sites.
Naturally, attributerel nofollow should not be used when you link to internal pages of your site, since competent internal linking is the key to successful optimization of the resource and its further development.
I only use the above attribute if I'm linking to external sites. For example, as you may have noticed, often at the end of my articles I invite postiles to become my reader on Twitter (), and give a link to my account, naturally I enclose this link in rel nofollow. It looks like this:
Again, where the nofollow rel is placed, before or after the href attribute, does not matter. Also, in such links you should not write keywords in the anchor, as this does not make any sense, because we first make a linknofollow, which means it does not transfer weight.
Now it's worth discussing tagnoindex. It serves to prevent search robots from indexing unnecessary page elements. Moreover, this applies not only to hyperlinks, but also to certain sections of text.
By the way, when I go to any site I immediately see where the hyperlink is closed from indexing, and where, on the contrary, it is open. All thanks to the excellent add-on for the Opera browser. Also, using this plugin, I can track other resource parameters, such as AlexaRank.
Link anchor and how to make it. Name attribute
And now I will probably discover a very interesting thing for many when working with links. Personally, I only learned about it after using WordPress for more than six months. So, now we will talk about link anchor.
Thanks to him, and also when using hash links, you can refer not just to some article, but also to a place in it that is necessary, that is, to a certain section of text. This is necessary when the publication is very voluminous and it will be difficult to find the necessary information on it.
First, in the article you want to link to, you need to select a section of text to which the page will scroll in the Internet browser. That is, if you give a link, let’s say about a setting (not an example of an anchor), then the name attribute must be placed in the required section of the publication.
As you can see, the name attribute does not have an anchor, since the anchor consists of an opening and closing tag A. You must set the attribute parameter yourself; it is indicated after the equal sign and parentheses, as shown in the example above.
Now directly in the new post you need to specify a hash link using a pre-prepared anchor. Thus, the link will immediately open the place in the text that is needed. This hash link will look like this:
After this, readers of your site will be able, by following such links, to get directly to a specific area on the page.
Well, that's all for me, if you have any questions, ask them in the comments. I note that this is not the last article on html; in the foreseeable future there will be more publications on this topic.
Video epilogue: the artist quickly draws pictures on glass
From the author: A link can have a target attribute that controls what happens when it is clicked. One possible value for this attribute is _blank, which tells the browser to open a new window (or tab, if the user prefers) when this link is clicked.
This was considered "wrong" in HTML (maybe only in XHTML?), but was used anyway because it worked. In HTML5 everything became completely legal. But are there any meaningful reasons to do this?
Bad reason: because you like it that way
Whether you like it or not, target="_blank" changes the default behavior. Links opening on the same page is the default behavior (as if the link had target="_self"). Perhaps you've gotten the hang of it and open all links in new windows/tabs. Great, but better assume that most users are more comfortable with the default behavior. And thus, they feel less comfortable when you impose something different on them.
If this is an internal tool exclusively for you, then do whatever you want. If other people are using the site, leave it as is. It's also worth noting that users can open a link in a new window/tab by right-clicking on the link (and selecting the desired option). This means that both types of behavior are available for links. This also means that if you like to open new tabs, then feel free to do so, but you shouldn't force that behavior on anyone. And when using target="_blank" only this is possible.
Bad reason: you want users to never leave your page
Bad reason: “internal” and “external” links are different.
Our "internal" links (pointing to our own site) behave as usual, but our "external" links (pointing to other sites) open in a new window/tab. This is related to the two reasons above, only this is even worse. You know that organic links are ideal, but if they mean that the user will have to leave your site, you want to destroy that ideal. I've heard from a lot of people that it's a "tradition." It kind of implies that it needs to be done this way. But this is not true.
Bad Reason: PDF Link
Or any other type of non-network resource. Why do you need to do it differently? You can go back using the return button. If you want to help users download a file without opening it, then this is a worthy goal for ease of use, but there are many ways to achieve it. Beginners can use the download attribute.
Bad reason: my client wants it that way
I understand the "I don't want to fight for it" argument because you don't have much energy. But it's strange that it turns out to be a battle at all. If the client does not trust you in this matter, then what does he trust you in general? You can go this way:
By default, links open normally. There are several reasons why you can change this behavior and it will be successful, but for most links it is not possible. We don’t want to impose our desires on the user and potentially upset him with this little thing. We need our users to have a good opinion of us.
And we hope that your calm and reasoned approach will help your client think well of you.
Bad Reason: Infinite Scrolling Page
Infinite scrolling is a tricky thing. On the one hand, it can provide a good user experience because it can continuously deliver content. And it can make a bad impression if done incorrectly. Returning "back" on an infinitely scrolling page should, in most cases, send you back to where you left off. The solution to this complex problem is your job. Simply forcing links to open in new tabs so that this problem never occurs is avoiding your job.
Good reason: user initiated playback of media content
For example: music, video, podcast... The user started playing. Moving pages will stop it. At this point, have the links either open in new tabs or ask if the user is sure they want to leave the page. So you will try to do good for him and not let him leave the page.
We have already covered this idea. If media is being played, treat links in a special way. If not playable, the links should be in their normal state. Despite what I say, look on YouTube - when changing videos, they don’t pester you with this question.
Good reason: the user is working on this page with something that might get lost when it changes
Perhaps the user is writing something. Or puts it in order. Does anything. Clicking a link and changing pages can be an exciting, terrifying moment. Have I lost everything I did? Even if you guarantee that he will not lose his job, you should avoid putting the user into such a state of panic. I thought about CodePen, where users often write code. To help them, we do the following:
Regular links (such as footer links) behave normally, but we detect if there are unsaved changes in the editor and suggest saving them before exiting the page.
If you do go to another site (or your browser crashes), we save the editors' state in localStorage so you don't lose your work.
Finishing work is a completely different matter. Of course, you don't want to lose customers when they leave the site. Links to something like “Shipping Information” should open without you having to leave the site. “Reading the article” will not give you any experience in my opinion. Since it's (usually) so easy to go back (most browsers even scroll back to where you were before), there's really no risk of losing anything.
Good reason: some technical point
I'm creating an email that needs to be opened in Outlook Kangaroo 2009 Enterprise Edition, and the links must have target="blank" otherwise they will open in the sidebar view and... Great.
Technical aspect
Suddenly you have to...
How to force the user to confirm his desire to leave the page.
