Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Difference between normal links and active links
The hyperlinks, which are also known as links, are crucial components in websites nowadays. These are clickable and can be used to navigate between source webpage to different pages or the sections in the same webpage.
In most of the websites, the links will appear as underlined and differently colored. Links are categorized into the following types −
Unvisited Links
Visited Links
Active Links
Let’s discuss about the links mentioned above with suitable examples further in this article.
Unvisited Links
In HTML, an unvisited link is a hyperlink that is not yet clicked by the user. By default, the unvisited links will be in blue in color with an underline. However, we can customize the style using the CSS properties (a:link).
Example
In the following example, we have created a hyperlink without any customization using CSS properties.
<html> <head> <title>Difference between normal links and active links</title> </head> <body> <h3>Click here to visit → <a href="https://www.tutorialspoint.com/">Tutorialspoint</a> </h3> </body> </html>
As we can see in the output, the hyperlink appears in the default blue color and with an underline.
Visited Links
A visited link is a hyperlink that is clicked by the user. These indicate that the links have been visited previously. By default, in most of the browsers, the visited links will be in purple color and with an underline. However, we can customize the style of visited links using the CSS properties (a:visited).
Example
In the following example, we have created a hyperlink and customized the style using CSS properties.
<html>
<head>
<title>Difference between normal links and active links</title>
<style>
a:visited {
color: purple;
background-color: transparent;
text-decoration: none;
}
</style>
</head>
<body>
<h3>Click here to visit → <a href="https://www.tutorialspoint.com/">Tutorialspoint</a>
</h3>
</body>
</html>
After clicking the link, it will redirect you to the destination page and if you come back to the original page, you can see that the link color will be changed to purple. This indicates that, you have clicked on it and visited the destination page.
Active Links
An Active link is a hyperlink that is currently being interacted with the user. Whenever the user holds the mouse button on the link and not released yet or if right clicked on it, it will change its color into red, this is when the link will be in active state.
The active state is temporary and ends once the user releases the mouse button. However, we can customize the style of the active links using the CSS properties (a:active).
Example
In the following example, we are creating a hyperlink and customized it’s style using CSS.
<html>
<head>
<title>Difference between normal links and active links</title>
<style>
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
</head>
<body>
<h3>Click here to visit → <a href="https://www.tutorialspoint.com/">Tutorialspoint</a>
</h3>
</body>
</html>
If you hover the mouse or right click on the link, it will change its color to red. This is when the user is in interaction with the link.
310 Views
