HTML-Link-tag

admin

2/13/2025

HTML_Link_Tag_code #HTML-Link-tag

Go Back

HTML Link Tag: A Complete Guide with Examples and Attributes

What is the HTML Link Tag?

The HTML <link> tag is a powerful element used to connect external resources, such as CSS stylesheets, to your HTML document. It plays a crucial role in web development by allowing you to separate content (HTML) from presentation (CSS).

HTML_Link_Tag_code #HTML-Link-tag

How to Use the HTML Link Tag

The <link> tag is placed within the <head> section of an HTML document. Here’s the basic syntax:

      
<link rel="stylesheet" type="text/css" href="styles.css">

Linking External CSS Stylesheets

The most common use of the <link> tag is to link external CSS stylesheets. For example:

      
<link rel="stylesheet" type="text/css" href="http://developerIndian.com/styles.css">

HTML Link Tag Attributes

The <link> tag supports several attributes:

  • rel: Specifies the relationship between the current document and the linked resource (e.g., stylesheet).
  • type: Defines the type of the linked resource (e.g., text/css).
  • href: Specifies the URL of the external resource.
  • media: Defines the media type for the linked resource (e.g., screen, print).

Example of the HTML Link Tag

Here’s an example of a basic HTML page using the <link> tag to load an external CSS stylesheet:

      
<!DOCTYPE html>
<html>
<head>
  <title>HTML Link Tag Example</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <h1>Welcome to My Web Page</h1>
  <p>This is an example of using the HTML link tag to load an external CSS file.</p>
</body>
</html>

Features of the HTML Link Tag

  • A single HTML document can have multiple <link> elements to load different resources.
  • The <link> tag is an empty element, meaning it contains attributes only and does not require a closing tag.
  • It is commonly used to link CSS stylesheets, but it can also be used for other resources like icons and fonts.

Ready to Use the HTML Link Tag?

Ready to use the HTML link tag in your projects? Start by linking your CSS stylesheets and see how it improves your web development workflow!

Table of content