HTML Links

HTML links, called hyperlinks, provide a mechanism for a user to navigate from one web document to another. The link needs to contain the web address of the document also known as the URL. Links is an important mechanism as the user can navigate to any web page (as linked) from a given page. Almost any web element can be turned into a link, for example, an image, can be turned into a link.

Linking Documents

A link can be created by using the <a> tag, also known as the anchor tag. Any HTML element within the <a> tag becomes the link. here is an example on how a link can be created.

<a href="http://www.faragta.com">Faragta Learning</a>

The target Attribute

A link can open in the same tab of the web browser and also in a new tab or if frames are used then it could open in a frame. The location in the browser where the link would open up can be defined using the "target" attribute of the <a> tag. Here is an example on how to use the target attribute.

<a href="http://www.faragta.com" target="_blank">Faragta Learning</a><!--open link in new browsing context, maybe a new window--> <a href="http://www.faragta.com" target="_parent">Faragta Learning</a><!--open link in parent's browsing context--> <a href="http://faragta.com" target="_self">Faragta Learning</a><!--open link in same browsing context--> <a href="http://faragta.com" target="_top">Faragta Learning</a><!--open link in top level browsing context-->

Use of Base Path

A link should usually contain the full URL. However, it is not necessary to use the full URL when linking within the same domain. In this scenario, a base path can be set by using the <base> tag within the <head> tag and the browser would automatically generate the full URL from the relative URL.

<head> <base href="http://faragta.com/"> </head> <body> <a href="/default.html">Faragta Learning</a> </body>

Linking to a Page Section

Usually a link would open up the beginning of a web page or document. Sometimes, it is necessary to link to a section within a document. For example, in this current page, I might want to link to the "Create an Image Link" section directly instead of linking to the top of the document and asking the user to scroll to the appropriate section. To enable linking to a section, first an "id" attribute needs to be assigned to the section and then a link needs to be generated along with a #ID component at the end of the URL.

<body> <section id="section1">Learning at Faragta Learning</section> <a href="#section1">Faragta Learning</a> </body>

Setting Link Colors

Most browsers generate a link in underlined, blue color by default. CSS allows changing the default styles for the link in active, visited and hovered over state.

<head> <style> a:link { color:red; } a:active { color:blue; } a:hover { color:green; } a:visited { color:orange; } </style> </head> <body> <a href="http://faragta.com">Faragta Learning</a> </body>

Create an Image Link

As stated previously, an image can be easily turned into a link simply by embedding the <img> tag within the <a> tag.

<a href="http://faragta.com"><img src="/images/ex.jpg" alt="Faragta Learning"/> </a>

Link to a Phone Number

Links can be created to a phone number by using the "tel" prefix. This is an important as more and more websites are available via mobile devices that can call phone numbers.

<a href="tel:+0123456789">Call +0123456789</a>

Link to an Email Address

Links to en email address can be created by using the mailto link. When clicked, the link will open up the default email program for the user and allow them to send an email.

<a href="mailto:abc@abc.com">Email abc</a>

Download File

HTML5 has introduced a new attribute "download" that allows the linked document to be downloaded to the user's device instead of opening in the browser.  This can be useful for data that is generated on the fly and then allowing the user to download it.  Usually, when clicked the user get a prompt to name the file and save it, however, this is dependent on the browser.

Note: This only works in some browsers and for files within the same origin.

<a href="/images/abc.jpg" download>Download image</a>

Ping

HTML5 has introduced a new attribute "ping" that allows the page to track if the linked has been clicked. The ping attribute sends a HTTP POST request to the "pinged" URL and works when href is present and can contain a list of URLs that needs to be notified the link is clicked. This could be useful for monitoring and tracking.

<a href="http://faragta.com" ping="http://www.faragta.com/track-ping">

rel attribute

The rel attribute specified the relation between the current page and the linked page. The rel attribute can contain a number of the values as specified at "link types". One interesting value is "nofollow" which usually means the search engine should not crawl the link.

<a href="dont-track.html" rel="nofollow">Don't track this page</a>