Links are what makes the World Wide Web as we know it today. They allow us to travel from one site to another, i.e. to surf. Links are just like little berries during a strawberries harvesting - they beckon, entail us … and keep us away from a bed 🙂

There are different types of links, but most frequently encountered links are:

  • from one website to another
  • from one page to another within the same site
  • within the same page – from one part of it to another
  • links, which open an e-mail client and allow us to send a letter to specific address.

A link is created by means of the tag <a> (it stands for anchor). To specify an address to which a user is redirected you need to use the href attribute. The address itself is written in quotes. The text of the link is written between <a></a> tags. It is desirable that it would explain where the use goes, instead of just simply holding something like “Click here”.

The user follows the link by clicking on any of the words placed inside the <a></a> element.
By default, when you hover your cursor over the link it turns into a hand with a pointing finger, and the color of the link changes.

Absolute and relative links

Let’s imagine that a courier comes to our neighbor and asks, where he can find your apartment. The neighbor can answer in a roundabout way: “Earth, Eurasia, Ukraine, Kyiv, 41 Mechnikova street, Apt.41”. He also can answer in the following way: “here’s his apartment, to my left”. In the first case the neighbor (the browser) gives the absolute link, in second – the relative one.

The absolute links are used to go to another site. They satisfy the requirements of URL-addressidentification, i.e. they contain the data communication protocol (for example, http://), the domain name and the path to the specific page. If the path isn’t specified, the home page will be opened by default. The example above contains the absolute link that leads to the home page.

The relative links are used to go to another part of the same site (from one page to another, from one place to another). It is especially handy at the beginning of website creation, when haven’t published it yet. If you have already created your first page with us, it’s a high time to create a second one and to check how the relative links work 🙂

Links to documents in the same folder

vertex-ссылки между соседними файламиWell, let’s create one more html-document with any name, for example about.html, in the same HTML_Start folder (this is our root folder).

Because they are neighbors, the link from the index.html page can be very short and contain only the page name: about.html

Links to documents in folders of lower level

vertex_ссылки на файл уровнем нижеOften in the website creation it isn’t enough to have the root directory, and you need to create additional folders, for example to store images, videos or just for another topic. Let’s create another folder, which we will call “Lessons”, in our HTML_Start folder. This folder will be of a lower level and considered to be a child folder towards our root directory, which, in its turn, will be considered to be a parent folder to it.

Let’s create the links.html file in the Lessons folder and try to make a link to it from the main page. To do this, you need to write the following:

folder name, slash (/ sign), and then page name:


vertex_ссылки на файл двумя уровнями нижеIf another folder is created within the Lessons folder, for example HTML, this folder will be two levels below and will become a grandchild folder towards our root directory, which, in its turn, will be considered to be a grandparent. folder towards it. Let’s create Practice.html file in it. In order to go from the main page to the page inside the HTML grandchild folder, the path needs to be written as follows:

"“grandchild folder name/child folder name/ name of the required page”"

Links to documents in folders of higher level 

vertex_ссылки на файл уровнем вышеTo make a process of web-surfing much easier, it’s convenient to create links that lead backwards, for example to a main page. In order to create a link to the page in the parent folder you need to enter two points and a slash - it indicates that the file is stored in the folder of higher level, and then you need to write the name of the file itself. The syntax for the links.html file, which is stored in the Lessons folder, is as follows:


vertex_ссылки на файл двумя уровнями вышеand for the Practice.html file, which is stored in the HTML child folder, you need to write “../” twice to go back to the main page in the grandparent directory."


Let us one more time remember, who’s related to who:

vertex_deeper_linkLessons is the child folder towards HTML_Start. To make a link to the file we write the following in it:

vertex_higher_linkHTML_Start is the parent folder towards the Lessons folder. To return from the Lessons folder to a higher level, we write the following:

vertex_deeper_linkHTML is the grandchild folder towards the HTML_Start folder. To make a link to the file in it, you need to add the parent folder:

vertex_higher_linkHTML_Start is the grandparent folder for the HTML folder. To climb two levels higher from the HTML folder, we write the following:

Links in a new window

By default, when you click on a link a new page opens in the same window. If it leads to another site, a user automatically leaves yours. If we want out site to be not closed – we can make a link open in a new window or tap (depending on the browser settings).

To do it you need to use the following attribute: target = "_blank".

It is the first time when we use two attributes for the same tag. Please note, that they are separated only by a space, without commas and the like!

Links to e-mail

If your site has a section akin to “Contact us”, you can create a link, which can open an instilled e-mail agent on user’s computer, and it remains only to write a letter.
To do it, we write “mailto:" in the beginning of the href attribute, and then the e-mail address.

Links to specific part of page

When a page is quite long, it’s handy to create something like navigation menu of pages. You can also return a user from bottom parts of your site to the top of it, so he doesn’t need to scroll all the way back. In order to be able to jump like this on the page, you need to mark every part of the page, where you want to create a link (a (tab).

You can mark a part of your site by means of the id attribute. This attribute can be assigned to any HTML markup element, be it a paragraph, a picture, a title, whatsoever. To create a link to this section, the value of the href attribute must start with a hash (#) followed by the value of the id attribute. For example, <a href="#top"></a>

Images in the function of links

It often happens that when you click on an image you go to another page. To create an image in the function of a link you need to write the path to the image instead of text of the link. In our example picture.jpg is stored in the same folder as the page from which the link leads:

If the image is in another folder of your site – you need to write the relative path to it, just like to files.

If the image is in another place (not on your site) – you need to write the absolute path to it:

For more information about images, check our other article 🙂
See you!




Leave a Reply

Your email address will not be published.

Самоучители--узнать детальнее--