totn HTML

HTML: <link> tag

This HTML tutorial explains how to use the HTML element called the <link> tag with syntax and examples.

Description

The HTML <link> tag links an external resource, such as a css file, to the HTML document. This tag is also commonly referred to as the <link> element.

HTML <link> Tag Syntax - Linking a Stylesheet

The syntax for linking a stylesheet using the HTML <link> tag is:

<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>

Attributes

In addition to the Global Attributes, the following is a list of attributes that are specific to the <link> tag:

Attribute Description HTML Compatibility
charset Character encoding of the linked resource Obsolete
disabled Disable a link relationship Non-standard, Only used by some Microsoft browsers
href URL of the linked resource HTML 4.01, HTML5
hreflang Language of the linked resource HTML 4.01, HTML5
media Media that the linked resource applies to HTML 4.01, HTML5
methods Information about functions that might be performed on object Non-standard
rel Type of linked resource HTML 4.01, HTML5
rev Relationship of current document to linked document Obsolete
sizes Sizes of the icons (when rel contains icon) HTML5
target Frame name that has defined linking relationship Non-standard
type MIME type of the linked resource HTML 4.01, HTML5

Note

  • The HTML <link> element is found within the <head> tag.
  • The <link> tag is most commonly used to link a stylesheet or css file to the HTML document.

Browser Compatibility

The <link> tag has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • Edge Mobile
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

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

  • HTML5
  • HTML4
  • XHTML

HTML5 Document

If you created a new web page in HTML5, your <link> tag might look like this:

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/css/main.css" type="text/css">
<title>HTML5 Example by www.techonthenet.com</title>
</head>

<body>
</body>

</html>

In this HTML5 Document example, we have have linked a stylesheet called main.css (found in the /css directory) to the HTML document.

HTML 4.01 Transitional Document

If you created a new web page in HTML 4.01 Transitional, your <link> tag might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="/css/main.css" type="text/css">
<title>HTML 4.01 Transitional Example by www.techonthenet.com</title>
</head>

<body>
</body>

</html>

In this HTML 4.01 Transitional Document example, we have have linked a stylesheet called main.css (found in the /css directory) to the HTML document.

XHTML 1.0 Transitional Document

If you created a new web page in XHTML 1.0 Transitional, your <link> tag might look like this:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="/css/main.css" type="text/css" />
<title>XHMTL 1.0 Transitional Example by www.techonthenet.com</title>
</head>

<body>
</body>

</html>

In this XHTML 1.0 Transitional Document example, we have have linked a stylesheet called main.css (found in the /css directory) to the HTML document.

XHTML 1.0 Strict Document

If you created a new web page in XHTML 1.0 Strict, your <link> tag might look like this:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="/css/main.css" type="text/css" />
<title>XHTML 1.0 Strict Example by www.techonthenet.com</title>
</head>

<body>
</body>

</html>

In this XHTML 1.0 Strict Document example, we have have linked a stylesheet called main.css (found in the /css directory) to the HTML document.

XHTML 1.1 Document

If you created a new web page in XHTML 1.1, your <link> tag might look like this:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="/css/main.css" type="text/css" />
<title>XHTML 1.1 Example by www.techonthenet.com</title>
</head>

<body>
</body>

</html>

In this XHTML 1.1 Document example, we have have linked a stylesheet called main.css (found in the /css directory) to the HTML document.

Share on: