Vlink in HTML: A Path to Powerful Web Navigation

by
insurance prospecting ideas 1080x675 1

Vlink in HTML, short for visited link, is an important attribute for HTML body/anchor tag that allows developers to customize the appearance of links that have been visited by the user. Though it’s only a feature but its impact on usability in terms of web design is very high.

Imagine browsing through a website, clicking on various links, and finding yourself lost in a sea of content. In such a scenario, distinguishing between visited and unvisited links becomes crucial for navigation. Here’s where the vlink CSS attribute comes into play, offering designers the power to customize the appearance of visited links, thereby enhancing user experience by easing navigation.

<body vlink="color_name | hex_number | rgb_number">
  1. color_name: It provides the visited link’s color name.
  2. Hex_number: This value indicates the visited link’s color in hexadecimal notation.
  3. rgb_number: This variable describes the visited link’s color in terms of RGB values.
<body id="cID" link="blue" alink="green" vlink="orange">
  <a href="https://www.coderstechzone.com">CodersTechZone.com</a><br>
  <a href="https://www.coderstechzone/html/">CodersTechZone HTML Tutorial</a><br>
  <a href="https://www.coderstechzone/CSS/">CodersTechZone CSS Tutorial</a>
</body>

Code Explanation:

In this above example, the visited link will appear in the specified orange color once it has been clicked by the user.

Output:

Vlink in html
<a href="coderstechzone.com" vlink="orange">Visited Link</a>

Note: HTML5 does not allow HTML vlink attributes. This attribute can be used instead by using the CSS:visited pseudo-class selector.

As vlink attribute is now going to be deprecated we strongly recommend to start using four links states mentioned below:

  • a:link – denotes a normal, unvisited link
  • a:visited – indicates a link that the user has visited
  • a:hover – indicates a link that the user mouse’s over it
  • a:active – indicates a link that the moment it is clicked

In contrary of vlink, alink is also needs to understand. Alink: Also known as an active link. The link that we clicked will be #EE0000 (red – default if user does not change the preference) when it is visible while the website or webpage is open in a separate tab. This indicates that the webpage has been accessed using the link and is now live.

As of now we have learned what is vlink and how to use vlink in html? But instead of using vlink rather we suggested to use different CSS code for all 4 states of a link mentioned above. Happy Coding.

HTML 2 DIV in one row – 3 easy ways to display

by
Untitled design

HTML 2 DIV in one row – A common problem that each and every developer faces at very beginning while learning HTML DIV. Here in this article we will explain 3 most smart ways to position multiple div’s in one row or side by side. So after reading this article you will be able to answer below questions definitely:

  1. How to put two div in one row in HTML?
  2. How do I make two divs on the same line in HTML?
  3. Can I have 2 div in HTML?
  4. How do I put two elements on one line in HTML?
  5. How do I put 3 divs in a row?
  6. How to align two divs horizontally in HTML?
  7. How to set div in one row?
  8. How do I align a div in a row?

To demonstrate every approach, First we will write a basic HTML code for the div elements and then apply different CSS styling to display those in one line.

HTML divs can be arranged in multiple ways to go side by side. To do this, the most widely used 3 CSS properties are display, float and flex. These are the easiest and most effective method the developers love a lot. So to achieve inline or side by side alignment we are now going to use all these 3 most basic CSS properties – Display, Float and Flex. Without wasting anytime let’s begin our coding:

Approach 1 – Position multiple div in single line:

The first and mostly used way is to place two divs in one line/row is by using inline-block value of Display css property. This display:inline-block property will set all div elements side by side. So let’s start the exercise now:

HTML:

<div class='master'>
  <div class='detail'>ONE</div>
  <div class='detail'>TWO</div>
  <div class='detail'>THREE</div>
</div>

CSS:

.master {
  border: 4px dashed green;
  margin: 1px;
  padding: 10px 10px;
  text-align: center;
}
.detail {
  display: inline-block;
  border: 4px dashed red;
  padding: 10px 20px;
  vertical-align: middle;
}

Output:

HTML 2 DIV in one row approch 1

Here we have styled both DIV borders with dashed green and red. Creating spaces among Divs, using padding and margin. Aligning content by using vertical-align and text-align CSS properties. You can change all as per your need. So we are not going to discuss about styling not more as it’s right now is not in our scope.

So our first exercise has bee done successfully. As a result, now we are able to answer – how to make two elements side by side html or even multiple. It’s time to expand our HTML CSS code a bit more. Going to our 2nd approach.

Approach 2 – Html 2 div in one row example:

Using this method, we will show all of the div components inline by applying the float: left property to them. Additionally, users can display all div components in reverse order from the right side by using the float: right CSS option.

To get the HTML 2 DIV in one row or side by side DIV’s what ever the numbers 2 or more, we can use the following HTML CSS code:

HTML:

<div class='master'>
  <div class='detail'>ONE</div>
  <div class='detail'>TWO</div>
  <div class='detail'>THREE</div>
</div>

CSS:

div {
  float: left;
  color: green;
  border: 4px dashed green;
  margin: 10px 20px;
  text-align: center;
}

Output:

HTML 2 DIV in one row approch 2

Approach 3 – Html 2 div in one row:

This method sets the display: flex and flex-direction: row to the parent div of all 3 div element. All of the components inside the parent div will be shown in a single row as a result of the flex-direction: row attribute.

Let’s see all HTML 2 div in one row example code mentioned below. It’s also need to clarify that how many number of divs are there for making inline, it’s not matter actually. If you can make Html 2 div in one row using css you can make more without any difficulties.

HTML:

<div class='master'>
  <div class='detail'>ONE</div>
  <div class='detail'>TWO</div>
  <div class='detail'>THREE</div>
</div>

CSS:

.master {
  display: flex;
  flex-direction: row;
  color: green;
  border: 4px dashed green;
  padding: 5px;
  width: 500px;
}
 
.master div {
  border: 2px solid red;
  margin: 10px 20px;
  width: 100px;
  text-align: center;
  font-size: 30px;
}

Output:

HTML 2 DIV in one row approch 3

So here we have discussed all 3 most popular and effective methods on how to display HTML 2 DIV in one row and now you are all set to position or align multiple or two div in same line css within your HTML file correctly. Finally, if you like our post – please share, like and comment. It’s boost our motivation obviously to write more in future for you all. Thanks for being with us.