Introduction
The rel attribute in the HTML <link> tag specifies the relationship between the linked resource and the current document. It helps browsers understand how the linked file should be used. Common values include stylesheet for CSS files, icon for website icons, and preload for resource optimization.
In this article, you will learn about the rel attribute, its values, and how to use it effectively in HTML.
Definition and Usage
The `link` tag in HTML is used to connect external resources to a webpage. These resources can include stylesheets, favicons, or metadata that helps browsers understand how to display the page. The `rel` attribute inside the `link` tag specifies the relationship between the current document and the linked resource. For example, if you want to link a CSS file to style your webpage, you use `rel="stylesheet"`.
Let’s take a look at an example of how the `link` tag with the `rel` attribute works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link Rel Example</title>
<!-- Linking a CSS file -->
<link rel="stylesheet" href="styles.css">
<!-- Adding a favicon -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is an example of using the link tag with the rel attribute.</p>
</body>
</html>
Output
In this code:
- The first `link` tag connects a CSS file (`styles.css`) to the webpage. The `rel="stylesheet"` tells the browser that the linked file is used for styling.
- The second `link` tag adds a favicon (a small icon displayed in the browser tab). The `rel="icon"` specifies that the linked file is an icon.
The `rel` attribute is important because it gives meaning to the connection between the webpage and the resource. Without it, the browser wouldn’t know how to handle the linked file.
518+ registered 
