Difference between link and anchor Tags

22 Sep, 2021
The HTML language is the most basic component of web development. If you are a beginner to web development, learning about HTML then you must have discovered the “link” and “a” tag. These two entities <link> and <a>, are used for some kind of linking so if you are confused between them or want to learn about the actual difference between them, Then you are at the right place. In this article, we are going to differentiate them, followed by the actual definition with examples of both.
<link> Tag: This tag is used to establish a connection/relationship between the current document and some external resources that are associated with the webpage. The resource could be a CSS file, an icon used in the site, a manifest, etc.
It has certain attributes some of mostly used are the following.  
 
Attribute_Name=”Value”
Example
Description
Example 1: Creating a link to some external CSS stylesheet in our document. The id given to the h2 tag contains only a style color: green inside that external CSS file.
Javascript
<!DOCTYPE html><html>  <head>    <title>Link Tag</title>    <link rel="stylesheet"         href="./externalResource.css" /></head>  <body>    <h2 id="hello">        Hello, GeeksforGeeks Learner    </h2>        <p>        The above text is having color         green instead of default black,        because a file which contains         some css code is associated/linked         with this document.    </p>  </body>  </html>
Output:
 
Example 2: Adding some external favicon for the website.
Javascript
<!DOCTYPE html><html>  <head>    <title>Link Tag</title>          // Add png image source here    <link rel="icon" href="./gfgIcon.png" /></head>  <body>      <p>        The Favicon being displayed         along with text in title is         because a png file is associated        /linked with this document    </p>  </body>  </html>
Output:
<a> Tag: This anchor tag establishes a hyperlink to an external or internal document of HTML, an address like email or telephone, and some kind of external URL address. 
Some of the commonly used attributes are:-
Attribute_Name=”Value”
Example
Description
Note: The rel and type attribute described in the link tag can also be used with the anchor tag.
Example 1: We are going to sketch a basic clone of the footer of geeksforgeeks.org to illustrate use cases of the anchor tag, You must have seen this many times so for a practical example it may be a better option.
Explanation:- 
The first anchor tag has a reference to the official website of GFG, and there is another attribute target, that is set to a value _blank means this hyperlink will be open in another tab.
The next anchor tag is delivering a hyperlink to the mail of GFG. its syntax is “mailto: any_mail_id_will_appear_here“, when the user clicks on this tag the browser will be going to open some default applications to send mail.
Later there is a link to the YouTube channel of GFG, notice the difference between the first one and this one, It has no target attribute so by default it will open in the same tab.
At the end, there is a hyperlink to make a telephone call it accepts a number with country code after the colon i.e. “tel: any_telephone_number, and similar to a mail hyperlink here also the browser will decide which application to use for calling purposes.
HTML
<!DOCTYPE html><html>  <body>    <h2>Anchor Tags</h2>    <a href="https://www.geeksforgeeks.org"        target="_blank">        GeeksforGeeks    </a><br>          <div>        <span>            5th Floor, A-118,<br>Sector-136,             Noida, Uttar Pradesh - 201305        </span>    </div>          <a href="mailto:feedback@geeksforgeeks.org">        feedback@geeksforgeeks.org    </a><br>          <a href="https://www.youtube.com/geeksforgeeksvideos/">        Video Tutorials    </a><br>          <a href="tel:00000000">Call Us</a></body>  </html>
Output:- 
Difference between <link> tag and <a> tag:
<link> Tag
<a> Tag
Blogathon-2021
HTML-Questions
HTML-Tags
Picked
Blogathon
Difference Between
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Import JSON Data into SQL Server?
SQL Query to Convert Datetime to Date
Python program to convert XML to Dictionary
Scrape LinkedIn Using Selenium And Beautiful Soup in Python
How to toggle password visibility in forms using Bootstrap-icons ?
Class method vs Static method in Python
Difference between BFS and DFS
Difference between var, let and const keywords in JavaScript
Difference Between Method Overloading and Method Overriding in Java
Differences between JDK, JRE and JVM