Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Difference between normal links and active links

  • Last Updated : 10 Oct, 2021

Websites are designed to point you to different resources. You can move from one website to another through links. Links help you to get information from different resources. Links are established in simple HTML web pages through <a> tag.
Links are categorized into three types. Typically a Link is displayed in three different colors based on the usage.

  • Normal links (Unvisited links)
  • Visited links
  • Active links

Example 1: The following example shows the basic example for Normal Link ( Unvisited Link ). If you want to create a link to go to “https://www.geeksforgeeks.org/“, you can get the normal link through this code. The default color is blue color and underlined but you can apply your own custom styling according to the application’s need.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h2>This is a Link</h2>
    <h1>
        Welcome to
        <a href="https://www.geeksforgeeks.org/">
            GeeksforGeeks
        </a>
    </h1>
</body>
  
</html>

Output:                        



Visited Link: In example 1, If you click on the link shown above and again go back to the link page, you can now see the link is in purple color and underlined. It shows that the user has visited this link before. You can do your own custom styling using CSS :visited selector. In the above output, notice the visited link after going back from the home page.

Active Link: In example 1, If you left or right-click any one of the links Visited or Unvisited, it will turn into Red and Underline. Active Links shows that the browser is in the process to load a new resource.  You can do your own custom styling using CSS :active selector. In the above output, notice the active link on right-click of the link.

The <a> tag is supported in almost all browsers. So, these are the 3 types of links with their different usages and default stylings. This helps the user to navigate through different resources. 

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!