Table of contents

Introduction

What Are alink and vlink?

Syntax for alink and vlink

3.1.

Example

Parameters

Example of alink and vlink in HTML

Limitations of alink & vlink

Frequently Asked Questions

7.1.

Are alink and vlink still used in modern HTML?

7.2.

What is the difference between alink and vlink?

7.3.

Do all browsers support alink and vlink?

Conclusion

Last Updated: Feb 16, 2025

Easy

alink and vlink in HTML

Author Sinki Kumari

Do you think IIT Guwahati certified course can help you in your career?

Yes

Introduction

The alink and vlink attributes in HTML were used to define the colors of active and visited links on a webpage. The alink attribute specified the color of a link when clicked, while vlink set the color of visited links. However, these attributes are now obsolete, and CSS is recommended for styling links.

In this article, we will learn about the alink and vlink attributes in HTML, how they define active and visited link colors, and their usage in web design.

What Are alink and vlink?

`alink` & `vlink` are attributes used in HTML to define the colors of links in different states within a webpage. These attributes are part of the `<body>` tag & are used to enhance the visual appearance of links.

1. alink (Active Link): The `alink` attribute specifies the color of a link when it is actively being clicked or selected by the user. For example, when you click on a link, it temporarily changes to the color defined by `alink`.

2. vlink (Visited Link): The `vlink` attribute defines the color of a link after it has been visited by the user. Once a user clicks on a link & navigates to the destination, the link color changes to the one specified by `vlink`.

These attributes were commonly used in older versions of HTML (HTML4 & earlier) to style links. However, in modern web development, CSS is preferred for styling purposes. Despite this, understanding `alink` & `vlink` is still useful, especially when working with legacy code or learning the evolution of HTML.

Let’s discuss a basic example of how `alink` & `vlink` are used in an HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>alink & vlink Example</title>
</head>
<body alink="red" vlink="purple">
    <h1>Understanding alink & vlink</h1>
    <p>Here are some links:</p>
    <ul>
        <li><a href="https://www.google.com">Google</a></li>
        <li><a href="https://www.wikipedia.org">Wikipedia</a></li>
        <li><a href="https://www.github.com">GitHub</a></li>
    </ul>
</body>
</html>

Output

In this Code:

The `alink="red"` attribute sets the active link color to red. When you click on any link, it will turn red.
The `vlink="purple"` attribute sets the visited link color to purple. After visiting a link, it will change to purple.
The `<a>` tags create hyperlinks to external websites.

This example shows how `alink` & `vlink` work together to style links dynamically based on user interaction.

Syntax for alink and vlink

The alink and vlink attributes are specified within the <body> tag in an HTML document. Below is the basic syntax:

<body alink="color" vlink="color">

Example

<body alink="red" vlink="green">
    <a href="https://www.codingninjas.com">Visit Coding Ninjas</a>
</body>

alink="red": The link turns red when clicked.
vlink="green": The link turns green after being visited.

Parameters

The alink and vlink attributes accept color values in different formats:

Named Colors: e.g., red, blue, green.
Hexadecimal Colors: e.g., #FF0000 (red), #00FF00 (green).
RGB Colors: e.g., rgb(255, 0, 0) (red), rgb(0, 255, 0) (green).

Example using hexadecimal values:

<body alink="#FF0000" vlink="#008000">
    <a href="https://www.example.com">Example Link</a>
</body>

Example of alink and vlink in HTML

Here is a complete example demonstrating alink and vlink in action:

<!DOCTYPE html>
<html>
<head>
    <title>alink and vlink Example</title>
</head>
<body alink="blue" vlink="purple">
    <h2>alink and vlink Example</h2>
    <p>Click the link below and observe the color changes.</p>
    <a href="https://www.codingninjas.com">Visit Coding Ninjas</a>
</body>
</html>

Explanation:

When the link is clicked, it turns blue (alink color).
After the link is visited, it remains purple (vlink color).

Expected Output:

Before clicking: Default link color.
While clicking: Blue.
After clicking: Purple.

Limitations of alink & vlink

While `alink` & `vlink` are useful, they have some drawbacks:

1. Limited Customization: These attributes only allow you to set colors. You can’t add hover effects, animations, or other advanced styles.

2. Outdated Practice: Modern web design relies on CSS for styling links. CSS provides more flexibility & control over how links look & behave.

3. Browser Support: Some modern browsers may not fully support `alink` & `vlink`, as they are considered outdated.

For example, here’s how you can achieve similar effects using CSS:

<!DOCTYPE html>
<html>
<head>
    <title>CSS Alternative to alink & vlink</title>
    <style>
        a:link {
            color: black;
        }
        a:visited {
            color: purple;
        }
        a:active {
            color: orange;
        }
    </style>
</head>
<body>
    <h1>CSS Styled Links</h1>
    <p>Click on the links below to see CSS in action:</p>
    <a href="https://example.com">Visit Example.com</a><br><br>
    <a href="https://another-example.com">Visit Another Example</a><br><br>
    <a href="https://third-example.com">Visit Third Example</a>
</body>
</html>

Output

In this Code:

The `a:link` selector styles unvisited links.
The `a:visited` selector styles visited links.
The `a:active` selector styles links while they are being clicked.

CSS provides a cleaner & more flexible way to style links compared to `alink` & `vlink`. However, understanding these attributes is still valuable, especially when working with older websites or learning the basics of HTML.

Frequently Asked Questions

Are alink and vlink still used in modern HTML?

No, modern web design prefers CSS (:active and :visited pseudo-classes) for styling links instead of alink and vlink.

What is the difference between alink and vlink?

The alink attribute changes the color of a hyperlink when it is clicked, whereas vlink changes the color of a hyperlink after it has been visited.

Do all browsers support alink and vlink?

Older browsers support them, but modern browsers prioritize CSS-based styling.

Conclusion

In this article, we learned about alink and vlink in HTML and how they help control the colors of active and visited links. These attributes improve website design by making links more user-friendly and visually clear. Understanding their usage allows developers to enhance navigation and create a better user experience for visitors.

Live masterclass

Microsoft SDE Roadmap: Use AI Tools to Succeed

by Pranav Malik

19 May, 2025

01:30 PM

518+ registered

Break into MAANG Data Analyst roles from Non-Tech Profession

by Abhishek Soni

20 May, 2025

01:30 PM

433+ registered

SDE LinkedIn & Naukri Hacks to Get More Recruiter Calls

by Shantanu Shubham

21 May, 2025

01:30 PM

325+ registered

Amazon Data Analyst: Advanced Excel & AI Interview Tips

by Megna Roy

22 May, 2025

01:30 PM

309+ registered

Microsoft SDE Roadmap: Use AI Tools to Succeed

by Pranav Malik

19 May, 2025

01:30 PM

518+ registered

Break into MAANG Data Analyst roles from Non-Tech Profession

by Abhishek Soni

20 May, 2025

01:30 PM

433+ registered

View more events