HTML Hyperlink

Written By:

Updated on

HTML Tutorial rating by Jasmine ⭑ ⭑ ⭑ ⭑ ⭑ Average rating: 5.0, based on 79 reviews
  1. Home
  2. Frontend
  3. HTML
  4. Hyperlinks
  1. Attributes
  2. Empty Link
  3. Relative Link
  4. Absolute Link
  5. Internal Link
  6. Email Link
  7. Telephone Link

Hyperlink

HTML hyperlinks are built using <a> tag, formally known as the anchor tag . A hyperlink defines a link <a href=""> between webpages in HTML. A hyperlink connects a webpage with other webpages or external pages. Hyperlinks can be used as internal links, external links, email links, or telephone links.

In HTML5, a hyperlink can contain both block-level and inline-level elements. That means, we can include text, an image, or a div inside a hyperlink.

Anchor Tag

Anchor Tag was the previous name of hyperlinks till html4/xhtml. But in HTML5, the anchor tag was renamed hyperlink.

Anchor Tag 


<a>Anchor Tag</a>

Hyperlink means an a tag with href attribute. Hyperlink is used to link webpages.

Hyperlink Tag 


<a href="">Hyperlink Tag</a>

Hyperlink Attributes

Hyperlinks includes both compulsory and recommended attributes. Here are the attributes used in hyperlinks.

Hyperlink Attributes
Attribute Use
href http path hyperlink
targettarget of hyperlink, by-default its _self.
downloadto download hyperlink path instead of opening
relrel="noreferrer" or rel="noopener" for external links
tabindexchange tabindex of hyperlinks

There are six types hyperlinks. Types of Hyperlinks are defined on the basis of their path. Here are six type of html hyperlinks with example and usage.

Hyperlinks Types

  1. Empty Link
  2. Relative Link
  3. Absolute Link
  4. Internal Link
  5. Mailto Link
  6. Telephone Link

An hyperlink without href value is a blank link. Usually we avoid empty hyperlinks as they refresh or reload webpages.

Empty Link 

    <a href="">Empty Link</a>

Prevent hyperlink to reload page

Empty Link 


    <a href="javascript:void(0)">Empty Link</a>

Relative link means a hyperlink with path relative to root directory. If your webpage is saved on desktop, then desktop is your root directory, but if it's in a folder, that folder is your root directory.


<a href="webdesigning.html">Web Designing Tutorials </a>

Absolute Link is hyperlink with Absolute Path. This could be http, https, or file protocol based.


<a href="https://tutorial.techaltum.com/webdesigning.html">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="#home">Home</a>  
<a href="#about">About</a>  
<a href="#blog">Blog</a> 
  
<div id="home">Section 1 Division</div> 
<div id="about">Section 2 Division</div> 
<div id="blog">Section 3 Division</div>

Mailto 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.

Mail Us 

<a href="mailto:user@domain.com">Mail Us</a>

Mail with Subject

Mail Us 

<a href="mailto:user@domain.com?subject=test">Mail Us</a>

Mail with Subject and cc

Mail Us 

<a href="mailto:user@domain.com?subject=test&cc=mail2@domain.com">Mail Us</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.

Click To Call 

<a href="tel:+9101204280181">Call Tech Altum</a>

SMS link is used using sms: followed by phone number in href. This is used to send sms on click of link.

SMS me 

<a href="sms:+919898989898?&body=hello there">Call Tech Altum</a>

Hypertext Reference ( href="")

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

<a href="/cart.html">Link 4</a>   	
Root 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)

Target attribute

A target attribute ( target="" ) is used to tell window where to open that particular link.
Various values of target

  1. _self ( By Default) Open link in same window
  2. _blankopen link in new tab
  3. name of frame( iframe or frame)Open the link on frame whose name is there

Values of target attribute

		
<iframe name="frame1" ></iframe>


<a href="https://www.techaltum.com" target="_blank">_blank</a>
<a href="webdesigning.html" target="frame1">frame1</a><

Click on the link to see behavior of following target



_blank
frame1

SEO Best Practices for Hyperlinks

To improve your website's SEO, follow these best practices when creating hyperlinks:

  • Use descriptive anchor text that includes relevant keywords.
  • Avoid generic text like "click here" or "read more".
  • Use the rel="noopener" or rel="noreferrer" for external links to improve security and SEO.
  • Ensure links are accessible and work on mobile devices.
  • Use internal links to improve site structure and user navigation.