Difference between link and anchor Tags
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.
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.
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.
Example 2: Adding some external favicon for the website.
<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:-
|It specifies the|
location of the hyperlink.
|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.
- 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.
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>