Introduction
The <link> element in HTML is used to link external resources to a web page. It is commonly used to link stylesheets for styling, but it can also be used to link other types of external resources, such as icons or alternative style sheets.
Example of linking a Stylesheet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Content of the web page goes here -->
</body>
</html>In this example, the <link> element is used to link an external stylesheet named “styles.css” to the HTML document. This allows the web page to apply styles defined in the linked stylesheet.
Example of linking an Icon:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<!-- Content of the web page goes here -->
</body>
</html>
In this example, the <link> element is used to link a favicon (a small icon displayed in the browser’s address bar or tab) named “favicon.ico” to the HTML document.
Other Use Cases:
- Linking alternative stylesheets for different media types, such as print stylesheets.
- Linking external scripts using the
rel="preload"attribute for better performance. - Linking a web page to a related document, such as a syndication feed.
The <link> element is placed within the <head> section of an HTML document. It uses the rel attribute to specify the relationship between the current document and the linked resource, and the href attribute to specify the URL of the external resource. The specific attributes used with <link> depend on the type of resource being linked.