Links in HTML
Link is used to connecting our website pages. It is done by an anchor tag of an HTML, anchor tag contains hyper reference link or simply we can say that in a href we write destination page name.
What is a link?
Link is a connection between website pages, we use <a> tag of HTML to link our website pages with href attribute.
Syntax:
<a href=”pagename”>text link</a>
href: it is called hyper reference, it is an attribute of <a> tag. In this we write url or pagename.
Example:
<a href=”about-us.html”>About Us</a>
<a href=”https://www.webdevelopmentinstitute.com/”>web development institute</a>
How to Use Links
We can use links in the following way:
- Text Link
- Image Link
- Email Link
- Phone Link
1. Text Link: A link on a text is called a text link.
Example:
<a href=”about-us.html”>About Us</a>
2. Image Link: A link on an image is called an Image link, sometimes we use the link on the image to connect the page. To use Image Link we need < img> tag with <a> tag.
Example:
<a href=”about.html”><img src=”images/1.jpg”></a>
3. Email Link: Email link is used to link email, when we click on email it opens a pop to open mail on the following:
- Open on email
- Open on outlook
If outlook is already installed in your system then it will automatically open in outlook. If you click on mobile then it will open in Gmail.
Example:
<a href=”mailto:[email protected]”>[email protected] </a>
4. Phone Link: A link on a mobile number is called a phone link, when we click on the mobile number by mobile it will show the mobile number into the dialer, there is no need to type the number for calling.
Example:
<a href=”tel:9988776655”>9988776655</a>
Types of Links
There are two types of links in HTML, which are following:
- Internal Link
- External Link
1. Internal Link: linking pages on the same website is called an internal link.
2. External Link: Link a page that is outside of your website such as social media links, partner website links. Mostly we open the external links on a new tab for a better user experience, to open a page on a new tab we use the target=”_blank” attribute.
Example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="first-class.html">First</a>
<a href="second.html">Second Class</a>
<a href="first-class.html"><img src="images/1.jpg" width="300"></a>
<a href="tel:9899776655">call us</a>
<a href="mailto:[email protected]">mail us</a>
<a href="https://www.nextgeducation.com/" target="_blank">nextg</a>
</body>
</html>
Creating a Bookmark Link for a Webpage
Bookmark link is used in a single page website where when we click on a link it redirects to a section of a webpage it does not open a new page.
Steps to Create a Bookmark
1. Add id to the section where you want to redirect, for example:
<div id=”about”>about section</div>
2. Add the section id name with # in href attribute, like this:
<a href=”#about”>about</a>
Example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href="#first">First</a>
<a href="#second">Second</a>
<a href="#third">Third</a>
<h2 id="first">First Section</h2>
<p>WDI (Web Development Institute) is registered as Training Institute as well as is located in Delhi Area recognized for offering specialist training throughout the world. </p>
<h2 id="second">Second Section</h2>
<p>WDI (Web Development Institute) is registered as Training Institute as well as is located in Delhi Area recognized for offering specialist training throughout the world. </p>
<h2 id="third">Third Section</h2>
<p>WDI (Web Development Institute) is registered as Training Institute as well as is located in Delhi Area recognized for offering specialist training throughout the world. </p>
</body>
</html>
Download Link in HTML
In HTML we can make a download link by just adding a download attribute in a <a> tag. Sometimes we need to make our document downloadable like pdf download, image download, etc.
Example:
<a href=”web-design.pdf”>download web design brochure</a>
Categories: web designing html
