What is target in html. 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). Good reason: user initiated media playback

I am glad to welcome you to the blog site! In today's article we will start talking about hypertext language html markup. 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 " 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, 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 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 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 link tag 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 ":

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 side, there is also a technical side to the issue - the target attribute is missing in XHTML specifications 1.0 Strict and, accordingly, 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 the onclick event of the link and force the opening of a new window 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 of 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 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.

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?

A very interesting question, the fact 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.

Hello, dear readers of the blog site. Today I want to talk in more detail about what a hyperlink is in HTML language, how you can place them in the text on the site, how to make a link to a picture, how to correctly use the “A” tag and its “Href” and “Target blank” attributes (open in a new window).

In general, a hyperlink is a key element. In addition, links are now one of the three main factors influencing the successful promotion of a website. Applying them correctly and understanding, for example, how they affect their accounting search engines, can significantly affect the traffic to your resource.

What are hyperlinks and anchors?

So, we have already become acquainted with outdated tags that are not recommended for everyday use. Let's continue our further acquaintance.

In order to make a hyperlink in Html code, we will also need to use the A tag. For it, we can use various attributes, setting, for example, the URL address of the target for moving along this link (href) or instructing it to be opened in a new window (target= _blank). But let's talk about everything in order.

As we mentioned just above, hyperlinks are a key element of the Html language and they allow you to link both to the internal pages of your own site and to other Internet resources. I’ll say a banality - following a link is carried out by clicking on it (what did you think?).

In addition to the fact that they can be divided into internal or external, they can also be auxiliary and used exclusively for the needs of the browser with which the pages of your site will be opened.

In this case, they will not be visible on the page, because are registered in the Head area source code document, the contents of which are not displayed on the page (I mentioned the structure of the hypertext markup language code in the article about ).

Service hyperlinks are created not using the “A” tag (like regular ones), but using the “Link” tag. There are quite a lot of tasks they perform, for example, using them to HTML document external files with CSS cascading style sheets or, for example, .

But today we won’t look at how you can create them (we’ll get to them later), but we’ll dwell in detail on visible links that can be created inside the Body area and, accordingly, they will be displayed on the web page.

But, nevertheless, all hyperlinks (both visible and service) have one thing in common - they all contain the required Href attribute. In it, as its value, a certain place in the document is written (if it was previously marked with an anchor) or the address of the document itself on the Internet (in Href, or, in other words, the path to the page or some other file is written).

Hyperlinks are navigation elements that are designed to transfer you to other documents on the network, or to navigate through the content of a web page you are already viewing using marks made in advance in the body of the document, which are also called Html anchors.

There may be some confusion here, because... in SEO, the word is , but in Html, “anchor” means an anchor (translation of the word anchor) or a mark in the text, which can then be referenced.

Why are anchors used in HTML? This is quite convenient when creating navigation on a rather long web page. You've probably seen it online when on the page you open, immediately below its title are the names of the sections of the article published on that page.

This way, the reader will be able to immediately go to the place on the page where the information he is interested in is located, rather than bothering with scrolling through the text and visually searching for the right place. Convenient and enhances.

How anchors and link hashes are created

So, our task in this case will be to install anchors in the right places on the page (document), which in general will look like this:

Those. in order to make an anchor, you need to enter a single attribute “Name” into the empty hyperlink tag “A”, as the value of which use a unique label that should not contain spaces and in which you can use Latin characters, numbers, hyphens and underscores (in complete analogy with the rules by which you can create Urls - ,,,[_],[-]).

In this case, the anchor will not be visible on the page itself, because We did not write any text inside the “A” elements. However, anchors created in this way will pollute the Html code, and therefore now much more often than anchors they use another way to create a label.

In this case, you do not need to create an empty “A” tag, but you can use any of the elements already available in the right place in the text. For example, these could be .

Those. to create an analogue of an anchor, it is enough to assign a universal ID attribute to any tag (it can be used for all tags, and, by the way, they work based on it), for example, like this:

Title text

So, now instead of creating the required number of anchors polluting the code and appearing on this moment not valid (not recommended by the W3C consortium, which develops the Html language), we simply add Id.

It turns out that for this you will need, as usual, to insert the required attribute “Href” inside the hyperlink “A”, but the value of which will be formed from the name of the desired label (anchor) preceded by a hash sign “#”, which is also called hash ( This, by the way, is where the legs of the frequently used name grow: link hash):

will move to the place of the page marked with anchor

Please note that when you click on such a hyperlink, a new document will not be opened. The browser will scroll already open page to such a position that the place in the text where you inserted the anchor takes a position at the very top of the screen. It would be logical to assume that the values of all tags (anchors) on one page should be unique in order to avoid confusion for the browser.

If you make an anchor using the ID attribute in a conveniently located tag, then you need to take into account that in addition to the restriction on the type of characters used (,,,[_],[-]), the ID value must begin with a Latin letter character.

Then all valid characters can be placed in any quantity, but the first character of the anchor label in the ID attribute value must be a letter (Latin, of course). Otherwise, such an anchor inserted into the Html code will not work (in most browsers).

If you do not write any anchor label name (href="#") after the hash symbol "#", then such a hyperlink will scroll the page to the beginning. This is how you can create a simple “Back to Top” button by making a link from the image (we’ll talk about this a little later) and inserting it into your website template, for example, like this:

Href is a required tag attribute of any hyperlink

Now let's move from navigation inside the document (using anchors) to external navigation, i.e. we will need to make links leading to other documents on our or another site. Now in the Href attribute we no longer need to specify anchor labels, but the path to the file to be opened (the page, by design, is a file loaded into the browser for subsequent display).

anchor

Here we should talk further about, but I have already written about them in more detail in the mentioned material, so it probably doesn’t make sense to repeat myself. But you need to know how to set the path to the file in the Href attribute of the hyperlink you made. Therefore, do not try to familiarize yourself with the material provided.

However, let me remind you that when creating Urls, it is preferable to use only the following characters: (,,,[_],[-]) and not to use spaces. If we consider the contents of the Href attribute for absolute links, then it can be schematically represented as follows:

If we discard what you will rarely use, then you can present the same thing in a somewhat simplified form:

Protocol (usually http)://domain_name (for example, website)/path_to_file ( web pages)

In addition to the simple http protocol, on the Internet you can find links with the https protocol, which differs in that it uses encryption. The latter is used on sites where there is a need to protect the data exchange channel between the server and the client’s browser. For example, it is used in Web Money electronic money services.

On the Internet you can find different versions of Href content, for example, this one:

Https://site/videokursy

Or this (with file extension):

Https://site/seo/kak-raskrutit-sajt.html

This does not change the essence, but if there is a slash at the end of the contents of the Href attribute inside the hyperlink, this means that the access is no longer to the file, but to the folder in which the corresponding index object will be searched (for more details, read the article on url addresses mentioned above).

Download something from the link

As you can see, this hyperlink is no different from a regular one, the browser just understands that it needs to download a file with a zip extension, and not try to open it for viewing, like, for example, document files with html extension. Although, you can customize all this purely individually in your browser to suit your personal needs.

Download from Ftp server

You can also, for example, create a (mail) one by adding the corresponding Url to the Href:

Write a letter

When you click on this link, the default one you use will open on your computer. mail program(in the browser you can configure links with mailto in Href to open in Gmail, etc.) and a dialog for creating a new letter will appear, in which the email address given in Href will be inserted into the “To” field.

In fact, you can make quite complex email links, with the help of which other fields in the email sending dialog will be filled in, but this is used quite rarely.

And in general, webmasters Lately We have practically stopped using hyperlinks with mailto in Href due to the fact that they are parsed by spammers with all the ensuing consequences. It’s better to create it on the website, although I still have everything presented in a classic form on the contact page. I should change it at my leisure (or not... I'll think about it).

How to open a link in a new window (target blank)

When creating links in Html code, we often face the question - in which browser window should we open the document to which it leads? By default, it will open in an existing window, overlapping the page from which this hyperlink was placed.

Personally, I am a big supporter of the Target attribute with the value blank , which allows you to open a page in a new window, leaving the document where the link was placed open. I don’t know how this affects the usability of my blog, but I like this option better and I use it in almost all cases.

In search engines, I also like to configure the opening of links in a new window, so that the results are always at hand and you can always return to it. For these purposes, as already mentioned, Html uses a special Target attribute, which by default has the Self value:

Opens the document in the same window

Although, of course, no one writes target="_self" in the "A" tag, because this value is used by default, but if you need to open the page in a new window, you will need to write target="_blank":

Opens in a new window

Please note that the Target attribute values are written with an underscore at the beginning (_blank), because this is stipulated in the Wc3 validator, which contains hypertext markup language holes. What’s noteworthy is that Html provides the ability to change the default link opening option.

For example, if you want all hyperlinks on your site to open in a new window, you will need to add a Base tag with the target="_blank" attribute in the Head area of the template you are using:

there's something else there

And now, if you want to open one of the links in the same window, then you will need to add target="_self" to its “A” tag, because by default you now use _blank. Oh, how.

By the way, I used the Base element in the manner described above, but also enclosed in it a code area with several hyperlinks that needed to be opened in a new window. Those. I also used the closing Base tag inside the Body area and it worked. Although such code, of course, turns out to be invalid.

Hyperlink hover and click colors - how to change them

The Html language was designed so that the user could easily navigate which link he had already opened and which one remained untouched.

For this purpose, a color is used that will change when the user clicks on the hyperlink and the document linked to it is successfully opened. Returning back to the original page, the user will find that the link he visited has changed color. All browsers can do this trick.

By default, in pure HTML (without using CSS properties) links are highlighted with underlining and can have three color options:

Blue is the color for unfollowed links that the user has not yet clicked

Red - it is accepted by the hyperlink immediately after clicking on it and until the requested document is downloaded to the user’s browser over the network (in modern conditions, it is not at all easy to catch this moment and everything is to blame everywhere)

Purple is the color for spent links that the user has already followed

In Html 4.01, these colors for links are the default, but they can be changed using special attributes that are written into the Body tag, which you can find in one of the files of the template you are using. To change all three colors, three attributes are used, respectively:

Link—sets the color of an unvisited link

Alink - the color of the currently active one, which is being processed by the browser

Vlink - the color of the hyperlink already visited by the user

Remember, I already wrote about how . Accordingly, the mentioned attributes might look like this:

Naturally, what was meant here was a pure Html option, when for some reason it is not convenient or possible to use styling, otherwise all these colors can be easily set and changed using .

How to make a picture a link - two ways

Well, everything is quite simple here. Because is a lowercase element, then by and large any image can be considered just a letter, perhaps only of a larger size.

In the case of pure HTML, you will have a frame three pixels wide around the image that you made a link. Moreover, the color of this frame will fully correspond to the link colors accepted for your site (we talked about them a little higher in the text).

To remove adding a border to an image that you have hyperlinked, you need to add a Border attribute with a value of zero to the Img tag:

This is a very simple way to make a picture a link, but there is a more complex option called an image map. In this case, thanks to the use of a fairly large number of HTML tags and attributes, you can make from one image a whole map of links with active areas (clickable and having different shapes - rectangle, circle, polygon).

For example, you can place a large photo on your page and have it so that when you click on different parts of it, different pages will open with different hyperlinks. In fact, it would take quite a long time to describe an image map, and it’s unlikely that anyone will use it, so I won’t do it, because “the game isn’t worth the candle.”

Good luck to you! See you soon on the pages of the blog site