Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Difference between link and anchor Tags

  • Difficulty Level : Expert
  • Last Updated : 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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

It has certain attributes some of mostly used are the following.  



 

Attribute_Name=”Value”

Example

Description

href=”URL”href=”../externalStyle.css”It specifies the location 
of the resource.
media=”media_query/media_type”media=”screen and (min-width: 700px)”It is used to define on what device 
the linked document will be displayed.
rel=”relationship_with_resource”rel=”stylesheet”
rel=”license”
rel=”icon”
It specifies which kind of resource
 is being associated with this tag.
size=”HeightxWidth”size=”32×32″It is mainly used for icons to link 
the resource with specified size.
type=”MIME_TYPE”type=”image/png”
type=”text/html”
This attribute is used to define the
MIME-type of linked content.

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

href=”URL”href=”https://www.geeksforgeeks.org”
href=”../filePath.ext”
href=”#someInternalId”
It specifies the
location of the hyperlink.
target=”some_browsing_context”target=”_blank”
target=”_self”
It specifies where
to display the linked URL.
download=”filename.ext”download=”linkedImage.png”This is used to 
download the content 
of the hyperlink
instead of just a visit.
ping=”URL”ping=”https://someUrl/postRequest”It sends the post request to 
the provided URL
and is mainly 
used for tracking purposes.

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 ismailto: 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>
        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>
      
        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

1.This tag is used inside the head section.This tag is used inside the body section.
2.It is not displayed on the front end and is just used for internal purposes.The content written inside the anchor tag gets displayed in the frontend.
3.It establishes the relationship/connection between two entities.It establishes a path from the current document to somewhere else.
4.Because of not directly visible to the user it is not clickable.Users can click on the content enclosed inside this tag to visit the hyperlink.  
5.It is an empty element and can’t have nested elements.It is not an empty element, it can have some nested elements inside.
6.It has nothing to do with the block or inline properties of HTML elements.It is an inline HTML element.
7.The basic structure of this tag is,
<link some_attributes_with_value />
The basic structure of this tag is,
<a some_attributes_with_value > some_nested_content </a>



My Personal Notes arrow_drop_up
Recommended Articles
Page :