HTML Links - how to use <a> tag

The "a" tag, known as the anchor element, states a hyperlink to a web page. The hyperlink can navigate to the same page or a different page on the web. It can also link to a section of a web page.

When defined, the a tag could be easily used in the following way.

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

Attributes

The <a> tag supports the global and event attributes.

download
The download attribute is introdueced in HTML5 and when a user clicks on the link, the user will get a prompt to save the requested file. Depending on the browser, the user gets a prompt with the option to rename the file. At the time of writing, this feature is not available in IE. The saved file can be of any name that is allowed by the operating system. The download attribute can be set in the following way.
<a href="http://faragta.com" download="file.txt">Faragta Learning</a>
href
Defines the URL the link is linking to.
ping
Defines the URL that would be notified if the user clicks on the link. It can contain multiple URLs space separated.
rel
Defines the relation between the current and the linked document.
type
Defines the media type of the linked document
target
Defines where the linked document will open (new window, current window)

Examples

Linking within the same site

<a href="/">Faragta Learning</a>

Linking to an external site

Links can be created to an external site in the same way as linking within the same site except that an absolute URL is required.

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

Linking to a section of a page

Links can be created to any section of a page by using the id of that section. id is a global attribute and hence all elements support it. To link to the required element, id of that element needs to be set and then linked to using the hash "#" symbol.

<section id="s1">dummy section</section> <a href="#s1">Link to section 1</a>

Linking from an image

Images can be used to link to web documents. Sometimes a page can display thumbnails and when clicked the full image will open up.

<a href="http://faragta.com"><img src="img.gif" /></a>

Linking to an email address

Links can be created to an email address by using the mailto link. The mailto links are quite interesting as it can be used to send emails to multiple recipients, cc'ed recipients, subject added and also sent without a recipient.

<!--Link to open email application--> <a href="mailto:"></a> <!--Link to open email application with the To filled in--> <a href="mailto:error@faragta.com">Send an email</a> <!--Link to open email application with multiple To filled in--> <a href="mailto:error@faragta.com,error2@faragta.com">Send an email</a> <!--Link to open email application with the To and CC filled in--> <a href="mailto:error@faragta.com?cc=error2@faragta.com">Send an email</a> <!--Link to open email application with the To, CC and Subject filled in--> <a href="mailto:error@faragta.com?cc=error2@faragta.com&subject=subject%20line">Send an email</a>

Linking to a phone number

Links can be created to phone numbers. Since most websites are (should be) compatible with mobile browsers, it is very useful to be able to link to phone numbers. For example, a website can have a contact us page with links to phone numbers that can be dialled from a phone.

<a href="tel:+6112345678">+61 123 456 78</a>

Linking to download a XML file

Files can be downloaded by using the "download" attribute of the </a> tag. The download attribute is introduced as part of HTML5. Note that all browsers do not support the download attribute.

<a href="http://faragta.com" download="file.xml">Faragta Learning</a>

Styling links

Links can be styled like any other elements. For example, color, background color, etc can be set. Custom styling can also be applied when the element is hovered over or clicked previously.

<a style="color:red; text-decoration:none;" href="http://faragta.com">Faragta Learning</a>