Links in HTML

Links are what make the World Wide Web what it is. They allow us to travel from one site to another, i.e. to surf. Links are just like the vision of future berries when we are out gathering blackberries - they beckon us, hypnotize us…and keep us from sleeping 🙂

There are different types of links, but the 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 an e-mail to a specific address

A link is created by means of the <a> tag ("a" stands for "anchor"). To indicate the address which a user should be redirected to, 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's best if the text explains where the link will take the user, instead of some text 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 deliveryman comes to your neighbor and asks where he can find your apartment. The neighbor can answer in a roundabout way: “Earth, Europe, Ukraine, Kyiv, 41 Mechnikova street, Apartment 41.” Or he can simply say, “That's his apartment on the left.” In the first example, the neighbor (the browser) gave an absolute link, and in the second, he gave a relative one.

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

Relative links are used to go to another part of the same site (from one page to another or from one spot to another). They are especially handy when you are creating your website and it still hasn't been published yet. If you have already created your first page with us, it’s high time to create a second one and check how relative links work 🙂

Links to Documents in the Same Folder

Well, let’s create another html document with any name (for example about.html) in the same HTML_Start folder (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 a Lower Level

Often when creating a website, it is not enough to have just a root directory. You also need to create additional folders to do things like store images or videos or just another topic. In our HTML_Start folder, let’s create another folder, which we will call “Lessons." This folder will be of a lower level and and it will considered a child folder of our root directory, which, in its turn, will be considered a parent folder to it.

Let’s create a 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 (the "/" sign), and then page name:

 

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 of our root directory, which, in its turn, will be considered to be a grandparent folder towards it. Let’s create a Practice.html file in the HTML folder. In order to go from the main page to the page inside the HTML grandchild folder, the path needs to be written as follows:

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

Links to Documents in Folders of a Higher Level 

To make the process of web-surfing much easier, it’s convenient to create links that lead backwards (for example, to the main page). In order to create a link to the page in the parent folder, you need to enter two periods and a slash (this indicates that the file is stored in a folder of a higher level). And then you need to write the name of the file you want to go to. The syntax for the links.html file, which is stored in the Lessons folder, is as follows:

 

And for the Practice.html file, which is stored in the HTML grandchild folder, you need to write “../” twice to go back to the main page in the grandparent directory.

 

---

Let's Recap Who’s Related to Who:

Lessons is the child folder of HTML_Start. To make a link from Lessons to links.html, we write the following in it:

HTML_Start is the parent folder of the Lessons folder. To leave the Lessons folder and go back to HTML_Start, we write the following:

HTML is the grandchild folder of the HTML_Start folder. To make a link from Lessons to practice.html, you need to add the parent folder:

HTML_Start is the grandparent folder of the HTML folder. In order to climb two levels, from the HTML folder to HTML_Start, 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 the link leads to another site, the user automatically leaves your site. If we don't want our site to close, we can make the link open in a new window or tab (depending on the browser's settings).

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

This is the first time we have used two attributes for the same tag. Please note that they are separated only by a space; no commas.

Links to E-mail

If your site has a “Contact us” section, you can create a link which will open the e-mail agent that's installed on the user's computer so that they can write you an email.
To do this, we write “mailto:" in the beginning of the href attribute, and then the e-mail address.

Links to a Specific Part of a Page

When a page is quite long, it’s convenient to have something like a navigation menu at the top of the page. It can also send a user from bottom of your site to the top, so that he doesn’t have to scroll all the way up. In order to be able to jump all over the page like this, you need to mark each 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, whatever. To create a link to a section, the value of the href attribute must start with a hashtag (#), followed by the value of the id attribute. For example, <a href="#top"></a>

Images Which Function as Links

It often happens that when you click on an image, you are taken to another page. To create an image which functions as a link, you need to write a path to the image (instead of the normal text description of the link). In our example, picture.jpg is stored in the same folder as the page which the link leads away from:

If the image is in a different folder of your site, then you need to write a relative path to it, just like we did with files.

If the image is in a different place (not your site), then you need to write an absolute path to it.