HTML <link> element is utilized to define the connection between the present document and an external resource.
The <link> tag is frequently employed to link the external CSS file to the current document, although it can also be utilized for linking website icons. This tag is typically placed within the head section of the document.
Example
Example
<link rel="stylesheet" type="text/css" href="">
Here are some details regarding the HTML <link> element:
| Display | None |
|---|---|
| Start tag/End tag | Both Start and End tag |
| Usage | textual |
Example
Example
<!DOCTYPE html>
<html>
<head>
<title>Link Tag</title>
<link rel="stylesheet" type="text/css" href="htmlpages/css/link.css">
</head>
<body>
<h2>Example of Link Tag</h2>
<p>This is paragraph which is styled with external style sheet. </p>
</body>
</html>
Example
body{
background-color: #7ac5cd;
text-align: center;}
h2{
color: #006400;}
p{
color: #cd5c5c;
font-size: 25px;
font-style: italic;}
Output:
Attribute:
Tag-specific attributes:
| Attribute | Value | Description |
|---|---|---|
| charset | char_encoding | It defines the character encoding of linked source. (Not supported in HTML5) |
href |
URL | It specifies the location of the linked document. |
| hreflang | language_code | Specifies the text language of linked source. |
| media | media_query | It specifies the media, for which linked source is applied. |
rel |
alternateauthordns-prefetchhelpiconlicensenextpingbackpreconnectprefetchpreloadprerenderprevsearchstylesheet | It describes the relationship between the current document and linked document. (required) |
rev |
reversedrelationship | It describes the relationship between the linked document and the current document. (Not supported in HTML5) |
| sizes | Height* weight | It specifies the size of the linked source. It should be only used with rel="icon." |
| target | blankselftopparentframe_name | It determines where to load the linked document. |
type |
media_type | It specifies the media type of document. |
- alternate
- author
- dns-prefetch
- help
- icon
- license
- next
- pingback
- preconnect
- prefetch
- preload
- prerender
- prev
- search
- stylesheet
Global attribute:
The <link> tag enables the utilization of global attributes within an HTML document.
Event attribute:
The <link > tag facilitates the utilization of event attributes within HTML.
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<link> |
Yes | Yes | Yes | Yes | Yes |