W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++


Share it

link intro link optional link browser display link parents link examples & interpretation hyperlink vs external resource link link syntaxlink href attributelink hreflang attributelink media attributelink rel attributelink type attributelink itemprop attributelink title attribute

HTML5 link element

The link element allows you to link resources to your web page. »video

Examples link

  • link a CSS file to your page and the style defined in this CSS file will apply to your page;
  • link a favorite icon to your page to represent it and the browser will display it
  • link another page to the current page, indicating it's the next one or the previous one..
  • link another page to the current page, indicating that the linked page holds information about the author of the document, or license..
  • link a resource you're almost sure will be requested next and the browser will prefetch it; etc... »video

About link

Display & support link

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents, link

Attributes link

Observation: sizes attribute currently not supported in browser.

Understanding link's attributes:

  • the href attribute holds the URL of the linked resource »video
  • the itemprop attribute allows you to add a property to an item (microdata), making your page's content machine-readable »video
  • the rel attribute allows you to specify the relationship between the linked resource and the current document »video

For this linked resource you can specify also the followings:

  • its language through hreflang attribute »video
  • its media through media attribute »video
  • its MIME type through type attribute »video
  • its size if the linked resource represents an icon through sizes attribute (!! no browser support)
  • its origin through crossorigin attribute
  • its title through title attribute (global attribute) »video

link's attributes: 2 examples and interpretation

  • 1st example: <link rel="icon" href="favicon.png" type="image/png" sizes="16x16">
    2nd example: <link rel="stylesheet" type="text/css" href="main.css" hreflang="en" media="print"> »video


  1. link element must have the href attribute, otherwise the link element does not create a link:
    <link rel="stylesheet" href="style.css">
  2. besides href, link element must have either a rel attribute either an itemprop attribute:
    <link rel="icon" href="image.png"> OR
    <link itemprop="URL" href="http://...">
  3. 1 link element cannot have more than 1 external resource linked, 1 href :
    <link rel="next" href="page3.php">
  4. 1 linked external resource may have multiple relationships 1 rel with multiple values with the current page:
    <link rel="author license" href="author_license.php">
  5. multiple link elements are allowed both in head (rel, itemprop) and body(itemprop) sections:
    head: <link rel="" href=""><link itemprop="" href="">
    body: <link itemprop="" href=""><link itemprop="" href="">
  6. link elements create hyperlinks (resources displaying in a new page via a hyperlink) or external resource links (resources imported into the current page):
    hyperlinks: <link rel="next" href="page3.php">
    external links: <link rel="stylesheet" href=style.css">
  7. some linked resources display in browser (external resource links) some others don't (hyperlinks, invisible links via itemprop) (useful for user agents (search engine spiders, crawlers..)):
    displays: <link rel="icon" href="favicon.png">
    does not display: <link rel="prev" href="page1.php"><link itemprop="adress" >

links difference

The difference between a hyperlink and an external resource link »video

Syntax link

1<link> »example

Attributes and Values link (comma separated)

<linkattribute="attribute_value(s)"> Video Examples
1. specific attributes
1.href=URL»video<link rel="next" href="page2.php">
2.hreflang=language code»video<link rel="alternate" href="URL" hreflang="language_code">
3.media=all, braille, embossed, handheld
print, projection, screen, speech
tty, tv
»video<link rel="stylesheet" href="URL" media="print">
4.rel=alternate, author, help, icon
license, next, prefetch, prev
search, sidebar, stylesheet
»video<link rel="icon" href="favicon.png">
5.type=MIME type»video<link type="text⁄css" rel="stylesheet" href="URL">
6.sizes=pixels (widthxheight)-<link rel="icon" href="favicon.ico" sizes="16x16">
7.crossorigin= "",  , anonymous, use-credentials-<link rel="stylesheet" href="URL" crossorigin>
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img
2.class=class name»html »img
3.contenteditable="",  , true, false »html
4.contextmenu=menu id value»html
5.data-*= value -
6.dir=ltr, rtl, auto»html
7.draggable= true,  , false»img
8.dropzone= copy, move, link, string:, file: -
9.hidden= "",  , hidden»html »img
10.id=id name»html »img
11.itemid= URL -
12.itemprop= string »link »a<link itemprop="url" href="http://...">
13.itemref= string -
14.itemscope= "",  , itemscope-
15.itemtype= absolute URL -
16.lang=language code »html »head»title »img
17.spellcheck="",  , true, false»html
18.style=CSS property:value»html »img
19.tabindex= integer »img
20.title=text»html »link»style »abbr»dfn
»img »meter
<link rel="next" href="x.php" title="X Page">
21.translate="", yes, no»html »img
All Global Attributes
3. global event attributes
1.onclick=script» list<element onclick="script" > ...
2.ondblclick=script» list<element ondblclick="script" > ...
All Event Attributes

Video demonstration link element

HTML5 link element: linking a CSS file and an icon to the page

min video details
00:05 we will link the 2 resources (main.css, favicon.png) to index.html file
00:10 open index.html in browser
00:14 for now index.html is not styled
00:22 LINKING 1st RESOURCE to index.html
00:22 let's link main.css file to index.html
00:27 adding link start tag in head section
00:29 adding the required href attribute which allows us to add the path of the resource we're about to link to our page
00:31 adding the resource's path: "main.css"
00:31 Note:
when the resource to be linked (main.css) and the page to which this resource will link (index.html) are in the same folder, then the path of the resource (main.css) corresponds to the name of that resource (main.css)
00:35 adding the resource MIME type through type attribute
00:41 text⁄css represents the Media (MIME) Type of main.css; this information is purely advisory (for user agents only)
00:45 adding the required rel attribute to link element
00:46 specifying what main.css (the linked resource) represents for index.html: a CSS style sheet
00:54 DONE! main.css has been successfully linked to our html document
01:00 test
01:02 test result: ok
the CSS rules defined inside main.css file apply to our html page
01:07 view: before linking the resource and after linking it
01:15 LINKING the 2nd RESOURCE to index.html
01:15 let's link now the favicon.png to the html file
01:18 adding the link tag
01:20 adding resource path (required)
01:30 adding resource MIME type (optional)
01:38 specifying resource relationship with the html page (required)
01:45 DONE! favicon.png has been successfully linked to our html document
01:49 test
01:52 test result: ok
the representative icon linked to our html file displays in browser tab
01:55 view: before linking the resource and after linking it

For more information about the link element, please see the specs: W3CWHATWG