HTML Hyperlinks are created using
<a> tag. Formarly known as anchor tag, hyperlink defines a link
<a href=""> in html document. A hyperlink links a webpage with other webpages and external pages. A hyperlink can be Internal Link, External Link, Internal Link, Mail Link or telephone link .
In HTML5, an hyperlink can contain both block level and inline level elements. That means, we can write text, image or a div inside hyperlink.
Anchor Tag was the previous name of hyperlinks till html4/xhtml. But HTML5 renamed anchor tag to hyperlink.
Hyperlink means an a tag with href attribute. Hyperlink is used to link webpages.
<a href="">Hyperlink Tag</a>
There are six types hyperlinks. Types of Hyperlinks are defined on the basis of their value. Here are six type of html hyperlinks with example and usage.
An hyperlink without href value id blank link. Usually we avoid empty hyperlinks as they refresh or reload webpages.
<a href="">Empty Link</a>
Prevent a link to reload page
Relative link means a hyperlink with path relative to root directory. If your webpage is saved on desktop, then desktop is your root directory.
<a href="webdesigning.html">Web Designing Tutorials </a>
Absolue Link is hyperlink with Absolute Path. This could be http, https, or file protocol based.
Web Designing Tutorials </a>
Internal Link is hyperlink with Internal Path. To call an element with id, internal link is used. As id is unique, internal link call that element.
<a href="#section1">Section 1</a> <a href="#section2">Section 2</a> <a href="#section3">Section 3</a> <div id="section1">Section 1 Division</div> <div id="section2">Section 2 Division</div> <div id="section3">Section 3 Division</div>
Mailto Link is used to create Click to mail link or Email Link in html. This is very useful when we are showing our mail to user. On click of mail link, your mail application, (Outlook, Gmail, mail etc) will open compose tab.
<a href="mailto:email@example.com">Mail Link</a>
Click to call is used using tel: followed by phone number in href. This is recommended on a webpage to show telephone numbers with click to call feature.
<a href="tel:+9101204280181">Call Tech Altum</a>
href attribute is used in an anchor tag to specify the URL( Uniform Resource Location) of the page link to go. It can be a relative link, absolute link or an id.
A relative Link is used to link pages within same domain.
Example of Relative link
<a href="contact.html">Link 1</a> Relative link in same directory <a href="blog/blog1.html">Link 2</a> Relative link in child directory <a href="../cart.html">Link 3</a> Relative link in parent directory
An Absolute Link is used to link pages from their Absolute Path. for exp
<a href="http://www.domain.com">Link</a> is an Absolute Link as it contains domain name and page.
Example of Absolute link?
<a href="http://www.domain.com">Link</a> ( Absolute Link) <a href="https://www.facebook.com/thetechaltum">Join us on Facebook</a> ( Absolute Link of facebook page)
A target attribute ( target="" ) is used to tell window where to open that particular link.
Various values of target
- _self ( By Default) Open link in same window
- _blankopen link in new tab
- name of frame( iframe or frame)Open the link on frame whose name is there