Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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 Links that haven't been clicked yet
Visited Links Links that have been clicked previously
Active Links Links currently being interacted with (mouse pressed down)
Let's discuss about the links mentioned above with suitable examples further in this article.
Syntax
Following is the syntax for creating hyperlinks in HTML
<a href="URL">Link Text</a>
The CSS pseudo-classes used to style different link states are
a:link { /* unvisited link styles */ }
a:visited { /* visited link styles */ }
a:hover { /* mouse over link styles */ }
a:active { /* active link styles */ }
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
<!DOCTYPE html> <html> <head> <title>Unvisited Links Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h3>Click here to visit ? <a href="https://www.tutorialspoint.com/">Tutorialspoint</a></h3> </body> </html>
The output of the above code is
Click here to visit ? Tutorialspoint (blue, underlined)
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
<!DOCTYPE html>
<html>
<head>
<title>Visited Links Example</title>
<style>
a:visited {
color: purple;
background-color: transparent;
text-decoration: none;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Click here to visit ? <a href="https://www.tutorialspoint.com/">Tutorialspoint</a></h3>
</body>
</html>
The output of the above code is
Click here to visit ? Tutorialspoint (purple, no underline after visiting)
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 by 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 appearance. 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 its style using CSS
<!DOCTYPE html>
<html>
<head>
<title>Active Links Example</title>
<style>
a:link {
color: blue;
text-decoration: underline;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: black;
text-decoration: underline;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Click here to visit ? <a href="https://www.tutorialspoint.com/">Tutorialspoint</a></h3>
<p>Try hovering over the link and then clicking and holding the mouse button.</p>
</body>
</html>
The output shows different states
Normal state: Tutorialspoint (blue, underlined) Hover state: Tutorialspoint (red, underlined) Active state: Tutorialspoint (yellow text on black background, underlined)
If you hover the mouse over the link, it will change its color to red. When you click and hold the mouse button down, the link becomes active and appears with yellow text on a black background.
CSS Pseudo-Class Order
When styling links, it is important to follow the correct order of CSS pseudo-classes to ensure they work properly. The recommended order is
Example Proper CSS Order
<!DOCTYPE html>
<html>
<head>
<title>CSS Pseudo-Class Order</title>
<style>
/* Proper order: LVHA (Love Hate) */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; background-color: yellow; }
a:active { color: white; background-color: black; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Test all link states:</h3>
<p><a href="https://www.tutorialspoint.com/">Tutorialspoint Website</a></p>
<p><a href="https://www.google.com/">Google Website</a></p>
</body>
</html>
The mnemonic "LoVe HAte" helps remember the order: Link, Visited, Hover, Active.
Differences Between Normal Links and Active Links
Following table shows the key differences between normal links and active links
| Normal Links (Unvisited/Visited) | Active Links |
|---|---|
| Persistent state that remains until clicked (unvisited) or after being clicked (visited). | Temporary state that exists only while the mouse button is pressed down. |
| Default colors: blue (unvisited), purple (visited). | Default color: red, but commonly customized with CSS. |
| Indicates the link's history with the user's browser. | Indicates current user interaction with the link. |
Styled with a:link and a:visited pseudo-classes. |
Styled with a:active pseudo-class. |
| Visible for extended periods based on browser history. | Visible only during the brief moment of clicking. |
Conclusion
Normal links represent the default and visited states of hyperlinks, while active links show the momentary interaction when a user clicks and holds the mouse button. Understanding these different link states helps create better user experiences through appropriate CSS styling and visual feedback.
2K+ Views
