HTML Basics: Working with Links. Tag A and its attributes rel, target, name

Tag is one of the important elements of HTML and is intended for creating links. Depending on the presence of the parameters name or href tag sets a link or anchor. An anchor is a bookmark within a page that can be specified as a link target. When you use a link that points to an anchor, you are taken to a bookmark within the web page.

Options

Example of using a tag

Look at my photo!

Description of tag parameters

Specifies the address of the document to go to. Since a document of any type can be used as a link address, the result of following the link depends on final file. So, archives (files with zip extension or rar) will be saved to local disk. Default new document is loaded into the current browser window, but this property can be changed using the target parameter.

This is a required parameter for links.

Syntax

Arguments

The value is the full or relative path to the file.

Example of using the href parameter:

Absolute link

Parameter NAME

Description

Parameter name used to define an anchor within a page. First, you should set a bookmark in the appropriate place and set its name using the name parameter of the tag<А>. The bookmark link name begins with the # symbol, followed by the bookmark name. Any name can be chosen that matches the topic. You can also link to a bookmark located on another web page or even another site. To do this, you must indicate its address in the link address and add a hash symbol # and the name of the bookmark at the end.

Between tags And It is not necessary to write text, since you only need to indicate the location of the link.

This parameter is required for anchors

Syntax

Example of Creating an anchor using the name parameter:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Top

TARGET parameter

This is not a required parameter.

Syntax

Arguments

The argument is the name of the window or frame, specified by parameter name. If a non-existent name is set, a new window will be opened. The following are used as reserved names.

• _blank- Loads the page into a new browser window.
• _self- Loads the page into the current window.
• _parent- Loads the page into the parent frame, if there are no frames, then this parameter works as _self.
• _top- Cancels all frames and loads the page in a full browser window, if there are no frames, then this option works as _self.

The default value is _self.

Open in new window

TITLE parameter

This is an optional parameter.

Syntax

Example of creating a tooltip:

Drawings

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, 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 attribute href, the value of which is the document address (). HTML link can lead like inside page site, and on 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, the parameters of which can be a URL 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 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 the 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 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, 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 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 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:

Tag

Tag used to create links and anchors (“anchors”) in an HTML document.

Anchor (“anchor”) - designed to set a bookmark in a certain place on a web page, for subsequent navigation to it via a link. Moreover, the anchor can be either inside the current page or inside another page opened via a link to the anchor. To set an anchor, use the name attribute with the name of the anchor. Also, any tag with an id attribute can be used as an anchor, including the tag .

• href - Required for links. Indicates the address of the document or anchor to which the link will be followed.
• name - Required for anchors. Specifies the name of the anchor.
• rel - Describes the direct relationship between the current document and the document opened via the link.
• rev - Describes feedback between the current document and the document opened via the link.
• target - Specifies the name of the window or frame in which the document will be opened.

• accesskey - Sets the shortcut key for focusing on the element.
• class - specifies the name of the HTML tag class or classes used in CSS (Cascading Style Sheets).
• dir - indicates the direction of the text within the element.
• - specifies the name of the tag identifier, which can be used as an “anchor” or in style sheets.
• lang - indicates the language in which the text inside the HTML element is written.
• style - required to use built-in CSS styles to the element.
• tabindex - sets the tab order between elements (Tab key).
• title - displays a tooltip when you hover the mouse over an element.

Tag type

Purpose: links.

Tag model: inline (built-in, line level).

May contain: inline tags, plain text and HTML special characters(mnemonics).

Cannot contain: other tags at any nesting level.

HTML Example: Using the A Tag

HTML version support

Browser support

I believe that no HTML page can exist without at least one hyperlink (or just a link). Links can be to other pages or sites, as well as to files, pictures, etc.

Links can be external and internal, text and graphic. External links refer to other sites or objects on them, while internal links, on the contrary, refer to different parts of your site. A text link is text that, when clicked, takes you to another object or opens it, while a graphic link is an object (usually a picture) that also serves to go to another page, site, or, for example, image. Links in HTML are created using a tag (from the English anchor - anchor). Next I will tell you more about links.

The tag has an important and main href attribute. Its value is the path to the object or site to which our link refers in the form of a URL. As an anchor (link body) it can act as text ( text link), and the image (graphic link). If you need to create a graphic link, you need to use the IMG tag between the tags as an anchor. Here's a simple example HTML code for a link:

link text (anchor)

I'll give you another example so you can understand it better. I'll use my website as a basis:

On the html page in the browser it will look like this:

The color of the link text is set by attributes in tag BODY. To put it simply, links are subject to the same modification attributes as text on the page. This includes bold and italics, using headings, etc.

The following will appear on the html page:

We get the result without a frame:

Home page 1seo

As you noticed, the transition to another page is carried out in the same window. If you want the link to open in another window or the parent window (by default it is in the same window), you can use the following target attribute of the A tag:

• _blank — opens the page in a new window;
• _parent - loads a link in the parent window;
• _self - default. Opens the link in the same window.

Home page of the 1seo website

There is also title attribute, to create a tooltip for a link:

Home page of the 1seo website

text

By the way, if you specify your mailbox in the URL and specify the mailto: protocol, then when you click on your link, it will open mail program, where in the To field your address will already be entered mailbox. Using the example, the HTML code would be like this:

Write me a message

I tried to write the main things you need to create a link in HTML. By the way, if you read the previous articles HTML tutorial, then I can confidently say that you already know the minimum to create your first full-fledged HTML page. After you create a page, you can post it on free hosting and see the fruits of your labor. Believe me, after you do this, you will have an even greater surge of creative energy. Next, I will tell you how to create a table in HTML. This is also very important information, try to completely absorb and digest it.