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 Tutorial

Search This Blog

Saturday, February 19, 2022

HTML: link tag