A href in HTML

In this article, we will discuss the “a href ” in HTML. This is also a very easy topic and it becomes interesting once you start using it on your webpage. Let’s learn about it more. Read about Doctype, Address, Applet tag in HTML

Difficulty level: Easy

Introduction

Suppose you may want to add some links to your webpage. These may be some internal links, or external links, or even a link to a mail. This is when the anchor tag comes into the picture for the rescue.

Definition

The anchor tag is used to add links to a webpage with the help of the attribute “href”. Here href means ” Hypertext Reference”. The links can be web pages, files, email addresses, locations on the same page, or anything else.

Syntax

The syntax of anchor tag is as follows,

<a attribute/href=" ">
..(words that needs to be linked)
</a>

The content within the <a> tag should represent the place of destination.

Link Appearance

The link appearance is as follows,

  • An unvisited link appears in blue and underlined.
  • A visited link appears in purple and underlined.
  • An active link appears in red and underlined

These colors are default and you can change it if you want.

Notes

  • If <a> tag doesn’t have href attribute, it just acts as a placeholder.
  • If another webpage is linked, then it opens in the same tab unless it is specified to open in another tab.
  • For styling the links, use CSS links and CSS Buttons.

Browser Support

The browser that supports <a> tag are,

  • Google Chrome
  • Firefox
  • Edge
  • Internet Explorer
  • Opera
  • Safari

Attributes

The main attribute we are discussing is “href”. This attribute has an URL as its value. The URL specifies the link of the page it has to move or it is the destination web page.

Global Attributes

The <a> tag supports global attributes. Global attributes can be used throughout the program or code.

Event Attributes

The <a> tag supports event attributes too.

Specifications

TagBoth start and end tag is mandatory.
DOM interfaceHTML AnchorElement

Default CSS settings

The default CSS for <a> tag is mostly like the code given below.

a:link, a:visited {
  color: (internal value);
  text-decoration: underline;
  cursor: auto;
}

a:link:active, a:visited:active {
  color: (internal value);
}

Examples

Now let’s see some examples for the <a> tag for the href attribute.

Example 1

Linking to a website in the same page.

<!DOCTYPE html>
<html>
<body>

<a href="https://www.Google.com">Visit Google.com!</a>
</body>
</html>

Run the code here

Output

a href in HTML- google
Output of the link

Note: It is better to run the output using a text editor rather than an online compiler for the <a> tag. The desired output may not be possible.

Example 2

We can also use an image as a link. For this just display the image and to it ass the <a> and the href attribute. Let’s see an example below.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<a href="https://Google.com">
<img border="0" alt="Pic" src="C:\Users\sathyalily\Documents\photo-1503023345310-bd7c1de61c7d.jfif" width="100" height="100">
</a>
</body>
</html>

Output

a href in HTML- img2
Output for image with link

If we move the mouse over the picture a hand symbol appears. That indicates the image has a link. Try running your own code to get the desired output.

Example 3

Now, whatever the link we added to the webpage. What if we want to make the link open in a new tab?

In the <a> tag along with href just add another attribute target and give its value as _blank. This makes the link open in a new tab. Let’s see the example.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<a href="https://www.Google.com" target="_blank">Visit Google.com!</a>
</body>
</html>

Output

first output
First output
Second one

When we run the code, we get the output like the first image. When we open the link, the second tab appears. Try it out!

Example 4

Now say, you need to add an email as a link. Let’s fond out how to do it

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<a href="mailto:[email protected]">Send email</a>
</body>

</html>

This leads to a webpage with the link. When you click the link a pop-up menu appears linking you to the e-mail to be opened.

Output

a href in HTML- email
E-mail link

Example 5

Let’s see an example for linking a phone number.

<!DOCTYPE html>
<html>
<head>

<title>Page Title</title>
</head>
<body>
<a href="tel:+4733378901">+47 333 78 901</a>
</body>
</html>

This too leads to a pop menu directing you to make a call to the given number.

Output

phone -href
Phone output

Example 5

Now using the href tag, you can create a link to move to and fro within the same page. This is called an interlink. This is done by giving the section id with the symbol #

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<a href="#section2">Go to Section 2</a>
</body>
</html>

Note: The webpage you are interlinking should contain the id otherwise you won’t get the id.

Example 5

You can also link JavaScript to your webpage. Let’s see an example.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>

<body>
<a href="javascript:alert('Hello World!');">Execute JavaScript</a>
</body>
</html>

Output

Output for JavaScript

Just for your information, JavaScript always displays the result in the form of pop up menu.

Conclusion

In this article, we have discussed a href in html. This may be a little confusing. But once you get hold of it, you can master it easily. Also, know that the anchor tag many attributes apart from href. So, this is only a part of the tag.

Also. know that learning HTML requires a lot of practice and patience. Never stop learning, keep practicing, and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *