HTML Links

One of the primary features of HTML is links. A link is an address of a resource on the web, it can be a web page or some other media content or a file. We use links to locate things on the web, for eg. this webpage is located at an address which you can see in your browser's address bar, that's a link to this page. You can copy this link, share it with your friends and when they put this into their web browser, they will land up on this same page.

A hyperlink is a clickable link, which when pointed will take you to the underlying address or technically a URL. Hyperlinks make navigation between web pages smoother and seamless, like when you move between these lessons, you're actually using the hyperlinks. Let's see how we create links.

Creating Links

We can create a hyperlink using the anchor <a> tag. An anchor tag along with the href attribute constitutes a link. Take a look at the syntax below.

<a href="https://www.google.com">Google Search</a>
<a href="/about">About Us</a>

Google Search

About Us

You can observe that the href attribute contains the actual URL the hyperlink points to and the anchor tag wraps the linked text which will be visible to the users. Now when you click on the resulting rendred link below, you'd instantly be taken to that web address and that is how you create a hyperlink in HTML.

You can also wrap an image in between an anchor tag instead of text to create an image link. We will learn about images and media in the coming sections.

Link Classification

Hyperlink or link basically can be classified into three types.

External Link: Links which point to an external domain name are termed as an extenral link. This one below is an example of an external link as it points to website different than the current one.
Internal Link: Links that point to a different page but within the same website or a domain is termed as Internal links.
Local Link: Links that point to elements on the same page are termed as local links. These links help users jump directly to specfic section of a web page, are also termed as bookmark anchors.

Please note that you can append local links to an external or internal links as well, that way it will point to a specific section on the target web page. <a href="https://metabust.com/about#contact-form">Contact Form</a>

Link Schemes

Links are not merely restricted to http or https schemes, any browser supported scheme can also be used, for eg. we can add an email address, a phone number and more. Clicking such links opens the default associated program on your computer. Take a look at example below.

<a href="mailto:[email protected]">[email protected]</a>

Result: [email protected]

So you can see that mailto: or tel: schemes can also be added to an anchor link and by default it opens an associated application on your computer.

Link States

A link in HTML has three states and by default a link will appear in any of the three colors as displayed below. These colors can be modified to any other colors using CSS.

Unvisited Link : A link not visited by a user appears blue
A Visited Link : A link that has been visited at least once by a user appears purple
An Active Link : A link that is being clicked by a user appears red

Link Target

Apart from the href attribute, an anchor tag has another attribute called target. This attribute defines how the link should be opened. The target attribute has the following possible values.

_blank - Opens the URL in a new tab
_parent - Opens the URL in the parent window if in a nested iframes
_self - Opens the URL in the same tab as the link
_top - Opens the link in the iframe container window

The code below will help you understand how to implement the target attribute properly.

<a href="https://google.com" target="_blank">Google.com</a>
<a href="https://google.com" target="_parent">Google.com</a>
<a href="https://google.com" target="_self">Google.com</a>
<a href="https://google.com" target="_top">Google.com</a>

Conclusion

Links are an important feature of HTML, it makes navigating between pages easier. In this lesson, you learnt about the anchor tag its href and target attributes. In the coming lessons we'll learn about some of the common inline formatting elements.

HTML