Knowledge Base

Link (link, hyperlink) in HTML

One of the most common elements in an HTML page, in addition to meta tags, is the hyperlink tag. Often referred to as a link, hyperlink or link. A HTML document can add links to other documents or resources that reside on the same server or on an external server.

Look more: What is hypertext? | Help

The HTML reference tag is <a>, and its href attribute is set to the URL to which the link leads. The tag has a closing tag </a>. For example:

<a href="https://vpsextra.com">link to vpsextra.com</a>

The text will be visible in the browser window link to vpsextra.com , clicking on which will open the home page of the site vpsextra.com

By default, links are displayed in the browser blue and highlighted, and visited links are purple. Their color can be changed using CSS code.

When the link leads to an internal page of the site, it is necessary to specify the exact address of this page.

example:

<a href="https://myvpssite.com/page.html">Link to page.html from myvpssite.com</a>

Links to pages from the site

In addition to external pages, links can lead to pages from the same site - this way it will look like a whole document (website). In this case, it is not necessary to indicate the full address of a page. Exactly how the address will be set depends on the exact directory of the page to which the link is made.

Let's have the following site structure:

• index.html file, which is located in the root directory;
• file page1.html, which is also located in the root directory;
• file page2.html, which is located in folder1.

Files in the root directory:

• index.html
• page1.html

Files in the folder1 subdirectory:

• page2.html

The links between these pages should look like this:

1. The link from the home page index.html to the page page1.html, which is located in the same directory, contains only the name of the page to which it leads:

<a href="page1.html">Link to page page1.html from the home page index.html</a>

2. The link from the index.html home page to the page2.html page located in folder1 must contain the directory name (folder1) and the page name (page2.html), separated by a slash to the right:

<a href="folder1/page2.html">Link to page page2.html,
located in folder folder1, from the home page index.html</a>

3. The link from the page2.html page, located in the folder1 folder, to the index.html home page, must contain two dots, a slash to the right and the name of the page to which it leads (index.html):

<a href="../index.html">Link to page index.html from page page2.html located in folder1</a>

Links to parts of one page

In addition to external pages and pages from the same site, links may lead to different parts of the same page. This is suitable for long pages so as not to scroll visitors in search of the necessary information.

A link to another part of a page is made as follows:

1. The so-called "Anchor" via the name attribute of the <a> tag. The code is placed in the place on the page to which the link will lead. The "anchor" must have the following format:

<a name="Arbitrarily set anchor name"></a>

For example, if you need to link to the bottom of the page, the anchor might look like this:

<a name="bottom"></a>

Bottom is "bottom" in English, but this name was chosen only for convenience - it can be anything else, such as kotva1, dolu, etc.

The anchor is placed in the part of the page to which the link will lead. For example, if the link will be at the bottom of the page, the anchor is placed at the bottom of the BODY section of the page. (This page must be long for this link to take effect.)

The anchor is invisible to visitors - no text is written between the start tag <a name="bottom"> and the close tag </a>. The anchor can also be assigned text to be seen on the screen, for example:

<a name="bottom"> This is the name of the "anchor" that will appear on the screen </a>

This is the name of the "anchor" that will be visible on the screen

2. At the top of the page is placed the connection itself, which will lead to the already made anchor. It should look like this:

<a href="#bottom"> Link to the bottom of the page </a>

Link to the bottom of the page

Ie the reference contains the name of the anchor with the sharp sign (#) in front.

If such hyperlinks are used in one page, you can link to a specific place on a particular page as follows:

<a href="https://myvpssite.com/page.html#bottom"> Link to the bottom of the page.html from myvpssite.com </a>

A link that opens in a new window

Simple links load the page they link to in the same browser window from which the link was clicked. Thus, the first page is lost sight of and the "Back" button from the browser menu must be pressed to return to it. To open the page in a separate window, add the target attribute to the <a> tag and set it to _blank:

<a href="https://myvpssite.com" target="_blank">Link that will open in a new window</a>

An arbitrarily chosen name can be set as the target value, for example target = "mytarget", etc. In this way, all links (for example 5 in number) to which the target attribute with the value mytarget will be assigned will open in the same window.

Link to email address

The link to the email address looks like this:

<a href="mailto:name@myvpssite.com">name@myvpssite.com</a>

If the visitor to the page does not have an e-mail application on their device, they will not be able to send a direct letter, but will have to copy or copy the address. It is therefore advisable to write the e-mail address in the visible part of the link, and not an inscription such as "send email" or something similar.

Images in the form of references

In addition to text, images (pictures, photos, etc.) can also be used for references. To use an image as a reference, you must write a code similar to the following:

<a href="https://myvpssite.com"><img src="image.gif" /></a>

In this case, the image.gif image is used to link to the site myvpssite.com.