To create a link, you need to tell the browser what the link is and also specify the address of the document to which you want to link. Both actions are performed using the tag , which has the only required attribute href .
The value is the document address (URL).
The link address can be absolute or relative. Absolute addresses work anywhere and everywhere, regardless of the name of the site or web page where the link is registered.
Example 1: Using absolute references
/
Yandex search engine
Examples of relative addresses
/demo/ These two links are called partial links and tell the web server to load the index.html (or default.html) file that is located in the site root or demo folder. If the index.html file is missing, the browser will typically show a list of files located in the given directory.
/images/pic.gif A slash before the address indicates that addressing starts from the root of the site. The link leads to the picture pic.gif, which is located in the images folder. And that, in turn, is located at the root of the site.
../help/me.html Two dots before the name tell the browser to go one level higher in the list of site directories.
Example 2: Using relative links
Relative link
Look at my photo!
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 corresponding area of hypertext markup language (), since these elements are formed using the HTML a tag, which has the ability to upgrade the link to the desired one kind.
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.
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, a hyperlink is a special case of a link, so 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 href attribute, the value of which is the document address (). An HTML link can lead to either an internal page of the site or an external document.
One more 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.
So, we already know that to create a link, the a tag and the href attribute are required, the parameters of which can be URLs of 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, the secure HTTPS protocol can be used. 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 an email link is created using the mailto pseudo-protocol To quickly access the letter writing tool:
write letters
After clicking on such a link, a window of the default email client should appear, in which you can compose the text of the message and send it to the already specified address, taken, as you probably guessed, from the 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 it can be installed, for example), because email addresses opened in this way are actively intercepted by software and used by various kinds 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.
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 the domain name of the site (in everything 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 page. 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). In this case, the protocol (HTTP) and the site domain will be removed from the URL:
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.
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 International W3C Consortium, where up-to-date information appears most quickly.
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 the context menu (move the cursor to the link, right-click and click to the appropriate point):
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 of 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 receive a deterioration in behavioral factors (), which will entail a loss of page position in 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, 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 turns out to be fraught with some security risks. If anyone is interested, you can read, where recommendations are given for troubleshooting problems when using target blank, as well as alternative options for 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.
At the moment, its pros outweigh its cons for me, 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.
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 down 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 essence, this is one of the options for relative links):
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 is the simplest option, which again serves as an additional advantage for the 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.
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.
Default and non-CSS hyperlinks highlighted with underlining and three color options, each of which has its own attribute for:
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 specify the necessary parameters for it (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 to practically implement this idea, you can use it as a tool for automatically inserting an image inside a hyperlink, where you first select from the library or download the desired image and insert 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:
How to create links in an HTML document
(You will find more examples at the bottom of this page)
| Visit the site |
it will be displayed by the browser like this:
The target attribute specifies where to open the linked (the one to which the link refers) document.
The example below will open the linked document in a new browser window or tab:
The name attribute is used to create a bookmark (“anchor”) within an HTML document.
Comment:
The upcoming HTML5 standard suggests using the id attribute instead of the name attribute to specify the name of the link.
Using the id attribute actually works in HTML4 in all modern browsers.
Bookmarks are not displayed in any special way. They are not visible to the reader.
Comment: Always add a trailing slash to subdirectory links.
If you create a link like this: href="http://site/html", then two requests are generated to the server, first the server adds a slash to the address, and then creates a new request: href="http://site/html/" . Named links are often used to create a "table of contents" at the beginning of a large document. Each chapter within a document is assigned a named anchor, and links to each of these named anchors are inserted at the beginning of the document.
If you create a link like this: href="http://site/html", then two requests are generated to the server, first the server adds a slash to the address, and then creates a new request: href="http://site/html/" . If the browser does not find the specified named link, it goes to the beginning of the document. No errors occur.
I think you already understand what will be discussed in this chapter.. and you know what a link is, if not, then click here.. There are several types of links, as well as “mechanisms” for clicking on them. In this chapter I will try to talk in detail about how to register links, as well as go into the intricacies of working with them.
Lyrical digression:
Once in the army the chief of staff came up to me and gave an order, I quote:
Bring me that document, though I don’t know where it is or what it is!! Why are you standing? Let's run!! I'm late!!!
So, what I mean by this, so that the browser does not fall into a stupor, like I did then, it needs to know: the exact name of the document, the path to the document, and the place where to bring it, or rather, where to open it.
At the moment, using a notepad, we have created only one HTML document, I have it with the name index.html (why did you choose such a strange name index.html and why is it needed, see) I don’t know which one, you came up with the name yourself, but I think , You remember it and know where it is, unless of course you are my chief of staff :).. In this document we will try to create a link to another document that we do not have yet.. So before you link to it, you need to create it , fortunately you already know how to do this.
Now I know that you have two html documents index.html and primer.html and that now you have a minimum set for further training.
Let's meet tag (from anchor), you can enclose text or a picture in it, which will become a link to certain documents. Tag attribute href specifies the name and path to the document to which the link points.
All together it is written like this:
Here are my photos!!As you probably understood, primer.html is the name of our second html document, and the inscription “Here are my photos!!” this is a piece of text from the index.html file.
By analogy with the pictures, the tag
The link path to the document being opened is specified using the same methods:
Well, let's try it? Below is an example of two documents containing links pointing to each other.
Index.html file:
From the example you can see that links are highlighted in color, by default blue is a link, and red is an already visited link, these colors can be changed using the opening tag that is already well known to us < body > and its attributes.
link- link color.It is written like this:
>Continuing to talk about the color of a text link, it is worth mentioning that, if necessary, you can force both the entire link and its individual parts (phrases, words, letters) to be highlighted in color using a familiar tag and its attribute color. However, this applies not only to color; you can also set the size, style and font of the text separately. But remember that color manipulation must be done inside the tag here and not overboard, otherwise the link color will be either by default or as specified in the tag
Index.html file:
One of your pages on the site Necessarily should be called index.html. It is the file with this name that the robot program will look for on your website when a person enters the name of your website. Since the page index.html will open first, make it the main one. You can call the rest of the pages whatever you want... there are no more nuances with names.
About the register... When writing the path and names of documents, remember that, for example: Page.html, page.html and PAGE.html are the names of different documents! The same applies to the names of bookmarks and pictures. Always consider case when writing code; there is a high probability that such names will not be recognized by one browser or another. Make it a rule to write and call everything in small Latin letters, then the risk of the human factor and the vagaries of programs will be reduced to zero.
Three click rule...
Try to form a “tree of links” in such a way that a site visitor can get from any page to any place on the site in a minimum number of clicks. More than three transitions to the desired place on the site is no longer good. Endless loading of unnecessary pages for a person can lead to nervous breakdown and premature closure of the site. Save people's time, money and nerves.
Instructions
Hypertext links are designed to link text, images, or other page elements to other hypertext documents. All elements of a website page, including links, are created by the browser, which receives detailed instructions from the page code sent to it by the server. This code in HTML (HyperText Markup Language) consists of “tags” that describe the type, appearance and location of all elements of a web page. A standard hyperlink is created by the browser when it encounters, for example, the following tag in the page code: Text link Here is the opening tag of the link, and the closing tag. The opening tag may contain additional information - “attributes”. In this simple link, the href attribute contains the address of the page or document to which a request will be sent if the visitor clicks on the link. Sometimes it is not necessary to indicate the full address - if the requested document is on the server in the same folder (or a subfolder), then it is enough to indicate only its name or the path to the subfolder. These are called “relative”, they should, for example, be like this: Text link When you click on this link, the document moreText.html from the same folder will be loaded. And absolute link addresses begin with an indication of the protocol, for example: Text link Here “http” (HyperText Transfer Protocol) is the usual address of a document on the network. And if you specify the “mailto” protocol, then the hyperlink will launch your email program, instead of going to :email-link. In links to files located on the FTP server, they indicate, respectively, the FTP protocol (File Transfer Protocol): Archive link
Another hyperlink attribute that specifies into which window this new document should be loaded, as "target". If you can enter any correct address into the href attribute, then target can have only four values: _self - the page must be loaded into the same window or frame. “Frames” are one part of a window divided into several parts; _parent - if the current page itself was loaded from another window (or frame), then it has a “parent” window. And the value _parent requires that the page pointed to by the link be loaded into this parent window; _top - the new page must be loaded into the same window. If this window is divided into frames, then when loading they will be destroyed, and the new page will be the only frame in this window; _blank – a separate window will be opened to follow the link; For example:
Link will open in a new window
It is possible to create a hyperlink to go not to another page, but to some specified section of the same document. To indicate such a “destination” in the html code of a document, use an anchor link: And a link that scrolls the document to this anchor looks like this: Link to the first anchor of the page You can link to anchors not only in this document, but also in others: Anchor in another page Of course, in the html code of another document there must be such an anchor link with the name="Anchor1" attribute.
Not only text, but also other page elements - for example, pictures - can serve as a hyperlink. The simplest tag that draws a picture looks like this: 
In order for an image to become a hyperlink, it must be enclosed between the opening and closing tags of the link:
