How to create a link in an HTML document. Tag A - its syntax and attributes

URL or "address" of a page on the Internet
<A> tag and its basic syntax
Absolute and relative reference
Relative link to directory higher than current
Attributes of the <A> tag. How to open a document by reference in a new window
Title link. The title attribute for the <A> tag
Attribute hyperlink nofollow. Ban the transfer of the "trust" of the site by reference
Internal link or anchor inside the document
Link Anchor - Picture
Continuation

References (or hyperlinks) permeate the Internet like blood vessels. If there were no links, there would be no Internet.

How to create a link in an HTML document and correctly register its attributes, what a URL is and how Search Engines relate to links - in this next lesson for beginners to learn HTML.

URL or "address" of a page on the Internet

Every HTML document on the Web has its own “exact address”. It is called "URL", from English. URL - Uniform Resource Locator

The URL structure is often visible in the address bar of the browser. It includes:

The protocol name is http: // or https: //
Site Domain
the folder or path to the folder where this document is located,
File name (may not always be).

Thanks to this “exact address” it became possible to refer to this document from the text of another document.

<A> tag and its basic syntax

I hope the word “syntax” no longer scares you 🙂

As you can see, after the start of the <A> tag, there must be a mandatory href attribute that specifies the address of the document to which you want to go.

Inside the <A> container tag itself is a text (although there may be a picture), which is the text of the link. It is also called " Anchor " or simply - Anchor.

Absolute and relative reference

In the examples above, absolute references were used. Those that contain the full URL of the document.

In some cases, the href attribute does not contain a full URL with the name of the protocol and the domain of the site. If the document to which the link leads, is on the same site - you can use the relative link leading from the place where the document is located.

Scheme when relative reference is applied

Example: a link from the first.html document leads to the second.html file, which is located in the news folder.

Relative link to directory higher than current

Code:

<a href="../first.html"> this is a relative link to a file in a directory level one </a>

This link leads to the file first.html in the "parent" directory, i.e. one level up .

The combination ../ indicates a folder one level up from the given position of the file from which the link is being made.

Attributes of the <A> tag. How to open a document by reference in a new window

In order for the document to open in a new browser tab, you need to use the attribute target = "_ blank"

In order for the document to open in a new browser tab, you need to use the attribute target = _ blank

Attribute link target = "_ blank"

Do not abuse it. No need to make internal links to the site with this attribute. Users will be annoyed by the “sparking window”.

In general, with this target attribute - the whole story. There are still a number of its meanings, but all of them are rarely used today.

This is because they are designed to work with the site on frames that are no longer popular and, with the advent of HTML5 , are becoming a thing of the past.

Title link. The title attribute for the <A> tag

Another useful attribute is title = "Text explaining where this link leads"

Syntax:

As you can see, the browser displays it as a tool tip. And yet, it takes into account the search engines.

Attribute hint for link title

Attribute hyperlink nofollow. Ban the transfer of the "trust" of the site by reference

There is one more ambiguous attribute for the links rel = "nofollow"

He tells Search Engines that the link document may not be trustworthy. At the same time, trust (“trust”) indicators from the Source site are not transmitted to the site by reference.

The topic of “trust” and link rankings is still ahead, but if it is short, the “fate” of sites in the search engines will also depend on the number of links leading to this site. The more of them, the more authoritative sites link - the more credibility of the site by reference.

In some cases, it is worth “screening” links with this attribute. For example, if you write a negative review about any service.

Internal link or anchor inside the document

In large texts, the installation of so-called “anchors” in logical parts of the document is often required. Then, it is in this place, you can refer.

The easiest way to use it is to create a local table of contents from hyperlinks leading to these anchors. Such tables of contents are usually placed at the very beginning of the article.

When creating such an anchor, the name attribute is used instead of the href attribute.

The syntax for creating an anchor is:

When creating a link, at the end of the URL add through the sign # - the name of the "anchor":

The transition will be exactly to this place, i.e. The browser will place this place in its upper visible part.

Often, in long documents, at the very bottom they put such a link “Top”.

... having traveled around the world of fragrant grains, they found the highest quality of those for which Africa, Asia, Central and South America are famous. Therefore, today in the brand's coffee houses Coffee bean You will find the best coffee varieties from recognized manufacturers.

? To the top ?

From another document, you can also exit to this place, if you add at the end of the URL through the sign # name_

<a href="http://domen-saita.ru/dokument.html#top"> link text leads to an anchor "top" in this document </a>

Link Anchor - Picture

Any picture can be a link.

Code:

By default, the links are underlined by the browser with a solid blue line, and the link-pictures get the blue frame.

Links-pictures get a blue frame

To get rid of it, a simple rule is added to the CSS file for the site:

a {border: 0px;}

This is an instruction to make the border thickness zero for all image links.

Continuation

In the next post, I will talk about email links, their attributes and methods of "protection" from evil spammers