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.
<a>This is a link text</a>
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.
<a href="https://4coals.in">This is a link text</a>
This will now work as a link. On clicking, you will land to the specified address.
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
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.
<a href="https://4coals.in" title="Order handmade portraits">This is a link text</a>
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.
<h2 id="Chapter11">Chapter 11</h2>
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.
<a href="#Chapter11">Jump to Chapter 11</a>
If the ‘chapter 11’ exists in another web-page then specify the link before #
<a href="learn-html5.html#Chapter11">Jump to Chapter 11</a>
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-
Suppose you are working on index.html and want to link to page1.html
i.e., When the file exists in the same folder.
<a href="page1.html">This is a link text</a>
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.
<a href="images/dog-foods.jpg">This is a link text</a>
<!-- or -->
<a href="images/birds/parrot.jpg">This is a link text</a>
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
<a href="../page1.html">This is a link text</a>
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.
<a href="../images/cat-foods.jpg">This is a link text</a>
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.
<a href="../../page1.html">This is a link text</a>