Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
HTML <link> tag
In HTML, the <link> tag is used to link the 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.
Following are some attributes that are used mostly with HTML <link> tag: href, hreflang, rel, title, type, etc.
Example
In the following example, we are trying to use the HTML <link> tag to link an external CSS file in our HTML document. Following is the HTML document −
<!DOCTYPE html>
<html>
<head>
<title>Link Tag in HTML</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<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. This website was launched by an AMU alumni, Mr. Mohtashim, with a single tutorial on HTML in year 2006.</p>
</div>
</body>
</html>
Following is the external CSS file −
body {
background-color: bisque;
}
h2 {
color: green;
}
div {
text-align: center;
}
Output
When we execute the HTML file, we can see the styling that happened with the background color and <h2> element. These behaviors are achieved by linking the external CSS file to our HTML document.
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. Following are some attributes that are used mostly with HTML anchor <a> tag: href, hreflang, media, ping, rel, type, etc.
Example
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> <a href="https://www.tutorialspoint.com/index.htm"> Click here for tutorialspoint...</a> </body> </html>
As we can see in the output below, the <a> tag created a hyperlink to the tutorialspoint website.
Difference between HTML <link> and anchor <a> tags −
The following table demonstrates the difference between the <link> and <a> tags in HTML −
<link> tag |
<a> anchor tag |
|---|---|
The HTML <link> tag is used to link the external documents to our HTML document. |
The HTML <a> anchor tag is used to create hyperlinks to other web pages or to a particular segment of a webpage. |
This tag is used inside the <head> section. |
This tag is used inside the <body> section. |
It is not visible and clickable since it is just used for internal purposes. |
It is visible in a hyperlink format with the name provided inside the tag and users can interact with it. |
Since it is an empty element, it cannot have nested elements. |
Since it is not an empty element, It may contain several nested items. |
Link Tag −<head><link rel="stylesheet" type="text/css" href="file_name.css"></head> |
<a> anchor tag −<a href="www.example.com">Dummy website</a> |
2K+ Views
