Summary -
In this topic, we described about the <link> tag along with detailed example.
<link> tag used to define link between external resource from HTML document. The external resource is mostly style sheet. In other words, <link> tag used to link external style sheets.
The <link> tag will mostly place inside the <head> tag. If the <link> tag coded with itemdrop attribute, then it will be coded outside the <head> tag. HTML document can contain multiple <link> tags.
If any style rule can contain in more than one external style sheet, the rule in last style sheet will be applied to HTML document. <link> tag supports by all kind of browsers.
<link> tag has no ending tag in HTML. All the attributes are optional except href attribute.
Note! <link> tag is an empty tag and contains attributes only.
Syntax -
<link href="">....</link>
Required Attributes -
| Attribute | Description | Values |
|---|---|---|
| href | Specifies the location of the resource. | URL. |
Optional Attributes -
| Attribute | Description | Values |
|---|---|---|
| rel | Specifies the relationship between the current HTML document and the linked document. Required if an itemprop attribute is not used. |
stylesheet: Specifies linking documents is external stylesheet.
alternate: Specifies the alternative version of the web page. author: Specifies the author details of the page. help: Specifies the help to the page. icon: Specifies an icon to be imported associated with the page. license: Specifies copyright license for the current document. next: Indicates that the next page is in a sequence. prefetch: specifies linked document should be cached. prev: Indicates that the previous page is in a sequence. search: A search facility used to search the current and related documents. |
| type | Specifies the type of the linked document. | Media_type |
| media | Specifies the linked device where the linked documents applied. | Media_query such as screen, print, screen and max-width:1000. |
| hreflang | Specifies the language of the linked target documents. | Language code |
| sizes | Specifies the size(s) of the linked icon. | [Height]x[Width] |
Example -
<!DOCTYPE html>
<html lang="en">
<head>
<title>Link Tag</title>
<link href="init.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="theme.css" rel="stylesheet" media=" max-width:640">
<link href="logo.ico" rel="icon" sizes="64x64">
<link href="/about.htm" rel="author">
<link href="prev-page.htm" rel="prev">
<link href="next-page.htm" rel="next">
</head>
<body>
<!-- Content of the HTML document -->
</body>
</html>