Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Difference between link and anchor Tags
While developing a website, we may come across a situation where we need to create a hyperlink to another webpage or to a certain part of the webpage (these links are clickable). Additionally, there can be a situation where we need to add stylings to the content present in the website using external CSS (these are not clickable). These behaviors are achieved by using the HTML <link> and <a> anchor tags.
Syntax
Following is the syntax for the HTML <link> tag
<link rel="relationship" href="resource-url" type="mime-type">
Following is the syntax for the HTML <a> anchor tag
<a href="destination-url">Link Text</a>
HTML <link> Tag
In HTML, the <link> tag is used to link external resources, such as CSS style sheets, or to add a favicon (small image displayed next to the page title in the browser tab) to the website. It is not visible content on the page and is placed in the <head> section of the document.
Following are some attributes that are used mostly with the HTML <link> tag: href, hreflang, rel, title, type, etc.
The <link> tag is an empty element, meaning it has no closing tag and cannot contain nested elements. It establishes a relationship between the current document and external resources but does not create clickable content for users.
Example Linking External CSS
In the following example, we are trying to use the HTML <link> tag to link an external CSS file in our HTML document
<!DOCTYPE html>
<html>
<head>
<title>Link Tag in HTML</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body style="font-family: Arial, sans-serif;">
<div>
<h2>Hello, TutorialsPoint</h2>
<p>TutorialsPoint.com is a dedicated website to provide quality online education in the domains of Computer Science, Information Technology, Programming Languages, and other Engineering as well as Management subjects.</p>
</div>
</body>
</html>
The external CSS file would contain styles like
body {
background-color: bisque;
}
h2 {
color: green;
}
div {
text-align: center;
padding: 20px;
}
The output displays the styled content with centered text, green heading, and bisque background
Hello, TutorialsPoint (Green colored heading, centered text on bisque background) TutorialsPoint.com is a dedicated website to provide quality online education... (Centered paragraph text on bisque background)
Example Adding Favicon
Following example shows how to add a favicon using the <link> tag
<!DOCTYPE html> <html> <head> <title>Favicon Example</title> <link rel="icon" type="image/x-icon" href="/favicon.ico"> </head> <body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;"> <h2>This page has a favicon</h2> <p>Check the browser tab to see the favicon icon.</p> </body> </html>
The favicon appears in the browser tab next to the page title but is not visible on the page content itself.
HTML Anchor <a> Tag
In HTML, the anchor <a> tag is used to create a hyperlink on the website. This hyperlink is used to link from one webpage to another web page or some section of the same web page. The <a> tag creates visible, clickable content that users can interact with.
Following are some attributes that are used mostly with the HTML anchor <a> tag: href, hreflang, media, ping, rel, type, target, etc.
Unlike the <link> tag, the <a> tag is not an empty element and can contain nested elements such as text, images, or other HTML elements.
Example External Link
In the following example, we are using the HTML anchor <a> tag to create a hyperlink to another webpage
<!DOCTYPE html> <html> <head> <title>Anchor Tag in HTML</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>External Links Example</h2> <p>Visit our website: <a href="https://www.tutorialspoint.com/">TutorialsPoint</a></p> <p>Open in new tab: <a href="https://www.tutorialspoint.com/" target="_blank">TutorialsPoint (New Tab)</a></p> </body> </html>
The output shows clickable hyperlinks that navigate to external websites
External Links Example Visit our website: TutorialsPoint (clickable blue underlined link) Open in new tab: TutorialsPoint (New Tab) (clickable blue underlined link)
Example Internal Anchor Links
Following example demonstrates how to create internal anchor links that navigate within the same page
<!DOCTYPE html>
<html>
<head>
<title>Internal Anchor Links</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Table of Contents</h2>
<ul>
<li><a href="#section1">Go to Section 1</a></li>
<li><a href="#section2">Go to Section 2</a></li>
</ul>
<div style="height: 300px;"></div>
<h3 id="section1">Section 1</h3>
<p>This is the content of Section 1.</p>
<div style="height: 300px;"></div>
<h3 id="section2">Section 2</h3>
<p>This is the content of Section 2.</p>
</body>
</html>
Clicking the anchor links scrolls the page to the corresponding sections identified by their id attributes.
Difference Between HTML <link> and Anchor <a> Tags
Following table demonstrates the key differences between the <link> and <a> tags in HTML
| <link> Tag | <a> Anchor Tag |
|---|---|
| Used to link external documents and resources to the HTML document. | Used to create hyperlinks to other web pages or to a particular segment of a webpage. |
Placed inside the <head> section of the document. |
Used inside the <body> section where content is displayed. |
| Not visible to users and not clickable since it is used for internal document setup. | Visible as clickable hyperlink text that users can interact with. |
| Empty element (self-closing) and cannot contain nested elements. | Container element that can contain text, images, and other nested HTML elements. |
| Establishes relationships like stylesheets, icons, or alternate versions. | Creates navigation paths for user interaction and page traversal. |
Example: <link rel="stylesheet" href="style.css">
|
Example: <a href="page.html">Click here</a>
|
Common Use Cases
The <link> tag is commonly used for
Linking external CSS stylesheets
Adding favicons and app icons
Specifying alternate document versions
Preloading resources for performance
The <a> tag is commonly used for
Creating navigation menus
Linking to external websites
Creating internal page anchors
Email links using
mailto:
Conclusion
The <link> tag connects external resources to your HTML document and is invisible to users, while the <a> tag creates visible, clickable hyperlinks for navigation. Understanding when to use each tag is essential for proper HTML document structure and user experience.
6K+ Views
