HTML Links

html links

Links are one of the most important parts of a web-page. It allows you to navigate inside the same webpage, from one web-page to another and to other websites.

In technical terms, the links are known as a hyperlink.
When you bring your cursor over the think then it changes to ‘hand icon’.
Any text, element or image can be used as a link.

1HTML Link Element

To convert text into link you need to wrap it inside <a> and </a> tags.

Now we need to insert the link inside the opening tag.
The attribute name is href (hyperlink reference) and its value is the link URL.

This will now work as a link. On clicking, you will land to the specified address.

Note: The full web address including http://www. is called absolute URL. When you are linking to a web-page inside the same website then you can insert link without http://www. this is called relative URL. Read more below.

2The appearance of HTML links

By default the browser renders the link as

Unvisited link – Blue and underlined
Visited link – Purple and underlined
Active link – Red and underlined

We will learn to customise the links later in the CSS link chapter.

By default, the HTML links open in the same browser’s tab.
But this can be changed using the  target  attribute.

There are 2 values for the target attribute-

  • _self – Link is opened in same tab (default)
  • _blank – Link is opened in the new tab
Note: _parent , _top and framename attribute values have been deprecated in html5.

3Link Title Attribute

The title attribute is used to provide extra information to the element.
The value specified in title attribute can be seen as a tooltip when the mouse moves over the element.

4HTML Anchor Links

Anchor links allow the user to navigate to a particular section of a webpage.
These are very useful when a webpage is very long or contains plenty of text.

Suppose you have written a blog. You have an index of all the headings above the blog content. Now, you want that when someone clicks the particular heading then the page should scroll and take the user to that particular section.

Look at this ……page for example. Click the link in top index section to navigate.

How to create an anchor link?

To create anchor link you need to specify the id attribute to the opening tag of the target element.

We have defined the anchor. Now, This section will be shown when user clicks the anchor link I am about to create.

Create anchor link and specify the id with # prior to it inside href attribute.

If the ‘chapter 11’ exists in another web-page then specify the link before #

5HTML file paths

There are two types of file paths

Absolute URL (full web address)
Relative URL (related to the current page)

Suppose you want to create a link to any other website, then you can specify the complete URL in href attribute. This full link will be called absolute file path.

Suppose you are linking to the same website you are working on. Then you must specify the link as per the location of the file. This type is called relative file path.

Consider this directory structure and the following cases for relative file path-

The highlighted lines are the folders and rest are files inside those folder. Now lets understand the possible case-

Case 1

Suppose you are working on index.html and want to link to page1.html
i.e., When the file exists in the same folder.

Case 2

Suppose you are working on index.html and want to link to dog-foods.jpeg
i.e., When the file exists in another folder inside same folder.

Case 3

It’s always easy to link downward as shown in the above cases. But what if you are editing a file inside pages folder and want to link to page1.html

You cant use the case 1 method because page1.html is not inside the pages folder. That means that you need to go one level up to link to page1.html

As you can see that we have added ../to go one level up to find the file.

Similarly, if you are working in a file inside pages folder and want to attach the file from the image folder. Then, we will go a level up using ../ and write the path to the file.

Case 4

In case you are working in story1.html and want to link to page1.html

Then you need to go two levels up. One level will take you to pages folder and second level up will take you to the root folder where page1.html is located.

Note: You must use relative file paths whenever possible. Especially when you are creating websites inside localhost because when you take the website live then the absolute file paths of localhost won’t work.



Please enter your comment!
Please enter your name here