HTML Links

Creating links in HTML

Link more correctly known as a hyperlink is used to connect two web-pages of the same website or another website.

Anchor <a> tag is used to create a hyperlink. <a> tag has an attribute href which is used to specify the link of another page.

Example

<a href="http://www.google.com">Google</a>

Types of links in HTML

In HTML, links can be divided into 3 types.

  1. Another page link
  2. Same page link
  3. Mail link

Creating another page link

<a href="https://www.google.com">Google</a>
<a href="https://www.facebook.com" target="_blank">Facebook</a>
<a href="https://www.idiotsdiary.com">Home</a>

  • In the above example, target="_blank" tell the browser to open the link in a new tab.
  • Other values for the target attribute is _self / _blank.
  • _self is the default option for target attribute which opens a link in the same browser tab and _blank opens the link in the new tab.

Creating new page link

The same page links are used to link multiple sections of the same page. The following example demonstrates an example of the same page link...

<h1>Top 3 cars of 2020</h1>
<ul>
    <li><a href="#mahindra-scorpio-car">Mahindra Scorpio</a></li>
    <li><a href="#toyota-fortuner-car">Toyota Fortuner</a></li>
    <li><a href="#toyota-glanza-car">Toyota Glanza</a></li>
</ul>
<a name="mahindra-scorpio-car"></a>
<h2>Mahindra Scorpio</h2>
<p>The BS6-compliant Mahindra Scorpio has been spotted testing in India. The current Scorpio could get a BS6 upgrade before its successor arrives in the country. It could be launched before the March 31 deadline.
The Scorpio is Mahindra’s popular midsize SUV which utilizes a rugged body-on-frame platform. It’s priced from Rs 10.20 lakh to Rs 16.83 lakh (ex-showroom).</p>

<a name="toyota-fortuner-car"></a>
<h2>Toyota Fortuner</h2>
<p>The BS6-compliant Toyota Fortuner SUV has priced from Rs 28.18 lakh to Rs 33.95 lakh (ex-showroom). The Fortuner BS6 will be offered with the existing 2.8-liter diesel and 2.7-liter petrol engine, albeit with upgrades. The diesel engine develops 177PS of power while the petrol motor puts out 165PS of power.</p>

<a name="#toyota-glanza-car">Toyota Glanza</a>
<h2>Toyota Glanza</h2>
<p>Four months after the launch of the Toyota Glanza, the carmaker has launched a new base petrol variant at a price tag of Rs 6.98 lakh (ex-showroom Delhi). This manual variant now gets the naturally aspirated 1.2-liter petrol engine that wasn’t available earlier with only the mild-hybrid available at the time for the G manual variant.
Its price tag undercuts its mild-hybrid counterpart by Rs 24,000 and is equal to the Baleno Zeta petrol manual variant. It carries over the same features as the G mild-hybrid but is thirstier with a fuel efficiency of 21.01kmpl.</p>

To create the same page link following steps should be followed...

  • First Name each section with the anchor tag. To mark each section with the unique name by using the name attribute in the anchor tag.
  • To create the same page link anywhere on the page, create a link and provide the name along with the hash sign in href attribute in the anchor tag.

Miscellaneous link

mailto link: Mail to link is used to send the mail by using any mail client installed on your PC.

<a href="mailto:idiotsdiary@gmail.com">Mail us</a>

tel link: This link is used to create to wrap contact number in a link tag and allows browse to call the specified number by using any installed client on PC (skype) etc.

<a href="tel:8290773375">8290773375</a>

Links in HTML -5 | Video Tutorial