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 |
|---|---|---|
| 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.
<!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.
<!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 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.
<!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> |