HTML Anchor Tag

The HTML anchor tag is used to direct a user from a document on a webpage to another document on the same web page or a different website using a link.

These HTML links are known as Hyperlinks because users can jump from multiple documents to another by clicking on a link.

The <a> tag, which represents an anchor tag must be used with the href attribute to link two documents. This has to be so because the href attribute contains the link or value to the visiting website.

The code will look like this:

<a href="put the URL here">Put your text here</a>

Let's explain the above line of code:

<a> represents the anchor tag. The anchor tag can as well stand alone without the href attribute.

Here is an example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Anchor Tags</title>
</head>
<body>
   <a>Click here to visit Techstack Tutorials Website</a> 
</body>
</html>

In the above example, when you run the code snippet, a link does not appear under the "Click here…." This is because there is no href attribute present to include the destination of the Techstack Tutorial website. 

The purpose of the href attribute is to allow you to link the destination of the website you want the internet user to visit.

Here is an example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Anchor Tags</title>
</head>
<body>
   <a href="https://techstackinc.com/html/what-is-html/">Here is a link to the backstory of HTML</a></a>
</body>
</html>

From the above example, I included an absolute URL that will drive a visitor to my webpage to the history of HTML on the same website.

If you observe, you'll see that the href attribute is followed by the equals (=) sign and quotation mark (" "). This is the standard and must not be omitted when linking web pages.

Note: An absolute URL begins with https:// or www

HTML Target Attribute

However, supposing you want to visit another website on a different window tab on your browser, how do you do that? 

Keep reading.

By default, when you click on a hyperlink, it opens in the same window tab as the current tab. To change this default setting, we implore the target attribute. And like the href attribute, the target attribute tells the web browser on which tab to open the new link.

Five values can be used in the target attribute:

  1. Blank: When the target attribute value is set to _blank, it opens the new link in a different window.
  2. Self: Self is the default setting of most web browsers. It opens the new link on the current web page.
  3. Parent: When the target attribute value is set to _parent, the web browser opens the document in the parent frame.
  4. Top: When the target attribute is set to _top, the web browser opens the document in an entire window body.

Framename: When the target attribute value is set to _framename, the web browser will open the document in the specified frame name chosen by the programmer.

Here is an example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Anchor Tags</title>
</head>
<body>
   <a href="https://techstackinc.com/html/what-is-html/" target="_blank">Here is a link to the backstory of HTML</a></a>
</body>
</html>

Peculiarities of The Anchor Tag

For every anchor tag, here is what to note,

  • An unvisited link will appear blue by default
  • A visited link will appear purple by default
  • An active will be underlined and appear red by default

The default colors are not permanent and can always be changed using CSS.

Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Anchor Tags</title>
</head>
<body>
    <style>      
        a:link {color:blue;
        }
        a:hover {color: black;
        }
        a:active{color: green;
        }  
        a:visited {color: red;
        }
      </style>
   <a href="https://techstackinc.com/html/what-is-html/">Here is a link to the backstory of HTML</a></a>
</body>
</html>

Between the <a> and link, there's a colon (:) symbol called a pseudo element in CSS selectors. This is used to select the class you want to style in CSS.

a:link means the link will be blue before it is visited.

a:hover means when you hover your mouse over the link (for individuals using a desktop computer), the color will change to black.

a: active means the link will appear green if the webpage is available and running on the internet.

a: visited means the link will appear red after the link has been visited.

Using Image as Links in HTML anchor tag

In situations where you do not want to use text as a link to a document but as an image, here is how to do it.

First, get the image source and also the link to the webpage.

Here is an example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>USING IMAGES AS LINKS IN HTML</title>
</head>
<body>
  <p>In this example we'll use an image as a link to the Backstory of HTML in Techstack Tutorial.</p>
  <a href="https://techstackinc.com/html/what-is-html/">
      <img src="laptop.jpg" alt="An image from unsplash" style="width:80px; height: 80px;">
  </a>
</body>
</html>

You'll be directed to a webpage when you click on the image.

Using Email Address As Links In HTML anchor tag

To directly link a user to an email address, use mailto as the href attribute value.

Here is an example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>USING IMAGES AS LINKS IN HTML</title>
</head>
<body>
  <h4>Let's send a message to Techstack Tutorial.</h4>
 <p>Contact Techstack Tutorial through this <a href="mailto:techstacktutorial@gmail.com">email address.</a></p>
</body>
</html>