Categories
Learn HTML

HTML: link tag

HTML: <link> tag

In this series of learning HTML, we will teach you how to use the HTML link tag with proper syntax and lots of examples. Let’s start on the HTML link tag.

 

Description of HTML link tag

The HTML link tag is used to define a link between a document and an external resource, such as a stylesheet, an icon, or a web font. The link tag is a self-closing tag and is typically placed within the <head> section of an HTML document.

Here’s an example of how the link tag can be used to link to an external stylesheet:

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

In this example, the link tag is used to link to an external stylesheet called “styles.css”. The rel attribute specifies the relationship between the current document and the linked resource, in this case, a stylesheet. The href attribute specifies the location of the external resource.

Other common uses of the link tag include linking to web fonts, icons, and other resources. The link tag can also be used to specify the document’s relationship with search engines and social media platforms through various link types, such as canonical, alternate, and icon links.

Some common attributes used with the link tag include rel, href, type, sizes, media, and integrity, among others.

Note that the link tag is an empty element and does not require a closing tag.

 

Syntax of HTML link tag

The HTML link tag is used to link to an external resource, such as a stylesheet or a web page. The syntax of the link tag is as follows:

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

or in XHTML, the syntax for the <link> tag is:

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

Here, the link tag has three important attributes:

  • rel: This attribute specifies the relationship between the current document and the linked resource. For example, rel="stylesheet" indicates that the linked resource is a stylesheet.
  • type: This attribute specifies the MIME type of the linked resource. For example, type="text/css" indicates that the linked resource is a CSS file.
  • href: This attribute specifies the URL of the linked resource. For example, href="style.css" specifies that the linked resource is a file named style.css in the same directory as the current document.

The link tag can also have other attributes that can be used to modify its behavior and appearance. For example, the media attribute can be used to specify the media type for which the linked resource is intended, such as media="screen" for screens and media="print" for printers.

 

 

Global Attributes

The link tag is used to define a link between an HTML document and an external resource, such as a stylesheet or an icon. It is an empty tag and does not have a closing tag.

The global attributes that can be used with the link tag include:

  1. href: This attribute specifies the URL of the external resource that the link tag is linking to.
  2. crossorigin: This attribute specifies whether the resource being linked to should be fetched with a CORS request. Possible values are anonymous and use-credentials.
  3. as: This attribute specifies the type of the external resource being linked to, such as stylesheet, icon, or preload.
  4. rel: This attribute specifies the relationship between the current document and the external resource being linked to. Possible values include stylesheet, icon, preconnect, dns-prefetch, and many others.
  5. media: This attribute specifies the media query that should be used to determine whether the external resource being linked to should be applied to the current document.
  6. type: This attribute specifies the MIME type of the external resource being linked to. For example, for a stylesheet, the value of this attribute should be text/css.
  7. sizes: This attribute specifies the sizes of the icons being linked to.

Here’s an example of a link tag linking to an external stylesheet:

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

 

Event Attributes

The link tag in HTML is not an interactive element, and thus it does not have any event attributes associated with it. Event attributes are used to attach JavaScript functions to HTML elements, which can then be triggered by user interactions or other events.

However, there are some events that are related to the loading of external resources that can be linked to using the link tag. For example, the onload event can be used to trigger a JavaScript function when an external stylesheet is finished loading.

Here’s an example of how the onload event can be used with the link tag:

<link rel="stylesheet" type="text/css" href="styles.css" onload="myFunction()">

In this example, the onload attribute is added to the link tag with the value set to myFunction(), which is the name of the JavaScript function that should be executed when the stylesheet finishes loading.

Note that the onload attribute can only be used with the link tag when it is linking to an external stylesheet or script file. It cannot be used with other types of resources, such as icons or images.

 

 

Other Attributes

In addition to the global attributes and events, the link tag in HTML also has specific attributes that are used to specify the type of external resource being linked to. These attributes include:

  1. rel: This attribute specifies the relationship between the current document and the linked document or resource. It is required for the link tag and can have a variety of values depending on the type of resource being linked to, such as stylesheet, icon, preconnect, preload, prerender, and others.
  2. href: This attribute specifies the URL of the external resource being linked to, such as a stylesheet or icon file.
  3. type: This attribute specifies the MIME type of the linked resource. For example, for a stylesheet, the value of this attribute should be text/css.
  4. sizes: This attribute is used when linking to icons and specifies the size of the icon being linked to.
  5. media: This attribute specifies the media query that should be used to determine whether the external resource being linked to should be applied to the current document. It is commonly used with stylesheets to specify different styles for different screen sizes or devices.
  6. integrity: This attribute is used to ensure that the linked resource has not been tampered with during transmission. It specifies a cryptographic hash of the resource that the browser will verify before applying the styles or executing the script.

Here’s an example of a link tag linking to an external stylesheet with the rel, href, and type attributes specified:

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

In this example, the rel attribute specifies that the linked resource is a stylesheet, the href attribute specifies the URL of the stylesheet file, and the type attribute specifies that the file is a CSS file.

 

 

Notes on HTML: link tag

Here are some important notes on using the link tag in HTML:

  1. The link tag is an empty tag and does not have a closing tag.
  2. The link tag is used to link an HTML document to external resources such as stylesheets, scripts, icons, and more.
  3. The rel attribute is required for the link tag and specifies the relationship between the current document and the linked document or resource.
  4. The href attribute specifies the URL of the external resource being linked to.
  5. The type attribute specifies the MIME type of the linked resource, such as text/css for a stylesheet or image/png for an image.
  6. The media attribute is used to specify a media query that should be used to determine whether the linked resource should be applied to the current document.
  7. The integrity attribute can be used to ensure that the linked resource has not been tampered with during transmission.
  8. The onload event can be used with the link tag to trigger a JavaScript function when the external resource finishes loading. However, this only applies to stylesheets and scripts.
  9. When linking to an icon, the sizes attribute can be used to specify the size of the icon being linked to.
  10. The link tag is commonly used in the head section of an HTML document to link to external resources that are used throughout the document.

 

Browser Compatibility

The HTML link tag has essential support with the following browsers:

  1. Chrome
  2. Internet Explorer (IE)
  3. Opera
  4. Safari (WebKit)
  5. Firefox (Gecko)
  6. Android
  7. Firefox Mobile (Gecko)
  8. Edge Mobile
  9. Opera Mobile
  10. Safari Mobile

 

Examples of HTML link tag

We will discuss the HTML link tag below, with some examples of how to use the link tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1.

  1. HTML5
  2. HTML4
  3. XHTML

 

 

 

HTML5 Document

Here is an example of an HTML5 document that uses the link tag to link to an external stylesheet:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Webpage</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Welcome to my webpage</h1>
<p>This is some sample text.</p>
<img src="image.jpg" alt="A sample image">
<script src="script.js"></script>
</body>
</html>

In this example, the link tag is used in the head section of the document to link to an external stylesheet file named styles.css. The rel attribute specifies that the linked resource is a stylesheet, the type attribute specifies that it is a CSS file, and the href attribute specifies the URL of the file.

The HTML document also includes an img tag that references an image file named image.jpg, and a script tag that references a JavaScript file named script.js.

Note that the link tag is used in the head section of the document, while the img and script tags are used in the body section. This is because the link tag is used to link to resources that are used throughout the document, while the img and script tags are used to embed specific resources in the content of the document.

 

 

HTML 4.01 Transitional Document

Here’s an example of an HTML 4.01 Transitional document that uses the link tag to link to an external stylesheet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My Webpage</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Welcome to my webpage</h1>
<p>This is some sample text.</p>
<img src="image.jpg" alt="A sample image">
<script type="text/javascript" src="script.js"></script>
</body>
</html>

In this example, the link tag is used in the head section of the document to link to an external stylesheet file named styles.css. The rel attribute specifies that the linked resource is a stylesheet, the type attribute specifies that it is a CSS file, and the href attribute specifies the URL of the file.

The HTML document also includes an img tag that references an image file named image.jpg, and a script tag that references a JavaScript file named script.js. Note that in HTML 4.01, the type attribute is required for the script tag to specify the type of the script being linked.

Also note that in HTML 4.01, the meta tag is used to specify the character encoding of the document.

 

XHTML 1.0 Transitional Document

Here’s an example of an XHTML 1.0 Transitional document that uses the link tag to link to an external stylesheet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Webpage</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<h1>Welcome to my webpage</h1>
<p>This is some sample text.</p>
<img src="image.jpg" alt="A sample image" />
<script type="text/javascript" src="script.js"></script>
</body>
</html>

In this example, the link tag is used in the head section of the document to link to an external stylesheet file named styles.css. The rel attribute specifies that the linked resource is a stylesheet, the type attribute specifies that it is a CSS file, and the href attribute specifies the URL of the file.

The HTML document also includes an img tag that references an image file named image.jpg, and a script tag that references a JavaScript file named script.js. Note that in XHTML 1.0, all tags must be properly closed with a forward slash, including empty tags such as img and link.

Also note that in XHTML 1.0, the meta tag must be properly closed with a forward slash as well. The xmlns attribute is used to specify the XML namespace for the document.

XHTML 1.0 Strict Document

Here’s an example of an XHTML 1.0 Strict document that uses the link tag to link to an external stylesheet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Webpage</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<h1>Welcome to my webpage</h1>
<p>This is some sample text.</p>
<img src="image.jpg" alt="A sample image" />
<script type="text/javascript" src="script.js"></script>
</body>
</html>

In this example, the link tag is used in the head section of the document to link to an external stylesheet file named styles.css. The rel attribute specifies that the linked resource is a stylesheet, the type attribute specifies that it is a CSS file, and the href attribute specifies the URL of the file.

The HTML document also includes an img tag that references an image file named image.jpg, and a script tag that references a JavaScript file named script.js. Note that in XHTML 1.0 Strict, all tags must be properly closed with a forward slash, including empty tags such as img and link.

Also note that in XHTML 1.0 Strict, the meta tag must be properly closed with a forward slash as well. The xmlns attribute is used to specify the XML namespace for the document. Additionally, in XHTML 1.0 Strict, certain elements and attributes that are present in other versions of HTML are not allowed, such as the align attribute on the img tag.

XHTML 1.1 Document

Here’s an example of an XHTML 1.1 document that uses the link tag to link to an external stylesheet:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Webpage</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<h1>Welcome to my webpage</h1>
<p>This is some sample text.</p>
<img src="image.jpg" alt="A sample image" />
<script type="text/javascript" src="script.js"></script>
</body>
</html>

In this example, the document is an XML document, indicated by the <?xml ?> declaration at the beginning. The DOCTYPE declaration specifies that this is an XHTML 1.1 document. The link tag is used in the head section of the document to link to an external stylesheet file named styles.css. The rel attribute specifies that the linked resource is a stylesheet, the type attribute specifies that it is a CSS file, and the href attribute specifies the URL of the file.

The HTML document also includes an img tag that references an image file named image.jpg, and a script tag that references a JavaScript file named script.js. Note that in XHTML 1.1, all tags must be properly closed with a forward slash, including empty tags such as img and link.

Also note that in XHTML 1.1, the meta tag must be properly closed with a forward slash as well. The xmlns attribute is used to specify the XML namespace for the document. Additionally, in XHTML 1.1, certain elements and attributes that are present in other versions of HTML are not allowed, such as the align attribute on the img tag.