Adding and Editing Links in HTML

One of the most essential tags in HTML is the <a> tag which is used to add links to your webpage. This article explains the attributes of this tag. What are its defaults and what modifications you can make to it.

What is a link?

A link, or a hyperlink is a reference given on a webpage to a different webpage. It can lead to opening another page from the same domain (local link) or a different domain (external link). In HTML, we use the <a> tag to create a hyperlink reference to a different webpage. Lets see how that works.

Syntax

We use the following syntax to create a link on the webpage:

<a href=”address of the link”>Name of Link</a>

The <a></a> are the opening and closing tags and the ‘href’ is an attribute of this tag used to provide the hyperlink. We provide the name to be displayed in the middle of the opening and closing tags. Example:

<a href=”https://www.google.com”>Click here to visit Google</a>

Default Style of a link

Across all browsers, links have a default style of appearance. They are underlined, blue when not clicked, purple after they are clicked and red when active. We can change these default styles and design our links according to our requirements using a little css.

Changing Default Styles of a Link

We change the default style of our links using pseudo classes in css. For the purpose of this article, let us remove the underline from our link and change its colour to ‘green’ when not clicked, ‘brown’ after its clicked, ‘red’ for when the cursor hovers over the links and blue while its active.

Here’s the code:

a:link { text-decoration: none; color: green;} // when link not clicked

a:visited {color:brown;} // after link has been clicked

a:hover {color:red;} // when cursor hovers over the link

a:active {color:blue;} // when the link is active

The ‘target’ attribute

Its not enough that you have a link on your webpage. Sometimes, you want the link to open on a different tab or window so the user does not loose your page in the process. We use the ‘target’ attribute of the <a> tag for that.

Syntax:

<a href=”https://www.google.com” target=”_blank”>Click here to visit Google</a>

The properties used with this attributes are as follows:

_blank : to open link on a different tab or window

_self : this is the default property. It opens the link on the current page

_parent : Opens the link in the parent frame

_top : Opens the link in the full body of the window

framename : Opens the link in a frame

It is my sincere hope that you found this article informative and helpful. Let me know in the comments below if you want to read articles on similar topics. You can study and experiment in much more detail about links in html here.