HTML <link> tagS2C Home   « HTML <link> tag

Definition

The <link> tag is a self closing tag that allows us to link to an external resource such as an image or stylesheet from within a HTML file and can also be used for providing information for the pages navigation and search engines.

The <link> tag must reside within the <head> element.

Example


<!DOCTYPE html>   <!-- The DOCTYPE declaration always comes first in a HTML document --> 
<html lang="en">
<head>
  <title>A Title which will appear in the Windows title bar.</title>
  <!-- Some suggested meta types follow -->
  <meta charset="utf-8">
  <meta name="description" content="In this HTML tutorial reference">
  <meta name="keywords" content="HTML,CSS,JavaScript">
  <meta name="viewport" content="width=device-width">
  <link rel="icon" href="../favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="main.css">
</head>
<body>
</body>
</html>

Attributes

The following attributes can be used with the <link> tag.


<link> Specific Attributes
Attribute Value Description Example
crossoriginSpecifies how the resource handles cross-origin request 

<link rel="stylesheet" 
      href="main.css"
      crossorigin="anonymous">
anonymousRequests for the element will have their mode set to "cors" and their credentials mode set to "same-origin".
use-credentialsRequests for the element will have their mode set to "cors" and their credentials mode set to "include".
hrefurlSpecifies the URL to link to. 

<link rel="stylesheet" 
      href="main.css">
hreflanglanguage_codeSpecifies the language of target URL to link to.

Should be only be used when the href attribute is present.		 

<link rel="stylesheet" 
      href="main.css"
      hreflang="en">
mediamedia_querySpecifies on what device the linked resource will be displayed.

Default is all.		 

<link rel="stylesheet" 
      href="main.css"
      media="print">
referrerpolicySpecifies how much referrer information is sent. 

<link rel="stylesheet" 
      href="main.css"
      referrerpolicy="origin">
no-referrerNo referrer information will be sent.
no-referrer-when-downgradeNo referrer information will be sent when navigation to a non HTTPS resource.
originReferrer will be the origin of the page.
origin-when-cross-originReferrer will be the origin of the page but will not include path when navigating to another origin.
unsafe-urlReferrer will include the origin and the path but no fragment, username or password.
relSpecifies a space-separated list of relationships between the current resource and destination resource. Required 

<link rel="stylesheet"
      href="main.css">
alternateAlternative representation of current document.
authorLink to author of this document.
canonicalPreferred URL for the current document.
dns-prefetchSpecifies that the user agent should preemptively perform DNS resolution for the target resource's origin.
helpLink to a help document for current context.
iconImports an icon to represent the current document.
licenseReferenced document provides the copyright license terms for current document.
nextIndicates that the current document is a part of a series and that the next document in the series is the referenced document.
pingbackGives the address of the pingback server that handles pingbacks to the current document.
preSpecifies that the user agent should preemptively connect to the target resource's origin.
preconnectSpecifies that the user agent should preemptively connect to the target resource's origin.
prefetchSpecifies target document should be cached.
preloadSpecifies that the user agent must preemptively fetch and cache the target resource for current navigation according to the potential destination.
prerenderdSpecifies that the user agent should preemptively fetch the target resource and process it in a way that helps deliver a faster response in the future.
prevIndicates that the document is part of a sequence, and that the link to the referenced document is previous.
searchSpecifies that referenced document provides an interface specifically for searching the document and its related resources
stylesheetImports a style sheet.
sizeswidthXheight or anySpecifies space separated sizes of icons for media content. 

<link rel="stylesheet" 
      href="main.css"
      sizes="16x16 64x64">
titlemedia_typeSpecifies a title for the linked resource. 

<link rel="stylesheet" 
      href="main.css"
      title="link">
typemedia_typeSpecifies the MIME type of the linked resource. 

<link rel="stylesheet" 
      href="main.css"
      type="text/css">
<link> Global Attributes
Attribute Description Example
Common
classSpecifies a classname for the element allowing you to apply the style of the predefined class to the content. 

<link rel="stylesheet" 
      href="main.css" class="name">
idSpecifies a unique id for the element allowing you to apply the style of the predefined id to the content. 

<link rel="stylesheet"
      href="main.css" id="name">
styleSpecifies an inline style for the element allowing you to apply the style to the contentt. 

<link rel="stylesheet" 
      href="main.css" style="color:red;">
titleSpecifies an inline style for the element allowing you to apply the style to the content. 

<link rel="stylesheet" 
      href="main.css" title="Content info">
Keyboard
accesskeySpecifies a keyboard shortcut to associate with the element. 

<link rel="stylesheet" 
      href="main.css" accesskey="a">
tabindexSpecifies a tab order for the element. 

<link rel="stylesheet" 
      href="main.css" tabindex="1">
Language
dirSpecifies the directional flow of the content. 

<!-- The text will flow from left to right -->
<link rel="stylesheet" 
      href="main.css" dir="ltr">
<!-- The text will flow from right to left -->
<link rel="stylesheet" 
      href="main.css" dir="rtl">
langSpecifies a language code for the content of the element. 

<link rel="stylesheet" 
      href="main.css" lang="en">
spellcheckSpecifies an inline style for the element allowing you to apply the style to the contentt. 

<!-- Valid values true and false. -->
<!-- Default inherited / browser specific. -->
<link rel="stylesheet" 
      href="main.css" spellcheck="true">
translateSpecifies an inline style for the element allowing you to apply the style to the content. 

<!-- Valid values yes and no. -->
<!-- Default yes. -->
<link rel="stylesheet" 
      href="main.css" translate="no">
Miscellaneous
contenteditableSpecifies whether the content of the element is editable. 

<!-- Valid values true and false. -->
<!-- Default inherited. -->
<link rel="stylesheet" 
      href="main.css" contenteditable="true">
draggableSpecifies whether the element is draggable. 

<!-- Valid values true and false. -->
<!-- Default browser specific. -->
<link rel="stylesheet" 
      href="main.css" draggable="true">
hiddenSpecifies whether the element is not yet, or no longer, relevant. 

<!-- Valid values an empty string or hidden -->
<link rel="stylesheet" 
      href="main.css" hidden> 
<link rel="stylesheet" 
      href="main.css" hidden="hidden">
<link> Event Attributes
Attribute Description Example
Document Element
oncopyThe script to be run when the user copies the content of an element. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" oncopy="go()">
oncutThe script to be run when the user cuts the content of an element. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" oncut="go()">
onpasteThe script to be run when the user pastes some content into an element. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onpaste="go()">
Drag and Drop
ondragThe script to be run when an element is dragged. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" ondrag="go()">
ondragendThe script to be run when an element has stopped being dragged. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" ondragend="go()">
ondragenterThe script to be run when an element has been dragged to a valid drop target. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" ondragenter="go()">
ondragleaveThe script to be run when an element leaves a valid drop target. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" ondragleave="go()">
ondragoverThe script to be run when an element is being dragged over a valid drop target. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" ondragover="go()">
ondragstartThe script to be run at the start of a drag operation. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" ondragstart="go()">
ondropThe script to be run when a dragged element is being dropped. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" ondrop="go()">
Form
onblurThe script to be run when the element loses focus. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onblur="go()">
onchangeThe script to be run when object changed and attempt to leave field. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onchange="go()">
oncontextmenuThe script to be run when a context menu is triggered. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" oncontextmenu="go()">
onfocusThe script to be run when the element gets focus. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onfocus="go()">
oninputThe script to be run when an element gets user input. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" oninput="go()">
oninvalidThe script to be run when an element is invalid. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" oninvalid="go()">
onresetThe script to be run when a dragged element is being dropped. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onreset="go()">
onselectThe script to be run when some or all of the contents of an object are selected. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onselect="go()">
onsubmitThe script to be run when a form is submitted. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onsubmit="go()">
Keyboard
onkeydownThe script to be run when an element is in focus and keyboard key is pressed down. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onkeydown="go()">
onkeypressThe script to be run when an element is in focus and keyboard key is pressed down and released. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onkeypress="go()">
onkeyupThe script to be run when an element is in focus and keyboard key is released. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onkeyup="go()">
Media
onabortThe script code to be run on abort. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onabort="go()">
oncanplayThe script to be run when a file has buffered enough so it is ready to start playing. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" oncanplay="go()">
oncanplaythroughThe script to be run when a file can be played all the way to the end without further need of buffering. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" oncanplaythrough="go()">
oncuechangeThe script to be run when the cue changes when using the track element. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" oncuechange="go()">
ondurationchangeThe script to be run when the length of the media is changed. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" ondurationchange="go()">
onemptiedThe script to be run when a media resource element suddenly becomes empty, usually due to an error. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onemptied="go()">
onendedThe script to be run when the media has reach the end. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onended="go()">
onloadeddataThe script to be run when media data is loaded and playback can start. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onloadeddata="go()">
onloadedmetadataThe script to be run when metadata has been loaded. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onloadedmetadata="go()">
onloadstartThe script to be run whenthe media resource has started loading. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onloadstart="go()">
onpauseThe script to be run when the media resource has been paused. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onpause="go()">
onplayThe script to be run when the media resource starts playback. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onplay="go()">
onplayingThe script to be run when when playback has already begun. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onplaying="go()">
onprogressThe script to be run when the browser is fetching the media data. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onprogress="go()">
onratechangeThe script to be run when the playback rate changes. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onratechange="go()">
onseekedThe script to be run when the seeking attribute is set to false indicating that seeking has finished. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onseeked="go()">
onseekingThe script to be run when the seeking attribute is set to true indicating that seeking is currently active. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onseeking="go()">
onstalledThe script to be run when the browser is unable to continue fetching media data. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onstalled="go()">
onsuspendThe script to be run when media data has stopped before being completely loaded. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onsuspend="go()">
ontimeupdateThe script to be run when the media resources current playback position has changed. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" ontimeupdate="go()">
onvolumechangeThe script to be run when the volume has changed or been muted. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onvolumechange="go()">
onwaitingThe script to be run when the media resource has paused but is expected to resume. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onwaiting="go()">
Mouse
onclickThe script to be run when when a mouse is clicked on an element. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onclick="go()">
ondblclickThe script to be run when a mouse is double clicked on an element. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" ondblclick="go()">
onmousedownThe script to be run when he mouse button is pressed down while the cursor is over an element. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onmousedown="go()">
onmousemoveThe script to be run when the mouse button is moved. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onmousemove="go()">
onmouseoutThe script to be run when the mouse cursor moves off an element. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onmouseout="go()">
onmouseoverThe script to be run when the mouse cursor moves over an element. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onmouseover="go()">
onmouseupThe script to be run when the mouse button is released while the cursor is over the element. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onmouseup="go()">
onwheelThe script to be run when the mouse wheel rolls up or down over an element. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onwheel="go()">
Scroll
onscrollThe script code to be run when the scrollbar of an element is being scrolled. 

 <!-- Executes go() function -->
<link rel="stylesheet" 
      href="main.css" onscroll="go()">
Window - NONE

Relevant HTML Tutorials

HTML Intermediate - Metadata