Stay a href http site. External links, HREF attribute

(HTML Anchor Element).

The main function of links is that they allow you to move from one HTML document to another, or contain the address of a file intended to be opened in the user's browser, or for further downloading.

Browser support

Tag			Opera		IExplorer	Edge
	Yes	Yes	Yes	Yes	Yes	Yes

Attributes

Attribute	Meaning	Description
charset	char_encoding	Not supported in HTML5. Specifies the encoding of the associated document.
coords	coordinates	Not supported in HTML5. Defines the coordinates of the link.
	filename	If the attribute is specified, then the browser does not follow the link, but offers to download the document specified in the link address.
href	URL	Sets URL the page or document to which the link leads.
hreflang	language_code	Defines the language of the linked document to which the link leads.
media	media_query	Indicates that the document to which the link leads is adapted for certain types of devices.
name	section_name	Not supported in HTML5. Specifies the name of the anchor. Use the global attribute instead.
rel	alternate author bookmark help license next nofollow noreferrer prefetch prev search tag
rev	text	Not supported in HTML5. Indicates the relationship between the current document and the related (linked) document.
shape	default rect circle poly	Not supported in HTML5. Defines the shape of the link (used with the coords attribute). Use the element instead of this tag.
target	_blank _parent _self _top framename	Specifies where to open the document.
type	media_type	Indicates MIME type of the document to be navigated to.

Usage example

When you hover over the link, the message “Link to Yandex” will appear.

charset attribute

charset attribute serves to send information to the browser that the site linked to is created in a different encoding. This action will allow you to avoid incorrect display of symbols during the transition.

Website in utf-8 encoding

Thank you for your attention! The lesson is very important! Using links is the basics! Good luck!

Description

HTML tag defines a hyperlink (also called simply a "link") that is used to move from one page to another. Tag text content acts as the name of the link. Externally, a link is easy to distinguish from regular text, since by default it is displayed as underlined text, and when you hover the mouse cursor over it, it takes the form of a hand with an index finger, as if showing that this text is active and can be clicked on with LMB .

• Unvisited link - blue text
• Visited link - purple text
• Active (when clicking (and holding) LMB) - red text

The peculiarity of links is that the link itself can lead not only to another web page, but also to a file of any type. The file to which the link leads opens in the browser window only in cases where the browser knows the type of document; in other cases, a message is displayed indicating how the file should be processed - open it or save it to the specified folder.

By default, the page to which the link leads opens in the same window where the current link is located. A link that leads to a non-existent page, file or image is called “dead” or “broken”.

Links to navigate within a web page

Links can also be used to jump to a specific location within a web page (not necessarily the current one). To determine the location on the page to which the link will be followed, any HTML element is used. To determine the element to which the link will be navigated, you need to use the global id attribute, specifying it for the desired element:

Heading

Now to get to it, in the element's href attribute value we must specify the value of the id attribute, preceded by a hash symbol (#). If the element to which the transition will be made is on the same page with a link leading to it, then the document name in the href attribute can be omitted, writing only the identifier.

To navigate to a specific location on another page, you need to specify the required identifier after the URL:

Note: The main benefit of links within a web page is that the user does not have to scan the entire web page to find the section they are looking for. Such links are convenient to use on pages with a large amount of content so that visitors can quickly jump to the section they need.

Mailbox link

Attributes

download: Indicates that the file being linked to will be downloaded when the user clicks on the link: The attribute value determines under what name the file will be saved. For example, the original file name is sun.png , if flower.png is specified as the value, then the file will be saved under the name flower.png . If no value is specified, the original file name will be used.

Note: the download attribute is only used in conjunction with the href attribute.

Href: Specifies the URL of the web page to be navigated to (the number of characters in the address value should not exceed 255). Since the path to a file of any type can be specified as the link address, the result of following the link will depend on the target file.

Note: Can be used as a URL absolute or relative address.

Example » hreflang: Determines the language of the text in the document being linked to. Example » media: Indicates the media type of the document being linked to. rel: Indicates the relationship between the current document and the document being linked to. Possible attribute values:

• alternate - link to an alternative version of the document (page for printing, page in another language, etc.)
• author - link to the author of the document
• bookmark - permanent URL used for bookmarks
• help - link to the help document
• license - links to copyright information for the document
• next - the next document in the selected area
• nofollow - a link to a document that does not need to be indexed (“nofollow” is used by the Google search engine to indicate that the search bot should not follow this link)
• noreferrer - tells the browser not to send an HTTP header if the user follows a link
• prefetch - specifies that the target document should be cached
• prev - the previous document in the selected area
• search - search link for the document
• tag - tag (keyword) for the current document

Default style

a:link, a:visited ( color: (browser dependent); text-decoration: underline; cursor: auto; ) a:hover, a:active ( color: (browser dependent); )

Using html tag links are created on any website, both external and internal. Tag found on every page of the site. If it were not there, it would be very difficult to navigate the Internet, since each page address (URL) would have to be written manually in the browser line.

Tag syntax

anchor

The only required parameter for a link is href="URL" , i.e. link address. Between the opening tag and closing tag An anchor link is written, which can consist of words, symbols, objects (pictures, etc.).

... ...

Note 1

If you opened a tag , then everything that follows it will be a link until the closing tag is encountered. Any objects can be a reference. Very often an image is used as a link. For example

Note 2

To opening tag You can specify various attributes. They are responsible for the correct operation of links. Let's look at them.

Tag Attributes and Properties

1. The target="parameter" attribute, which can take the following values:

• _blank - opens the page in a new window
• _self - loads the page into the current window
• _parent - loads the page into the parent frame
• _top - cancels all frames and loads the page in the full browser window

Example with target

how to make money on your website

The most commonly used value is _blank because it allows you to open the page in a new tab. This is convenient for the user, since he remains open the current page in the next tab.

2. Attribute title="hint" позволяет прописать подсказку, которая высветится при наведении курсора на ссылку. Это нужно для более точного описания ссылки. Атрибут тайтл поможет пользователю убедиться в том, что по ссылке он найдет нужную информацию, а для поисковой системы это дополнительный ключевые слова для страницы, на которую ведет ссылка.!}

Example with title tooltip

... !} how to make money on your website ...

Converts to the following on the page:

In this case, the hint is displayed in the standard way. However, you can also make a prettier tooltip: How to make a prettier link tooltip »

3. Attribute class="class name" specifies the style class for the link. You already know about classes from the previous lesson (styles in html). For the a tag, the styles have slight differences. I will explain all the nuances using the following example.

Example

how to make money on the site

Converts to the following on the page:

Let me explain the example described above. The class in which we described the tag called list. Let's figure out what the postscripts visited , link and hover mean.

• a.class:visited style for a link that the user has already visited. This allows the user to avoid visiting the same page twice, even if the link to that page has different anchors.
• a.class:link style for those links that the user has not yet visited (you can omit the ":link" prefix, since a.class does the same thing).
• a.class:hover link style when hovered. Usually this style is given a different color and also an underline to let the user know that the link has become active.

4. The rel="parameter" attribute - defines the relationship between the current document and the document to which the link leads. This attribute is important for search engines, but is not interpreted in any way by browsers. Can take the following values:

4.1. nofollow - means that the weight will not be transferred via the link (the robot will not follow the link). For example:

how to make money on the site

Visually, you will not notice any differences, but for search engines this link will not transfer weight. Therefore, my advice for everyone: close all external links with the attribute to save weight on your site.

4.2. canonical - in case of many duplicates on the site, indicates the main page among all duplicates

There are also many other values ​​for the rel attribute, but they do not affect the appearance or search engines at all, so I see no point in considering them.

How to link to an email address

Links have another interesting feature: you can immediately specify the email address in such a format that when clicking on it, the user will open the program that is the default for processing his mail. Perhaps it will be OutLook or the default browser with mail.

admin@site

Dear reader, now you have learned much more about the html a tag. Now I advise you to move on to the next lesson.

But in any case, by clicking on them, an instant transition is made to any point (URL address) of hyperspace, regardless of where they are located in reality (meaning the real geographical location). It would probably be difficult to imagine the modern Internet without links, and it would look like a kind of desktop with a pile of piled papers that are in no way connected with each other.

External links, HREF attribute

Links in HTML are indicated by an anchor element . Attribute href is used to specify the URL of the link, and the text located between the opening and closing tags becomes linked.

href="http://www.site/html/" >Introduction to HTML

The browser displays:

Absolute and relative links

Before moving directly to the description of building hyperlinks, I will focus on the two main types of linking: absolute and relative.

In the browser we will see:

A relative link is a link to files located on the same server or, in other words, nearby. You can link web pages located in the same directory simply by specifying the file name. Example: link to the same previous page .

In the browser we will see again:

If you need to link to a page that is located in a subdirectory, then the subdirectory is written before the file name - .../html/text.html. To move from a directory to another directory - .../svoy-site/html/text.html.

TITLE attribute

An important point is the availability of links. To make links more accessible, you can use attributes that provide additional hints. In this case it is very useful to use the attribute title, which is used for a more detailed description of the link (the description appears when you hover over the link):

href="http://www.site/html/" title = "Introduction to the HTML language. A guide to writing competent and optimized code yourself from start to finish.">Introduction to HTML

Email Links

Links can point to more than just other web pages. Same attribute href can be used to redirect to email addresses. An email link is a link that, instead of going to another page, opens an email application window. To do this, you need to add the prefix to the href attribute value mailto: followed by the recipient's email address. Let's look at an example:

href="mailto: [email protected]" >My email address

In the browser we see:

Internal links, NAME attribute

We have already understood how external links are included, now we will deal with intra-page linking. Internal links allow you to go to specific places on a web page (anchors), rather than to the page as a whole. These links are created using the sign # , followed by the corresponding name. The location is then determined using the attribute name, the value of which corresponds to the name specified in the link. On this page, the anchors are level 3 headings, in code it looks like this:

name="vnutr" >Internal links, attribute NAME:

Let's look at a general example, writing the HTML code for links:

href="# vnesh" >External links, attribute HREF.
href="# tip" >Absolute and relative links.
href="# title" >Attribute TITLE.
href="# mail" >Email links.
href="# vnutr" >Internal links, attribute NAME.
href="# target" >Attribute TARGET.

We look in the browser:

In this way, you can create links to certain sections of text or images located on other pages. To do this, you need to enter an absolute address, followed by a hash sign and the name of the anchor, as shown in the example:

href= "http://www.site/html/#html">Create an HTML page

The browser will display:

TARGET attribute

By enabling links in HTML, you can control where the page opens. By default, links open in the same window where the original page is open. But if there is a need to open the page in a new window, then you need to add an attribute to the tag target with meaning _blank. And to open the page in the parent window at the attribute target there must be a value _parent. Let's see an example.